原型链

什么是原型链

所有的对象都是通过new 函数的方式创建的

var u1 = new User("邓", "旭明"); // 对象 u1 通过 new User 创建
var u2 = {
  // 对象 u2 通过 new Object 创建
  firstName: "莫",
  lastName: "妮卡",
};
// 等效于
var u2 = new Object();
u2.firstName = "莫";
u2.lastName = "妮卡";

上面的代码形成的原型图如下

原型对象本身也是一个对象，默认情况下，是通过new Object创建的，因此，上面的两幅原型图是可以发生关联的

Object.prototype.__proto__比较特殊，它固定指向 null

可以看出，u1 的隐式原型形成了一个链条，称之为原型链

当读取对象成员时，会先看对象自身是否有该成员，如果没有，就依次在其原型链上查找

完整的链条

这个链条太重要了，一定要会自己推导出来。

对开发的影响

在原型上更改会产生多大影响

更改构造函数的原型会对所有原型链上有该构造函数的原型的对象产生影响

学会利用原型链判断类型

1. instanceof关键字【常用】

   object instanceof constructor;
   // 判断object的原型链中，是否存在constructor的原型
   //技巧--直接念是不是  arr instanceof Array

2. Object.getPrototypeOf()【不常用】

   Object.getPrototypeOf(object);
   // 返回object的隐式原型  相当于  {a:1}.__proto__

学会创建空原型的对象

1. 利用Object.create()

   Object.create(target);
   // 返回一个新对象，新对象以target作为隐式原型
   
   Object.create(null);  相当于创建出一个对象，这个对象的__proto__=null

2. 利用Object.setPrototypeOf()

   Object.setPrototypeOf(obj, prototype);
   // 设置obj的隐式原型为prototype
   
   let obj = { a: 1 }; //obj是有__proto__
   Object.setPrototypeOf(obj, null); //相当于设置obj.__proto__=null

   注意：一般情况下永远不要在代码使用proto，如果要设置，请使用上面的getPrototypeOf和setPrototypeOf

练习题

1.js

// 下面的代码输出什么？
function User() {}
User.prototype.sayHello = function () {};

var u1 = new User();
var u2 = new User();

console.log(u1.sayHello === u2.sayHello); // true
console.log(User.prototype === Function.prototype); // false
console.log(User.__proto__ === Function.prototype); // true
console.log(User.__proto__ === Function.__proto__); // true
console.log(u1.__proto__ === u2.__proto__); // true
console.log(u1.__proto__ === User.__proto__); // false
console.log(Function.__proto__ === Object.__proto__); // true
console.log(Function.prototype.__proto__ === Object.prototype.__proto__); // false
console.log(Function.prototype.__proto__ === Object.prototype); //true

2.js

// 下面的代码输出什么？（字节）
console.log({} instanceof Object); //true
console.log({}.toString instanceof Function); //true
console.log(Object instanceof Function); //true
console.log(Function instanceof Object); //true

3.js

// 下面的代码输出什么？（京东）
Function.prototype.a = 1;
Object.prototype.b = 2;

function A() {}

var a = new A();

console.log(a.a, a.b); //undefined 2
console.log(A.a, A.b); //1 2