导读:什么是原型?什么又是原型链?
原型
先写一个简单的代码示例。
// 构造函数
function Foo(name, age) {
this.name = name
}
Foo.prototype.alertName = function () {
alert(this.name)
}
// 创建示例
var f = new Foo('zhangsan')
f.printName = function () {
console.log(this.name)
}
// 测试
f.printName()
f.alertName()
执行printName
时很好理解,但是执行alertName
时发生了什么?这里再记住一个重点 当试图得到一个对象的某个属性时,如果这个对象本身没有这个属性,那么会去它的__proto__
(即它的构造函数的prototype
)中寻找,因此f.alertName
就会找到Foo.prototype.alertName
。
其实每个 JS 对象都有 __proto__
属性,这个属性指向了原型。这个属性在现在来说已经不推荐直接去使用它了,这只是浏览器在早期为了让我们访问到内部属性 [[prototype]] 来实现的一个东西。
看到这里你应该明白了,原型也是一个对象,并且这个对象中包含了很多函数,所以我们可以得出一个结论:对于 obj 来说,可以通过 __proto__
找到一个原型对象,在该对象中定义了很多函数让我们来使用。
打开 constructor
属性我们又可以发现其中还有一个 prototype
属性,并且这个属性对应的值和先前我们在 __proto__
中看到的一模一样。所以我们又可以得出一个结论:原型的 constructor
属性指向构造函数,构造函数又通过 prototype
属性指回原型,但是并不是所有函数都具有这个属性,Function.prototype.bind()
就没有这个属性。
通过上面的说明可以知道,实例对象中有一个__proto__
属性指向原型对象,原型中有一个cunstructor
属性指向它的构造函数,构造函数中有一个prototype
属性,执行它的原型对象.
原型链
当试图得到一个对象的某个属性时,如果这个对象本身没有这个属性,那么会去它的__proto__
(即它的构造函数的prototype)中寻找
其实原型链就是多个对象通过 __proto__
的方式连接了起来。为什么 obj
可以访问到 valueOf
函数,就是因为 obj
通过原型链找到了 valueOf
函数。
原型链中的this
所有从原型或更高级原型中得到、执行的方法,其中的this
在执行时,就指向了当前这个触发事件执行的对象。