JavaScript原型
- 1. 原型的概念
- 2. 原型继承
- 2.1 原型链
- 3. class类的原型对象
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)
