JavaScript学习笔记(三十三) 经典模式三借用构造方式并设置原型

最新推荐文章于 2024-03-16 10:14:30 发布

无心咸鱼

最新推荐文章于 2024-03-16 10:14:30 发布

阅读量1.1k

点赞数 1

分类专栏： JavaScript

JavaScript 专栏收录该内容

44 篇文章

订阅专栏

本文介绍了一种JavaScript继承模式——经典模式三，通过借用父类构造函数并在子类原型上设置父类实例，实现属性和方法的有效继承。这种方式接近于Java中的继承行为，确保了方法的正确继承，但同时也带来了父类构造函数被多次调用的效率问题。

经典模式三借用构造方便并设置原型(Classical Pattern #3—Rent and Set Prototype)

组合前面两种模式，你首先借用parent构造方法，然后设置child的原型指向parent构造函数的新实例：

function Child(a, c, b, d) {
    Parent.apply(this, arguments);
}
Child.prototype = new Parent();

这样做的好处就是结果对象(result objects)获得了parent的自身属性的拷贝和parent复用函数的引用(原型的成员)。Child也可以传递任何参数给parent构造函数。

这种行为可能你和你在Java中期望的接近，你继承了在parent中的所有东西(everything)，并且同时修改自身属性是安全的，没有修改parent的风险。

一个缺点就是parent构造函数被调用两次，所以它可能是低效的。最终，自身属性(比如在我们例子中的name)被继承两次。

让我们看一下下面的代码并做一些测试：

// the parent constructor
function Parent(name) {
    this.name = name || 'Adam';
}
// adding functionality to the prototype
Parent.prototype.say = function () {
    return this.name;
};
// child constructor
function Child(name) {
    Parent.apply(this, arguments);
}
Child.prototype = new Parent();
var kid = new Child("Patrick");
kid.name; // "Patrick"
kid.say(); // "Patrick"
delete kid.name;
kid.say(); // "Adam"

不像前面的模式，现在say()方法被正确继承。你也注意到name属性被继承了两次，并且在delete了自身的拷贝后，从原型链式而来的name属性会被宠幸。

图6-6展示了两个对象之间工作的关系，这种关系和在图6-3中展示的关系相似，但我们得到的方式不同：