一、构造函数、实例、原型三者关系
首先声明一个构造函数
function Dog(name){
this.name = name;
}
给上边的构造函数 Dog 的原型 Dog.prototype 上声明一个方法 getName
Dog.prototype.getName = function(){
console.log(this.name);
}
创建一个实例
var dog = new Dog('小白');
dog.getName(); // 继承了原型的方法,可输出:小白
图解三者关系:
文字说明三者关系:
- 构造函数的
prototype属性指向构造函数的原型 - 构造函数原型的
constructor指向构造函数 - 构造函数
new的实例的__proto__指向构造函数的原型
总结:
dog.__proto__ === Dog.prototype
二、什么是原型链呢
我们对上面的例子加点东西
// 构造函数 Animal
function Animal(type){
this.type = type;
}
// Animal 原型
Animal.prototype.getType = function(){
console.log(this.type);
}
// 构造函数 Dog
function Dog(name){
this.name = name;
}
// Dog 原型
// Dog 的原型赋值为 Animal 生成的实例
Dog.prototype = new Animal('dog');
// 增加方法
Dog.prototype.getName = function(){
console.log(this.name);
}
// dog 实例
var dog = new Dog('小白');
上面的例子,
首先声明了构造函数Animal,以及它的原型,并且增加了方法。
然后声明了构造函数Dog,并且将Dog的原型赋值成Animal生成的实例,即Dog.prototype目前是 Animal所生成的实例。那么,Dog.prototype将会继承Animal.prototype的方法getType。
dog.getType(); // dog
图解:
即:
dog.__proto__ === Dog.prototype // true
Dog.prototype.__proto__ === Animal.prototype // true
那么Animal.prototype.__proto__呢?
我们输出一下会发现
Animal.prototype.__proto__ === Object.prototype // true
原型链这就出现了
dog.__proto__ === Dog.prototype
Dog.prototype.__proto__ === Animal.prototype
Animal.prototype.__proto__ === Object.prototype
那么Object.prototype.__proto__呢?
我们输出一下会发现
console.log(Object.prototype.__proto__); // null
没错,输出了 null,此时原型链就到头了。
over