javascript 原型链

最新推荐文章于 2022-04-06 23:06:42 发布

PHP__廊外诗鸽

最新推荐文章于 2022-04-06 23:06:42 发布

阅读量527

点赞数

分类专栏： javascript 文章标签： javascript 原型链实例对象搜索

本文链接：https://blog.csdn.net/tashanhongye/article/details/74937356

版权

javascript 专栏收录该内容

29 篇文章 3 订阅

订阅专栏

对于原型链，在《javascript高级程序设计》中有讲解，但有些词汇太过于专业，对于新手来讲，有些难以理解。在讲解原型链之间，在此我们要先搞清除原型的搜索机制。在《javascript高级程序设计》中有这样一段话很重要：

虽然可以通过对象实例访问保存在原型中的值，但却不能通过对象实例重写原型中的值。如果我们在实例中添加了一个属性。该属性将会屏蔽原型中的那个属性。来看下面的例子。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script type="text/javascript">
    function Person(){}

    Person.prototype.name="Nicholas";
    Person.prototype.age=23;
    Person.prototype.job="Software Engineer";
    Person.prototype.sayName=function(){
        document.write(this.name);
    }

    var person1=new Person();
    var person2=new Person();
    person1.name="xiaohong";

    document.write(person1.name);
    document.write("<br>");
    document.write(person2.name);

</script>
</body>
</html>

output:

xiaohong
Nicholas

从上面的输出结果可以看出，先是在实例对象中查找属性”name”的值。

下面我们再来看看《javascript高级程序设计》6.3章节所讲的继承。继承开篇讲到了原型链，其实其中所讲到的原型链对于一个新手来说，一开始看起来有点模糊，不好理解，我是先从它的代码实例入手的，如果看代码还是不能理解，那就先动手敲一敲代码，不要急着一步到位的理解，先感受一下它输出的结果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script type="text/javascript">

    function SuperType(){
        this.prototype=true;
    }

    SuperType.prototype.getSuperValue=function(){
        return this.prototype;
    }


    function SubType(){
        this.subproperty=false;
    }

    SubType.prototype=new SuperType();

    SubType.prototype.getSubValue=function(){
        return this.subproperty;
    }

    var instance=new SubType();
    document.write(instance.getSuperValue());

</script>
</body>
</html>

output:
true

通过上述代码，在结合书中所讲的概念，反反复复的揣摩一下，就能大致理解其意。

通过实现原型链，本质上扩展了前面介绍的原型搜索机制。当以读取模式访问一个实例属性时，首先会在实例中搜索改属性。如果没有找到该属性，则会继续搜素实例的原型。在通过原型链实现继承的情况下，搜索过程就得沿着原型链继续向上，就拿上面的例子来说，调用instace.getSuperValue()会经历三个搜索步骤：
1：搜索实例；
2：搜索原型SubType.prototype;
3：搜索SuperType.prototype.
最后一步才会找到该方法。再找不到属性与方法的情况下，搜索过程总是要一环一环地前行到原型链末端才会停下来。