JavaScript 原型与原型链，继承

github.com/CongYao1993…

#1. 原型

• prototype：每个构造函数都有一个原型对象 prototype
  • prototype 属性是一个指针，指向一个对象，该对象包含所有实例共享的属性和方法。
• constructor：原型对象都包含一个指向构造函数的指针 constructor
• __proto__：当调用构造函数创建一个新实例，该实例的内部将包含一个 __proto__ 属性，指向构造函数的原型对象
  • 所有的引用类型（数组、对象、函数）都有一个 __proto__ 属性

#2. 使用构造函数创建对象

创建自定义类型最常见的方式，就是组合使用构造函数模式与原型模式。

• 构造函数模式用于定义实例属性，而原型模式用于定义方法和共享的属性。
• 每个实例都会有自己的一份实例属性的副本，但同时又共享着对方法的引用，最大限度地节省了内存。

复制
function Person(name, age) {
  this.name = name;
  this.age = age;
  this.friends = ["Bob"];
}


Person.prototype = {
  constructor: Person,
  sayName: function () {
    alert(this.name);
  },
};


Person.statciFunc = function () {
  console.log("我是静态方法，与实例无关");
};

var person1 = new Person("Tom", 29);
var person2 = new Person("Mary", 32);

person1.friends.push("Van");
alert(person1.friends); 
alert(person2.friends); 
alert(person1.friends === person2.friends); 
alert(person1.sayName === person2.sayName); 

#3. new 的实现原理

MDN new

new 操作符用于创建对象的实例。

new 关键字会进行如下的操作：

1. 创建一个空的 JavaScript 对象（即{}）；
2. 为空对象添加属性 __proto__，将该属性指向构造函数的原型对象；
3. 将空对象作为 this 的上下文；
4. 如果构造函数的返回值为对象，则返回构造函数的返回值，否则返回新对象。

如果你没有使用 new 运算符，构造函数会像其他的常规函数一样被调用，并不会创建一个对象。在这种情况下，this 的指向也是不一样的。

复制function myNew(func, ...args) {
  
  const obj = {};

  
  obj.__proto__ = func.prototype;

  
  const result = func.call(obj, ...args);

  
  const isObject = typeof result === "object" && result !== null;
  const isFunction = typeof result === "function";
  if (isObject || isFunction) {
    return result;
  }

  
  return obj;
}

复制function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHello = function () {
  console.log(this.name);
};

const xiaoming1 = new Person("xiaoming", 12);
console.log(xiaoming1);

const xiaoming2 = myNew(Person, "xiaoming", 12);
console.log(xiaoming2);

#4. 原型链

实例对象都有 __proto__ 属性，指向它的原型对象；原型对象也是对象，也有 __proto__ 属性，指向原型对象的原型对象，直到最顶层对象 Object 的原型 Object.prototype.__proto__===null，这样一层一层形成的链式结构，称为原型链。

当获取一个对象的某个属性时，如果这个对象本身没有这个属性，就会沿着原型链往上查找，直到 Object.prototype。

原型与实例的关系可以通过两种方式来确定：

1. instanceof 操作符：如果一个实例的原型链中出现过相应的构造函数，则 instanceof 返回 true；
2. isPrototypeOf() 方法：用于检查一个原型对象是否存在于另一个对象的原型链中，只要原型链中包含这个原型对象，这个方法就返回 true。

复制function Person(name) {
  this.name = name;
}
const person = new Person("yc");
console.log(person instanceof Person); 
console.log(person instanceof Object); 
console.log(Person.prototype.isPrototypeOf(person)); 
console.log(Object.prototype.isPrototypeOf(person)); 

#5. 继承

继承，即让一个引用类型继承另一个引用类型的属性和方法。

原型链继承和构造函数继承了解即可，主要是组合继承和寄生式组合继承。

#5.1 原型链继承

• 优点：无
• 缺点：
  • 创建子类实例时，不能向父类的构造函数中传递参数
  • 父类中所有引用类型的属性会被所有子类实例共享，也就说一个子类实例修改了父类中的某个引用类型的属性时，其他子类实例也会受到影响

复制function Parent() {
  this.name = "parent";
  this.hobby = ["sing", "rap"];
}

function Child() {
  this.type = "child";
}
Child.prototype = new Parent();

let child1 = new Child();
let child2 = new Child();
child1.name = "Bob";
console.log(child1.name); 
console.log(child2.name); 
child1.hobby.push("basketball");
console.log(child1.hobby); 
console.log(child2.hobby); 

#5.2 构造函数继承（经典继承）

• 优点：
  • 在子类构造函数中可以向父类的构造函数中传递参数
  • 避免了父类中的引用类型属性在子类中共享的问题
• 缺点：父类原型对象上的方法子类继承不到

复制function Parent(age) {
  this.name = "parent";
  this.age = age;
  this.hobby = ["sing", "rap"];
}
Parent.prototype.sayHi = function () {
  console.log("Hi");
};

function Child(age) {
  Parent.call(this, age);
  this.type = "child";
}

let child1 = new Child(15);
let child2 = new Child(15);
child1.hobby.push("basketball");
console.log(child1.name); 
console.log(child1.age); 
console.log(child1.type); 
console.log(child1.hobby); 
console.log(child2.hobby); 
child1.sayHi(); 

#5.3 组合继承（原型链继承+构造函数继承）

使用最多的继承模式是组合继承，使用原型链继承共享的属性和方法，而通过借用构造函数继承实例属性。既通过在原型上定义方法实现了函数复用，又能够保证每个实例都有它自己的属性。

• 优点：
  • 在子类构造函数中可以向父类的构造函数中传递参数
  • 避免了父类中的引用类型属性在子类中共享的问题
  • 父类原型对象上的方法子类也可以继承到
• 缺点：父类构造函数被调用了两次

SubType.prototype 上会有两个属性：name 和 colors。它们都是 SuperType 的实例属性，但现在成为了 SubType 的原型属性。在调用 SubType 构造函数时，也会调用 SuperType 构造函数，这一次会在新对象上创建实例属性 name 和 colors。这两个实例属性会遮蔽原型上同名的属性。

复制function SuperType(name) {
  this.name = name;
  this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function () {
  console.log(this.name);
};

function SubType(name, age) {
  
  SuperType.call(this, name); 
  
  this.age = age;
}


SubType.prototype = new SuperType(); 


SubType.prototype.constructor = SubType;


SubType.prototype.sayAge = function () {
  console.log(this.age);
};

将子类的原型指向父类的实例，子类原型不仅拥有父类实例所拥有的全部属性和方法，其内部还有 __proto__ 指针指向父类的原型。

复制function Parent(age) {
  this.name = "parent";
  this.age = age;
  this.hobby = ["sing", "rap"];
}
Parent.prototype.sayHi = function () {
  console.log("Hi");
};

function Child(age) {
  Parent.call(this, age); 
  this.type = "child";
}
Child.prototype = new Parent(); 
Child.prototype.constructor = Child;

let child1 = new Child(15);
let child2 = new Child(15);
child1.hobby.push("basketball");
console.log(child1.name); 
console.log(child1.age); 
console.log(child1.type); 
console.log(child1.hobby); 
console.log(child2.hobby); 
child1.sayHi(); 

#5.4 寄生式组合继承（实现继承最有效的方式！）

• 优点：实现继承最有效的方式！
• 缺点：无

复制function Parent(age) {
  this.name = "parent";
  this.age = age;
  this.hobby = ["sing", "rap"];
}
Parent.prototype.sayHi = function () {
  console.log("Hi");
};

function Child(age) {
  Parent.call(this, age);
  this.type = "child";
}
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

let child1 = new Child(15);
let child2 = new Child(15);
child1.hobby.push("basketball");
console.log(child1.name); 
console.log(child1.age); 
console.log(child1.type); 
console.log(child1.hobby); 
console.log(child2.hobby); 
child1.sayHi(); 

Object.create() 方法用于创建一个新对象，使用参数对象来作为新创建对象的原型（prototype）。原理如下：

复制function object(o) {
  function F() {}
  F.prototype = o;
  return new F();
}

#6. 类 class

#6.1 class 的基本用法

constructor() 方法是类的默认方法，通过 new 命令生成对象实例时，自动调用该方法，该方法默认返回实例对象 this。

实例属性现在除了可以定义在 constructor()方法里面的 this 上面，也可以定义在类内部的最顶层。

类的属性和方法，除非显式定义在 this 上，否则都是定义在原型上。

复制class Point {
  count = 0; 

  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {}

  toValue() {}

  static staticProp = 1; 

  static staticMethod() {
    
  }

  #privateProp = 0; 

  #privateMethod() {
    
  }
}

#6.2 class 的继承

复制class ColorPoint extends Point {
  constructor(x, y, color) {
    super(x, y); 
    this.color = color;
  }

  toString() {
    return this.color + " " + super.toString(); 
  }
}

#7. instanceof 的实现原理

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

复制function myInstanceof(obj, className) {
  
  if (!obj || !className || !obj.__proto__ || !className.prototype) {
    return false;
  }

  let curProto = obj.__proto__;

  while (curProto) {
    
    if (curProto === className.prototype) {
      return true;
    }
    curProto = curProto.__proto__;
  }

  return false;
}

复制function SubType(name, age) {
  this.name = name;
  this.age = age;
}
const instance = new SubType("yc", 18);
console.log(myInstanceof(instance, SubType)); 
console.log(myInstanceof(instance, Object)); 

#8. 函数的原型

• 函数实例（不是实例对象）的 __proto__ 指向 Function.prototype
• Function.prototype.__proto__ 指向 Object.prototype
• 函数实例的原型的 __proto__ 指向 Object.prototype，函数实例的原型就是构造函数创建对象的原型

复制function func() {}
console.log(func.__proto__ === Function.prototype); 
console.log(Function.prototype.__proto__ === Object.prototype); 
console.log(func.prototype.__proto__ === Object.prototype); 

console.log(Object.__proto__ === Function.prototype); 
console.log(Array.__proto__ === Function.prototype); 
console.log(Date.__proto__ === Function.prototype); 

f = new func();
console.log(f.__proto__ === func.prototype);