010-原型链

1、概念

原型链：javascript的继承机制，是指获取JavaScript对象的属性会顺着其_proto_的指向寻找，直至找到Object.prototype上。

2、原理

💡 Tips：构造函数 Fn， p 为 new Fn 的实例对象，p 有一个属性 proto 指向了 Fn.prototype，形成原型链。

function Fn(name) {
  this.name = name;
}
Fn.prototype.run = function () {
  console.log('run run run ' + this.name);
};

let obj2 = new Fn('tom');
obj2.run();
console.log(obj2.__proto__ === Fn.prototype); // true
console.log(Fn.prototype.constructor === Fn); // true
console.log(obj2.constructor === Fn); // true

原型链示意图：

3、new 操作符原理

function Fn(name, age) {
  this.name = name
  this.age = age
}
Fn.prototype.sayName = function () {
  return this.name
}
var obj = myNew(Fn, "zcf", 18)
obj.sayName() // "zcf"

function myNew() {
  //第一步新建一个对象
  var obj = {}
  // 第二步，拿到构造函数
  var constructor = [].shift.call(arguments)
  // 将obj的原型指向构造函数的原型，这样obj就可以访问构造函数原型中的属性了
  obj.__proto__ = constructor.prototype
  // 使用apply改变构造函数this指向obj,这样obj就可以访问构造函数原型中的属性了
  var ret = constructor.apply(obj, arguments)
  // 要返回obj
  return typeof ret === "object" ? ret : obj
}

4、应用

将属性挂载到实例对象上，将公共方法挂载到构造函数的原型上，减少每次 new 时，都需要创建方法，多消耗堆内存。