对于使用过基于类的语言 (如 Java 或 C++) 的开发者们来说，JavaScript 实在是有些令人困惑 —— JavaScript 是动态的，本身不提供一个 class 的实现。即便是在 ES2015/ES6 中引入了 class 关键字，但那也只是语法糖，JavaScript 仍然是基于原型的。
当谈到继承时，JavaScript 只有一种结构：对象。每个实例对象（object）都有一个私有属性（称之为 proto）指向它的构造函数的原型对象（prototype）。该原型对象也有一个自己的原型对象（proto），层层向上直到一个对象的原型对象为 null。根据定义，null 没有原型，并作为这个原型链中的最后一个环节。
几乎所有 JavaScript 中的对象都是位于原型链顶端的 Object 的实例。
// 让我们从一个函数里创建一个对象 obj，它自身拥有属性 name 和 age 的：
const fun = function () {
this.name = 1;
this.age = 2;
}
/* 这么写也一样
class Fun{
constructor(){
this.name = 1;
this.age = 2;
}
}
const obj = new Fun();
*/
const obj = new f(); // {name: 1, age: 2}
// 在 f 函数的原型上定义属性
fun.prototype.age = 3;
fun.prototype.height = 4;
// 不要在 fun 函数的原型上直接定义 fun.prototype = {age:3,height:4};这样会直接打破原型链
// obj.[[Prototype]] 有属性 age 和 height
// (其实就是 o.__proto__ 或者 o.constructor.prototype)
// obj.[[Prototype]].[[Prototype]] 是 Oageject.prototype.
// 最后 obj.[[Prototype]].[[Prototype]].[[Prototype]] 是 null
// 这就是原型链的末尾，即 null，
// 根据定义，null 就是没有 [[Prototype]]。
// 综上，整个原型链如下：
// {name:1, age:2} ---> {age:3, height:4} ---> Oageject.prototype---> null
console.log(o.name); // 1
// name 是 obj 的自身属性吗？是的，该属性的值为 1
console.log(o.age); // 2
// age 是 obj 的自身属性吗？是的，该属性的值为 2
// 原型上也有一个'age'属性，但是它不会被访问到。
// 这种情况被称为"属性遮蔽 (property shnamedowing)"
console.log(o.height); // 4
// height 是 obj 的自身属性吗？不是，那看看它的原型上有没有
// height 是 obj.[[Prototype]] 的属性吗？是的，该属性的值为 4
console.log(o.sex); // undefined
// sex 是 obj 的自身属性吗？不是，那看看它的原型上有没有
// sex 是 obj.[[Prototype]] 的属性吗？不是，那看看它的原型上有没有
// obj.[[Prototype]].[[Prototype]] 为 null，停止搜索
// 找不到 sex 属性，返回 undefined
继承方法
JavaScript 并没有其他基于类的语言所定义的“方法”。在 JavaScript 里， 任何函数都可以添加到对象上作为对象的属性。函数的继承与其他的属性继承没有差别， 包括上面的“属性遮蔽”（这种情况相当于其他语言的方法重写）。 当继承的函数被调用时，this 指向的是当前继承的对象，而不是继承的函数所在的原型对象。
const obj = {
age: 1,
name: function(){
return this.age + 1;
}
};
console.log(obj.name()); // 2
// 当调用 obj.name 时，'this' 指向了 obj.
const prion = Object.create(obj);
// prion 是一个继承自 obj 的对象
prion.age = 4; // 创建 prion 的自身属性 'a'
console.log(prion.name()); // 5
// 调用 prion.name 时，'this' 指向了 prion
// 又因为 prion 继承了 oobj 的 name 函数
// 所以，此时的 'this.age' 即 prion.age，就是 prion 的自身属性 'age'`
继承方法
JavaScript 并没有其他基于类的语言所定义的“方法”。在 JavaScript 里，任何函数都可以添加到对象上作为对象的属性。函数的继承与其他的属性继承没有差别，包括上面的“属性遮蔽”（这种情况相当于其他语言的方法重写）。当继承的函数被调用时，this 指向的是当前继承的对象，而不是继承的函数所在的原型对象。
const obj = {
age: 1,
name: function(){
return this.age + 1;
}
};
console.log(obj.name()); // 2
// 当调用 obj.name 时，'this' 指向了 obj.
const prion = Object.create(obj);
// prion 是一个继承自 obj 的对象
prion.age = 4; // 创建 prion 的自身属性 'a'
console.log(prion.name()); // 5
// 调用 prion.name 时，'this' 指向了 prion
// 又因为 prion 继承了 oobj 的 name 函数
// 所以，此时的 'this.age' 即 prion.age，就是 prion 的自身属性 'age'
在 JavaScript 中使用原型
接下去，来仔细分析一下这些应用场景下，JavaScript 在背后做了哪些事情。 正如之前提到的，在 JavaScript 中，函数（function）是允许拥有属性的。 所有的函数会有一个特别的属性 —— prototype 。而对象Object是没有prototype属性,很多童鞋误认为 prototype是 Object的属性 以下的代码是独立的（出于严谨，假定页面没有其他的 JavaScript 代码）。为了最佳的学习体验，我们强烈建议童鞋们打开浏览器的控制台（在 Chrome 浏览器，进入“console”选项卡，然后把如下的 JavaScript 代码复制粘贴到窗口中，最后通过按下回车键运行代码
// JS 中只有函数与class 才有prototype 属性，
function funtionPrototype() {}
console.log(funtionPrototype.prototype);
/**
{
constructor: ƒ funtionPrototype()
[[Prototype]]: Object
}
*/
class FuntionPrototype{}
const fun = new FuntionPrototype();
const fun2 = new FuntionPrototype.prototype.constructor();
// fun 与 fun2 返回值是一样的(不能说结果一样;因为没new一次 都会产生一个新的对象)
console.log(FuntionPrototype.prototype);
/**
{
constructor: ƒ funtionPrototype()
[[Prototype]]: Object
}
*/
// object中没有 prototype ，
const objectPrototype = {}
console.log(objectPrototype.prototype);//undefined
在控制台显示的 JavaScript 代码块中，我们可以看到 doSomething 函数的一个默认属性 prototype。而这段代码运行之后，控制台应该显示类似如下的结果：
{
constructor: ƒ funtionPrototype(),
__proto__: {
constructor: ƒ Object(),
hasOwnProperty: ƒ hasOwnProperty(),
isPrototypeOf: ƒ isPrototypeOf(),
propertyIsEnumerable: ƒ propertyIsEnumerable(),
toLocaleString: ƒ toLocaleString(),
toString: ƒ toString(),
valueOf: ƒ valueOf()
}
}
prototype 与 __proto__ 两者属性关系
function fun () {}
const obj = new fun()//fun{}
console.log(typeof fun); // function
class Fun{}
const obj = new fun2()//Fun2{}
console.log(typeof fun);// function
从刚才代码我们可以得出一些结论, class 与 function 关键字类型都属于function, 而 JS里只有function 才有prototype 属性, 我们通过new 关键字来创造一个Object对象.
说到这我们在看一段代码
const arr = [];
//new Array() 等效于这样写法
console.log(typeof arr); // obecjt
//arr 虽然是数组 但也是引用数据类型, JS里引用数据类型只有对象obecjt类型
console.log(arr.push);// 方法体
为什么arr 数组 作为一个对象数据类型 为什么自带 push() 等Api 呢 ,那是因为arr数组这个对象 在声明 时就继承了 Array.prototype 属性 arr身上所有自带的api 都继承于 Array.prototype,那arr继承的方法与属性 在哪呢?
const arr = [];
console.log(arr. __proto__); // Array.prototype
console.log(Array.prototype); // Array.prototype
发现打印 arr. __proto__ 与 Array.prototype 结果一样, 由此我们可以得出结论 prototype === __proto__
const arr = [];
console.log(arr.__proto__===Array.prototype); // true
事实证明,确实如此, proto 属于对象里继承父级 Array.prototype (也就是我们所说的原型链)属性与方法. 延伸一下
class Foo{};
var o = new Foo();
//实际上JS底层做了这一步
var o = new Object();
o.__proto__ = Foo.prototype;
Foo.call(o);
