第六讲_JavaScript原型

1. 原型的概念

原型是 JavaScript 对象相互继承特性的机制。

• 每个函数都有一个 prototype 属性，这个属性指向一个对象，这个对象称为原型对象。
• 每个对象都有一个 [[Prototype]] 属性，这个属性指向原型对象。
• 原型对象都有一个constuctor属性，这个属性指向构造函数。

function Person(head, eyes) {
  this.head = head;
  this.eyes = eyes;
}

let person = new Person(1, 2);

// 每个对象都有一个[[Prototype]]属性，这个属性指向原型对象
// 对象的[[Prototype]]属性，需要通过__proto__读取
console.log(person.__proto__ === Person.prototype)

// 原型对象都有一个constuctor属性，这个属性指向构造函数
console.log(Person.prototype.constructor === Person)

2. 原型继承

function Person() {
    this.eyes = 2;
    this.head =1;
}

function Man() {
}

// 每个函数都有一个prototype属性
// 将 Man() 函数的prototype指向 new Person()对象
Man.prototype = new Person();
// 把原型对象下的constructor再指回原来的构造函数
Man.prototype.constructor = Man;

// 创建一个Man对象，man就拥有了Person下的两个属性
const man = new Man();

console.log(man)

2.1 原型链

基于原型对象的继承使得不同构造函数的原型对象关联起来，并且这种关联的关系是一种链状的结构，所以称之为原型链。

上述的代码，在调用man对象的head属性时

• 首先在Man函数自身找head属性
• 如果没有，再到prototype属性指向的原型对象找head属性，因为它的原型对象是people对象，所以最终就找到了people的head属性。

3. class类的原型对象

ES6 class 类的prototype 属性指向不能修改，但提供了extends关键字来实现继承，其底层也是修改了prototype 。

继承前：

class Person {
}

class Man{
}

console.dir(Man)

继承后：

class Person {
}

class Man extends Person{
}

console.dir(Man)