原型链
原型链是JavaScript实现继承的一种机制
- 每个对象都有一个 原型对象(prototype) ,当试图访问一个对象的属性时,如果这个对象内部不存在这个属性,那么它会查看它的原型对象是否存在这个属性。
- 构造函数的prototype属性就是原型对象,而 实例对象的__proto__属性就是链接到原型对象的指针。
- 通过原型链,可以实现多层继承。子类型的原型对象会将自身的原型指向父类型的原型对象。
- 这样当访问一个对象时,如果它本身没有这个属性或方法,就会去它的原型对象里查找,如果还没有就继续查找它的原型对象的原型对象,直到找到为止。
- 举例
function Person(){}
Person.prototype.name = 'John Doe';
function Student(){}
Student.prototype = new Person();
var student = new Student();
student.name; // John Doe, 通过原型链查找到Person的原型对象
解释:
student对象里找不到name属性,那就通过student对象的__proto__指针指向Student.prototype原型里找,又找不到,就又通过Student.prototype原型对象的__proto__指针指向Person.prototype原型里找,找到name属性,结束
原型
原型在JavaScript中的含义和作用如下:
- 原型(prototype) 是一个对象,用于实现继承机制,是JavaScript实现面向对象的一种方式。
- JavaScript中规定,每个函数都有一个 prototype属性 ,这个属性是一个对象,我们称这个对象为原型对象。
- 当调用构造函数创建一个新对象实例时,实例的内部会有一个指针属性__proto__(注意:是两个下划线),指向构造函数的prototype对象。
- 实例对象可以通过__proto__属性(也称对象原型)链接到原型对象,从而继承原型对象上的属性和方法。
- prototype原型对象 和 对象原型__proto__ 里都有一个 constructor属性 ,它会 指向创建该实例的构造函数。
- 我们可以通过给构造函数的prototype对象添加属性和方法,来为所有的实例对象添加共享的属性和方法。
- 原型对象也是一个普通对象,所以它也有自己的__proto__属性,这样就形成了原型链。
- 通过原型链,可以实现多层继承,子类型可以访问父类型和祖类型的属性和方法。
- 通过instanceof操作符可以判断对象是否是某个构造函数的实例。
- 构造函数和原型对象中的this都指向实例化对象
简单的来说:
- 原型是一个对象,我们也称为prototype为原型对象
- 原型的作用:共享方法,把那些不变的方法直接定义在prototype对象上
- 对象原型指向原型对象
function Star(name) {
this.name = name
}
console.log(Star.prototype) // 返回一个对象称为原型对象
// 以下来验证给构造函数的prototype对象添加属性和方法是可以被所有实例对象共享的
Star.prototype.sing = function() {
console.log('我会唱歌')
}
// 创建a,b两个实例对象
const a = new Star(10)
const b = new Star(20)
// 判断两个实例对象的sing方法是否相等,如果是就说明是共享的
console.log(a.sing === b.sing) // 结果为true,说明是共享的
constructor属性
目标:了解constructor属性的作用
使用场景:如果有多个对象的方法,我们可以给原型对象采取对象形式赋值。但是这样就会覆盖构造函数原型对象原来的内容,这样修改后的原型对象constructor属性就不再指向当前构造函数了。此时,我们可以在修改后的原型对象中,添加一个constructor指向原来的构造函数。
未添加constructor属性
function Star(name) {
this.name = name
}
Star.prototype = {
sing: function() { console.log('唱歌') },
dance: function() { console.log('跳舞') }
}
console.log(Star.prototype.constructor) // 指向 Object
添加constructor属性
function Star(name) {
this.name = name
}
Star.prototype = {
// 手动添加constructor 指向 Star构造函数
constructor = Star
sing: function() { console.log('唱歌') },
dance: function() { console.log('跳舞') }
}
console.log(Star.prototype.constructor) // 指向 Star