原型及原型链，new关键字＜前端学习笔记＞

一、为什么我们在原型上添加属性或者方法？

如果不通过原型的⽅式，每⽣成⼀个新对象，都会在内存中新开辟⼀块存储空间，当对象变多之后，性能会变得很差。

但是通过

Player.prototype.xx = function () {};
Player.prototype.xx = function () {};
Player.prototype.xx = function () {};

这种⽅式向原型对象添加属性或者⽅法的话，⼜显得⾮常麻烦。所以我们可以这样写

Player.prototype = {
    start: function () {
        console.log("下棋");
    },
    revert: function () {
        console.log("悔棋");
    },
};

二、怎么找到一个构造函数的原型对象？

使用prototype原型对象创建方法的时候，以对象的形式创建方法的时候会将构造函数覆盖掉，所以需要手动地利用constructor指回原来的构造函数：

function Player(color) {
    this.color = color;
};

Player.prototype = {
    //需要指回构造函数,使用等于会将构造函数原型覆盖,就是Player.prototype.constructor（blackPlayer.__proto__.constructor）指向此对象的构造函数[Function: Object]
    constructor:Player,
    start: function () {
        console.log("下棋");
    },
    revert: function () {
        console.log("悔棋");
    },
};


const whitePlayer = new Player("white");
const blackPlayer = new Player("black");



console.log(blackPlayer.__proto__); //指向blackPlayer的原型（构造它的）
/* {
  constructor: [Function: Player],
  start: [Function: start],
  revert: [Function: revert]
}
 */

console.log(Object.getPrototypeOf(blackPlayer));//获取对象的原型
 /*  {
    constructor: [Function: Player],
    start: [Function: start],
    revert: [Function: revert]
  } */

console.log(Player.prototype); // Player的原型对象
/* {
  constructor: [Function: Player],
  start: [Function: start],
  revert: [Function: revert]
} */

console.log(Player.__proto__); // 指向Player的原型对象（构造它的）  {}

以对象的形式创建方法的时候，不是使用".“操作，而是使用赋值”="，会将构造函数覆盖掉，所以需要手动地利用constructor指回原来的构造函数。

三、new 关键字做了什么？

1. 一个继承自Player的新对象p1被创建了
2. p1__proto__ = Player.prototype, p1的__proto__指向Player的原型对象
3. 将this指向创建的对象p1
4. 返回这个新对象p1
    4.1未显式 return ,返回对象p1
    4.2 显式 return this,返回新的对象p1
    4.3 显式 return 基本类型,返回对象p1
    4.6 显式 return 对象类型(比如一个空对象{}),返回一个空对象

function Player(){
    this.color = 'red';
    //不显式return   //Player { color: 'red' }

    //显式return this; //Player { color: 'red' }
    // return this;

    //显示return 基本类型:number undefined null boolean string symbol,还是会返回新创建的对象
    //return 1

    //显式return Object,返回该对象{} 引用类型:Object, Array, Function, RegExp, Date
    //return {}
};
Player.prototype.start = function(){
    console.log("111");
};
var p1 = new Player();
console.log(p1)

实现new关键字(模拟函数)

//实现new关键字内部实现(模拟函数)
function Player(name){
    this.name = "this player";
    console.log("传入的参数:",name);
}
Player.prototype.start = function(){
    console.log('start');    
}

function objectFactory(){
    let o = new Object();
    //拿到构造函数Player (把数组的第一个元素从中删除并返回第一个元素,arguments 不是数组不能直接调用数组方法,需要使用call或apply)
    let FunctionConstructor  = [].shift.call(arguments);
    //p1__proto__ = Player.prototype
    o.__proto__ = FunctionConstructor.prototype;
    //改变this指向,并传入参数调用构造函数  (arguments中第一个参数构造函数Player被推出,剩下就是正常的给构造函数传参的参数),使用call会把arguments视为单个(类数组)参数
    let resultObj = FunctionConstructor.apply(o,arguments);
    //判断生成的是基本类型(返回对象) 还是引用类型(返回引用类型)
    return typeof resultObj === 'object' ? resultObj : o;
}

const p1 = objectFactory(Player,"董志伟");
console.log(p1);
console.log("改变this(绑定到当前对象):",p1.name)
console.log("判断原型:",p1.__proto__ === Player.prototype);

// 实现new关键字(模拟函数)
function Player(name){
  this.name = "this player";
  console.log("传入的参数:",name);
}
Player.prototype.start = function(){
  console.log('start');    
}

function  MyNew(){
  //1.创建了一个新对象
  let obj = {};
  //2.对象的__proto__属性指向构造函数的原型对象
      // 2.1 提取构造函数
  let constructorFun = [].shift.apply(arguments)
  obj.__proto__ = constructorFun.prototype
  //3. 构造函数的this指向新创建的对象, 调用了构造函数
  let resObj = constructorFun.apply(obj,arguments) 
  //4.resObj是构造函数return 的结果， 得到的是引用类型则返回该引用类型，其余情况都返回obj
  return typeof resObj === 'object' ? resObj : obj
}


let p1 = MyNew(Player,"董志伟666")

console.log(p1)
console.log(p1.__proto__)
console.log(p1.name)

四、原型链到底是什么？

收获

实例化一个对象，对象继承构造函数原型对象上的所有属性和方法，当访问新对象某一个属性或方法时，如果这个对象上没有，就会通过__proto__属性，去构造函数原型对象（prototype）上找，如果还是没有，继续通过__proto__属性到上层的原型对象中查找，直到找到或者返回null为止，寻找的过程就构成一条原型链

//[]由构造函数Array创建,继承其方法(原型上),所以在[]上能找到的方法在构造函数原型上也必然能找到
console.log([].shift === [].__proto__.shift); //true
console.log([].__proto__.constructor);// [Function: Array]

原型链上查找属性

function Player(){};

Player.prototype.name = 'Player';

const p1 = new Player();

p1.name = "p1";
//在p1下找name属性
console.log(p1.name);//p1
//删除p1下的name属性
delete p1.name;
//p1下找不到，就到原型链上找
console.log(p1.name);//Player
//删除Player原型上的name属性,就到Player的构造函数的原型上找
delete Player.prototype.name;
//name属性找不到
console.log(Player.__proto__.__proto__)//[Object: null prototype] {}
console.log(p1.name);//undefined