原型和原型链相关及各种继承方法

一、继承的多种方法

1、原型链继承

• 1. Parent的实例同时包含实例属性方法和原型属性方法，所以把new Parent()赋值给Child.prototype。
• 2.当Child.prototype = new Parent()后， 如果new Child()得到一个实例对象child，那么child.proto === Child.prototype；也就意味着在访问child对象的属性时，如果在child上找不到，就会去Child.prototype去找，如果还找不到，就会去Parent.prototype中去找，从而实现了继承。
• 3.因为constructor属性是包含在prototype里的，上面重新赋值了prototype，所以会导致Child的constructor指向[Function: Parent]，有的时候使用child1.constructor判断类型的时候就会出问题，为了保证类型正确，我们需要将Child.prototype.constructor 指向他原本的构造函数Child

function Parent() {
  this.actions = ["eat", "run"];
}

function Child() {}

// Child.prototype.__proto__ === Parent.prototype
Child.prototype = new Parent();

Child.prototype.constructor = Child;

var child1 = new Child();
var child2 = new Child();

child1.actions.pop();

console.log(child1.actions); // ['eat']
console.log(child2.actions); // ['eat']

隐含的问题：
- 如果有属性是引用类型的，一旦某个实例修改了这个属性，所有实例都会受到影响
- 创建 Child 实例的时候，不能传参

2、构造函数继承

function Parent(name, actions) {
  this.actions = actions;
  this.name = name;
  this.eat = function () {
    console.log(`${name} - eat`);
  };
}

function Child(id, name, actions) {
  Parent.call(this, name); // 如果想直接传从索引1开始的多个参数, 可以cParent.apply(this, Array.from(arguments).slice(1)) / Parent.apply(this, Array.prototype.slice.call(arguments, 1));
  this.id = id;
}

const child1 = new Child(1, "c1", ["eat"]);
const child2 = new Child(2, "c2", ["sing", "jump", "rap"]);

console.log(child1.name); // { actions: [ 'eat' ], name: 'c1', id: 1 }
console.log(child2.name); // { actions: [ 'sing', 'jump', 'rap' ], name: 'c2', id: 2 }
console.log(child1.eat === child2.eat); // false

隐含的问题：
- 方法在构造函数内定义了，每次创建实例都会创建一遍方法，多占一块内存

3、组合继承

function Parent(name, actions) {
  this.name = name;
  this.actions = actions;
}

Parent.prototype.eat = function () {
  console.log(`${this.name} - eat`);
};

function Child(id) {
  Parent.apply(this, Array.from(arguments).slice(1));
  this.id = id;
}

Child.prototype = new Parent();
Child.prototype.constructor = Child;

const child1 = new Child(1, "c1", ["hahahahahhah"]);
const child2 = new Child(2, "c2", ["xixixixixixx"]);

child1.eat(); // c1 - eat
child2.eat(); // c2 - eat

console.log(child1.eat === child2.eat); // true

隐含的问题：
- 调用了两次构造函数，做了重复的操作
1. Parent.apply(this, Array.from(arguments).slice(1));
2. Child.prototype = new Parent();

4、寄生组合继承

function Parent(name, actions) {
  this.name = name;
  this.actions = actions;
}

Parent.prototype.eat = function () {
  console.log(`${this.name} - eat`);
};

function Child(id) {
  Parent.apply(this, Array.from(arguments).slice(1));
  this.id = id;
}

// let TempFunction = function () {};
// TempFunction.prototype = Parent.prototype;
// Child.prototype = new TempFunction();
Child.prototype = Object.create(Parent.prototype);

Child.prototype.constructor = Child;

const child1 = new Child(1, "c1", ["hahahahahhah"]);
const child2 = new Child(2, "c2", ["xixixixixixx"]);

问题：
为什么一定要通过桥梁的方式让 Child.prototype 访问到 Parent.prototype？直接 Child.prototype = Parent.prototype 不行吗？
不行 在给 Child.prototype 添加新的属性或者方法后，Parent.prototype 也会随之改变

5、Class继承

class Parent {
    constructor() {
        this.name = 'aaa';
    }

    getName() {
        console.log('getname');
    }
}

class Child extends Parent {
    constructor() {
        super();
    }
}

const p1 = new Child();
p1.getName();

二、关于原型以及原型链的一些问题

1、在原型上添加属性或者方法有什么好处

如果不通过原型的方式，每生成一个新对象，都会在内存中新开辟一块存储空间，当对象变多之后，性能会变得很差，所以我们可以

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

2、怎么找到构造函数的原型对象

当读取实例的属性时，如果找不到，就会查找与对象关联的原型中的属性，如果还查不到，就去找原型的原型，一直找到最顶层为止。
这样一条通过proto和 prototype 去连接的对象的链条，就是原型链

function Player(color) {
  this.color = color;
}
Player.prototype.start = function () {
  console.log(color + "下棋");
};
const blackPlayer = new Player("black");

console.log(Object.getPrototypeOf(blackPlayer)); // Player {}，可以通过Object.getPrototypeOf来获取__proto__
console.log(blackPlayer.__proto__); // Player {}
console.log(Player.prototype); // Player {}

console.log(Player.__proto__); // [Function]
console.log(Player.constructor); // [Function]

3、new关键字做了什么

1. 一个继承自 Player.prototype 的新对象 whitePlayer 被创建
2. whitePlayer.proto 指向 Player.prototype，即 whitePlayer.proto = Player.prototype
3. 将 this 指向新创建的对象 whitePlayer
4. 返回新对象
   • 如果构造函数没有显式返回值，则返回 this
   • 如果构造函数有显式返回值，是基本类型，比如 number,string,boolean, 那么还是返回 this
   • 如果构造函数有显式返回值，是对象类型，比如{ a: 1 }, 则返回这个对象{ a: 1 }

   function Player(color) {
   this.color = color;
   //   return {a: 1}
   }
   const P = new Player("black");
   console.log(P) // Player {color: "black"}
   

4、 如何实现new

1. 用new Object() 的方式新建了一个对象 obj
2. 取出第一个参数，就是我们要传入的构造函数。此外因为 shift 会修改原数组，所以 arguments 会被去除第一个参数
3. 将 obj 的原型指向构造函数，这样 obj 就可以访问到构造函数原型中的属性
4. 使用 apply，改变构造函数 this 的指向到新建的对象，这样 obj 就可以访问到构造函数中的属性
5. 返回 obj

   
   function objectFactory() {
   let obj = new Object();
   let Constructor = [].shift.call(arguments); //Array.prototype.shift.call(arguments)
   obj.__proto__ = Constructor.prototype;
   let ret = Constructor.apply(obj, arguments);
   return typeof ret === "object" ? ret : obj;
   }
   objectFactory(Player, "black")