美文网首页JavaScript 使用记录
JavaScript 继承 2 借用构造函数

JavaScript 继承 2 借用构造函数

作者: 赵者也 | 来源:发表于2017-12-15 10:01 被阅读8次

在解决原型中包含引用类型值所带来问题的过程中,开发人员开始使用一种叫做借用构造函数的技术(有时候也叫做伪构造对象或经典继承)。这种技术的基本思想相当简单,即在子类型构造函数的内部调用父类型的构造函数。别忘了,函数只不过是在特定环境中执行代码的对象,因此通过使用 apply() 和 call() 方法也可以在(将来)新创建的对象上执行构造函数,如下所示:

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

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

上面代码的输出结果如下:

输出结果
  1. 传递参数

相对于原型链,借用构造函数有一个很大的优势,即可以在子类型构造函数中向父类构造函数传递参数:

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

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

输出结果:

输出结果
  1. 借用构造函数的问题

如果仅仅是借用构造函数,那么也将无法避免构造函数模式存在的问题 —— 方法都在构造函数中定义,因此函数复用就无从谈起了。而且,在父类型的原型中定义的方法,对子类型而言也是不可见的,结果所有类型都只能使用构造函数模式。因此,借用构造函数的技术也是很少单独使用的。

相关文章

  • JavaScript的六种继承方式

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

  • JavaScript 继承 2 借用构造函数

    在解决原型中包含引用类型值所带来问题的过程中,开发人员开始使用一种叫做借用构造函数的技术(有时候也叫做伪构造对象或...

  • 继承,命名空间

    继承发展史 1.传统形式-->原型链过多的继承了没用的属性2.借用构造函数不能继承借用构造函数的原型每次构造函数都...

  • javascript基础学习笔记2

    继承发展史 1.传统形式—>原型链过多的继承了没用的属性 2.借用构造函数不能继承借用构造函数的原型每次构造函数都...

  • js继承的多种方式

    《JavaScript高级程序设计》提到了6中继承方式:1.原型链继承2.借用构造函数(经典继承)3.组合继承4....

  • 继承

    传统继承(原型链) 过多的继承了没用的属性 借用构造函数 不能继承借用构造函数的原型每次构造函数都要多走一个函数 ...

  • JavaScript几种继承方式及其优缺点总结

    •借用构造函数 (又叫伪造对象或经典继承)•组合继承(也叫伪经典继承)•寄生组合式继承 ☞借用构造函数继承 原理:...

  • javaScript 实现继承方式

    JavaScript实现继承共6种方式:原型链继承、借用构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合式继承。

  • js中实现继承的方式

    原型继承 借用构造函数继承 组合继承:

  • 前端面试题总结【38】:javascript继承的 6 种方法

    原型链继承 借用构造函数继承 组合继承(原型+借用构造) 原型式继承 寄生式继承 寄生组合式继承 推荐: 持续更新...

网友评论

    本文标题:JavaScript 继承 2 借用构造函数

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