JavaScript 什么是原型链?

原型链 : 实例对象与原型之间的链接,叫做原型链

下面我们演示个小例子来说明原型链

        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的值弹出来

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/xyphf/article/details/77370258
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2020-03-07 22:08:37
阅读 ( 1210 )
分类：

JavaScript 什么是原型链?

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看