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)