原型链 : 实例对象与原型之间的链接,叫做原型链
下面我们演示个小例子来说明原型链
function Aaa() {
}
Aaa.prototype.num = 10;
var a1 = new Aaa();
alert(a1.num); // 10
大家可能会想,为什么这个对象a1可以找到num
1、首先大家发现这个num并不是挂载到a1的对象下面,而是挂载到构造函数的原型下面
2、那么a1怎么能够找到原型下面的num呢
我们知道a1下面是没有num的,于是就随着原型链查找,找到了num=10
这时我们在构造函数里面写上this.num = 20;
这时a1.num弹出的是10还是20;那么为什么是20呢?
之前我们打过一个比方,你可以把普通的方法或普通的属性看作是CSS中的style,
把原型下的属性或方法看作是CSS中的class,我们都知道style的优先级要比class的优先级要高
<script>
function Aaa() {
this.num = 20;
}
Aaa.prototype.num = 10;
var a1 = new Aaa();
alert(a1.num); // 20
</script>
但是现在我们用原型链的方式来解释为什么是弹出来20
我们知道现在构造函数里面的this就是a1,
原型链的查找是从内层一层层的往外查找
所以先会在①处查找,①找到了所以就直接弹出来,①处找不到才会顺在原型链往上查找
这就是为什么普通的要高于原型的
这时我们考虑原型链究竟有多长?
原型链的最外层其实是 : Object.prototype
我们做个实验
我们把①②处的代码都注释起来,在写上Object.prototype.num = 30;最终弹出来的是30
<script>
// 原型链 : 实例对象与原型之间的链接,叫做原型链
// 原型链的最外层其实是:Object.prototype
function Aaa() {
// this.num = 20;
}
// Aaa.prototype.num = 10;
Object.prototype.num = 30;
var a1 = new Aaa();
alert(a1.num); // 30
</script>
其实就是首先在①处查找,①处没有,
在顺着原型链在②处查找,②处也没有,
于是继续向上查找,在③处Object.prototype下去查找num,查到了,并且将num的值弹出来