美文网首页JavaScript 使用记录
JavaScript 继承 1 原型链

JavaScript 继承 1 原型链

作者: 赵者也 | 来源:发表于2017-12-14 10:57 被阅读14次

简单回顾一下构造函数、原型和实例之间的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。那么,假如我们让原型对象等于另一个类型的实例,结果如何?显然,此时的原型对象将包含一个指向另一个原型的指针,相应地,另一个原型中也包含一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例,那么上述关系依然成立,如此层层递进,就构成了实例与原型的链条。这就是所谓原型链的基本概念。

其代码的大致形式如下:

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

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

        function SubType() {
            this.subProperty = true;
        }
        // 继承 SuperType
        SubType.prototype = new SuperType();

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

        var instance = new SubType();
        console.log(instance.getSuperValue());

输出结果:

输出结果

现在,原来存在于 SuperType 实例中的所有属性和方法,现在也存在于 SubType.prototype 中了。

注意: 在通过原型链实现继承时,不要使用对象字面量创建原型方法。因为这样做就会重写原型链。

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

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

        function SubType() {
            this.subProperty = true;
        }
        // 继承 SuperType
        SubType.prototype = new SuperType();
        // 使用对象字面量创建原型方法,会导致上一行代码无效
        SubType.prototype = {
            getSubValue: function() {
                return this.subProperty;
            },
            someOtherValue: function() {
                return false;
            }
        }
        var instance = new SubType();
        console.log(instance.getSuperValue()); // error
原型链的问题

下面的例子可以充分展示原型链的第一个问题:

        function SuperColors() {
            this.colors = ["red", "green", "blue"];
        }
        function SubColors() {
        }
        // 继承 SuperColors
        SubColors.prototype = new SuperColors();

        var instance1 = new SubColors();
        instance1.colors.push("white");
        console.log(instance1.colors);
        var instance2 = new SubColors();
        console.log(instance2.colors);

输出结果:

输出结果

原型链的第二个问题是:在创建子类型的实例时,不能向父类型的构造函数中传递参数。实际上,应该说是没有办法在不影响所有对象实例的情况下,给父类型的构造函数传递参数。

相关文章

  • JS 继承

    1.原型链继承:prototype 2.原型链继承2:prototype 注意:JavaScript的类继承其实本...

  • 【javascript】继承

    javascript只支持实现继承,而且继承主要是依靠原型链来实现的。 原型链 javascript将原型链作为实...

  • js原型、原型链、继承的理解

    一、原型、原型链 原型是Javascript中的继承的基础,JavaScript的继承主要依靠原型链来实现的。 原...

  • JavaScript 原型、原型链与原型继承

    原型,原型链与原型继承 用自己的方式理解原型,原型链和原型继承 javascript——原型与原型链 JavaSc...

  • es5的部分继承以及es6的class

    一、JavaScript常用的原型继承方式 原型链继承 2,构造函数继承(对象冒充继承) 3,组合继承(原型链继承...

  • 07-继承

    继承 Javascript中继承都基于两种方式:1.通过原型链继承,通过修改子类原型的指向,使得子类实例通过原型链...

  • javascript原型链及继承的理解

    javascript:void(null)# 原型链及继承的理解 定义函数 继承 继承构造函数 继承静态属性 继承原型链

  • JavaScript的六种继承方式

    JavaScript的几种继承方式 原型链继承 借助构造函数继承(经典继承) 组合继承:原型链 + 借用构造函数(...

  • javaScript原型链

    javaScript原型链概念JavaScript之继承(原型链)数据结构var Person = functio...

  • JavaScript继承方式详解

    JavaScript实现继承的方式主要有两种: 原型链继承和借助构造函数继承 一、原型链继承 原型链继承的主要思想...

网友评论

    本文标题:JavaScript 继承 1 原型链

    本文链接:https://www.haomeiwen.com/subject/ibynixtx.html