原型链

1.原型

每个实例对象（object）都有一个私有属性（称之为 proto ）指向它的构造函数的原型对象（prototype）。该原型对象也有一个自己的原型对象（proto），层层向上直到一个对象的原型对象为 null。根据定义，null 没有原型，并作为这个原型链中的最后一个环节，即原型链的终点。

JavaScript 对象有一个指向一个原型对象的链，原型链。当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。

// 让我们从一个函数里创建一个对象 o，它自身拥有属性 a 和 b 的：
let f = function () {
   this.a = 1;
   this.b = 2;
}
/* 这么写也一样
function f() {
  this.a = 1;
  this.b = 2;
}
*/
let o = new f(); // {a: 1, b: 2}

// 在 f 函数的原型上定义属性
f.prototype.b = 3;
f.prototype.c = 4;

// 不要在 f 函数的原型上直接定义 f.prototype = {b:3,c:4};这样会直接打破原型链
// o.[[Prototype]] 有属性 b 和 c
//  (其实就是 o.__proto__ 或者 o.constructor.prototype)
// o.[[Prototype]].[[Prototype]] 是 Object.prototype.
// 最后 o.[[Prototype]].[[Prototype]].[[Prototype]] 是 null
// 这就是原型链的末尾，即 null，
// 根据定义，null 就是没有 [[Prototype]]。

// 综上，整个原型链如下：

// {a:1, b:2} ---> {b:3, c:4} ---> Object.prototype---> null

console.log(o.a); // 1
// a 是 o 的自身属性吗？是的，该属性的值为 1

console.log(o.b); // 2
// b 是 o 的自身属性吗？是的，该属性的值为 2
// 原型上也有一个'b'属性，但是它不会被访问到。
// 这种情况被称为"属性遮蔽 (property shadowing)"

console.log(o.c); // 4
// c 是 o 的自身属性吗？不是，那看看它的原型上有没有
// c 是 o.[[Prototype]] 的属性吗？是的，该属性的值为 4

console.log(o.d); // undefined
// d 是 o 的自身属性吗？不是，那看看它的原型上有没有
// d 是 o.[[Prototype]] 的属性吗？不是，那看看它的原型上有没有
// o.[[Prototype]].[[Prototype]] 为 null，停止搜索
// 找不到 d 属性，返回 undefined

当继承的函数被调用时，this 指向的是当前继承的对象，而不是继承的函数所在的原型对象 例：

var o = {
  a: 2,
  m: function(){
    return this.a + 1;
  }
};

console.log(o.m()); // 3
// 当调用 o.m 时，'this' 指向了 o.

var p = Object.create(o);
// p 是一个继承自 o 的对象

p.a = 4; // 创建 p 的自身属性 'a'
console.log(p.m()); // 5
// 调用 p.m 时，'this' 指向了 p
// 又因为 p 继承了 o 的 m 函数
// 所以，此时的 'this.a' 即 p.a，就是 p 的自身属性 'a'

2.对象创建

• 使用语法结构创建

var o = {a: 1}

对象o只有属性a，但是可以通过hasOwnProperty判断对象o是否有属性a，然后o自身并没有hasOwnProperty的属性，该属性是继承了Object.prototype的属性 所以其原型链如下

o ---> Object.prototype ---> null

var a = ["yo", "whadup", "?"];

// 数组都继承于 Array.prototype
// (Array.prototype 中包含 indexOf, forEach 等方法)
// 原型链如下：
// a ---> Array.prototype ---> Object.prototype ---> null

function f(){
  return 2;
}

// 函数都继承于 Function.prototype
// (Function.prototype 中包含 call, bind 等方法)
// 原型链如下：
// f ---> Function.prototype ---> Object.prototype ---> null

• 使用构造器创建对象，即使用new操作符
• 使用 Object.create 创建的对象

var a = {a: 1};
// a ---> Object.prototype ---> null

var b = Object.create(a);
// b ---> a ---> Object.prototype ---> null
console.log(b.a); // 1 (继承而来)

var c = Object.create(b);
// c ---> b ---> a ---> Object.prototype ---> null

var d = Object.create(null);
// d ---> null
console.log(d.hasOwnProperty); // undefined，因为 d 没有继承 Object.prototype

• 使用class关键字创建对象

要检查对象是否具有自己定义的属性，而不是其原型链上的某个属性，则必须使用所有对象从 Object.prototype 继承的 hasOwnProperty  方法

3. 拓展原型链

• new初始化

function foo(){}
 foo.prototype = {
   foo_prop: "foo val"
 };
 function bar(){}
 var proto = new foo;
 proto.bar_prop = "bar val";
 bar.prototype = proto;
 var inst = new bar;
 console.log(inst.foo_prop);
 console.log(inst.bar_prop);

• Object.create

允许通过 Object.create(null) 来创建一个没有原型的对象 第二个参数慎用，可能成为一个性能黑洞。

function foo(){}
 foo.prototype = {
   foo_prop: "foo val"
 };
 function bar(){}
 var proto = Object.create(
   foo.prototype
 );
 proto.bar_prop = "bar val";
  // 或者
var proto = Object.create(
   foo.prototype,
   {
     bar_prop: {
       value: "bar val"
     }
   }
 );
 
 bar.prototype = proto;
 var inst = new bar;
 console.log(inst.foo_prop);
 console.log(inst.bar_prop);

• Object.setPrototypeOf（不推荐使用）
• proto

结论：

1. 继承可以Object.create
2. 类型被定义在 .prototype 中
3. 拓展

• instanceof instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。适合检测引用类型
• typeof typeof 操作符返回一个字符串，表示未经计算的操作数的类型，可以检测基本数据类型