当前位置:  开发笔记 > 编程语言 > 正文

关于JavaScript中继承的难题

如何解决《关于JavaScript中继承的难题》经验,为你挑选了1个好方法。

我知道JavaScript中继承的概念是通过原型链,但我不确定我理解它是对的.当读取属性时,引擎将首先搜索实例自己的属性,如果未找到则将搜索实例的[[Prototype]]属性,该属性是对创建实例的函数原型的引用,搜索将继续进行,直到达到Object.prototype.对于以下代码:

var person1 = {
    name: "Qiushi",
    sayName: function() {
        console.log(this.name);
    }
};

person1.sayName();  // Qiushi

var person2 = Object.create(person1);
person2.name = "Alex";
console.log(person2.hasOwnProperty("sayName")); // false
person2.sayName();  // Alex

当person2继承自person1时,person2可以使用person1中定义的方法.但是sayName方法不是person1原型的属性,而是它只是它自己的属性.我的问题是,搜索方法是单独跟随原型链,person2如何使用不在此链中的方法?

-------------------------------最终编辑----------------- --------

如果您对此问题有同样的疑虑,请阅读我和Jimbo之间的对话.



1> T.J. Crowder..:

作为其他对象原型的对象没有什么特别之处,它们只是对象.

当引擎去读取属性时,首先它会查看对象本身以查看它是否具有它,如果有,则使用它.如果没有,它会查看对象原型,然后查看原型等.

在你的代码,person1是原型person2,因此要查找的时候sayNameperson2,因为发动机没有找到它person2,它看起来person2的原型,person1和发现它.

这是一个简单的ASCII艺术图表,显示了您在代码中设置的内容:

                                  +-------------------+
person1-----------------------+-->|     (object)      |
                              |   +-------------------+
                              |   | __proto__         |-->(not shown, Object.prototype)
                              |   | name: "Qiushi"    |
                              |   | sayName: function |
                              |   +-------------------+
                              |
            +--------------+  |
person2---->|   (object)   |  |
            +--------------+  |
            | __proto__    |--+
            | name: "Alex" |
            +--------------+

这是一个更完整但尚未完全完整的版本:

          +------------+                                  
Object--->| (function) |  +->(not shown, Function.prototype)                              
          +------------+  |                                 
          | __proto__  |--+                                  +--------------------+
          | prototype  |---------------------------------+-->|      (object)      |
          +------------+                                 |   +--------------------+
                                  +-------------------+  |   |   __proto__: null  |
person1-----------------------+-->|     (object)      |  |   | toString: function |
                              |   +-------------------+  |   | valueOf: function  |
                              |   | __proto__         |--+   | ...                |
                              |   | name: "Qiushi"    |      +--------------------+
                              |   | sayName: function |   
                              |   +-------------------+   
                              |                           
            +--------------+  |
person2---->|   (object)   |  |
            +--------------+  |
            | __proto__    |--+
            | name: "Alex" |
            +--------------+

推荐阅读
拾味湖
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有