面向对象（继承）--借用构造函数02

最新推荐文章于 2020-11-13 22:06:32 发布

jiaojsun

最新推荐文章于 2020-11-13 22:06:32 发布

阅读量276

点赞数

CC 4.0 BY-SA版权

分类专栏：面向对象

本文链接：https://blog.youkuaiyun.com/jiaojsun/article/details/82964753

面向对象专栏收录该内容

28 篇文章

订阅专栏

本文探讨了JavaScript中原型链引用类型值带来的问题，并介绍了如何使用借用构造函数技术解决这些问题，确保每个实例都有自己的属性副本，同时支持参数传递。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先回顾一下原型链中引用类型值带来的问题

function SuperType() {
    this.colors = ["red", "blue", "green"];
}
 
function SubType() {}
//继承了 SuperType
SubType.prototype = new SuperType();
var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
var instance2 = new SubType();
alert(instance2.colors); //"red,blue,green,black"

使用借用构造函数可以解决这个问题。

基本思想：即在子类型构造函数的内部调用超类型构造函数。函数只不过是在特定环境中执行代码的对象，因此通过使用 apply()和 call()方法也可以在（将来）新创建的对象上执行构造函数。

function SuperType() {
    this.colors = ["red", "blue", "green"];
}
function SubType() {
    // 继承了 SuperType
    SuperType.call(this);
}
var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
var instance2 = new SubType();
alert(instance2.colors); //"red,blue,green"

代码中加粗的那一行代码“借调”了超类型的构造函数。通过使用 call() 方法（或 apply() 方法也可以），我们实际上是在（未来将要）新创建的 SubType 实例的环境下调用了 SuperType 构造函数。这样一来，就会在新 SubType 对象上执行 SuperType() 函数中定义的所有对象初始化代码。结果，SubType 的每个实例就都会具有自己的 colors 属性的副本了。

1. 传递参数

可以在子类型构造函数中向超类型构造函数传递参数。

function SuperType(name) {
    this.name = name;
}
function SubType() {
    //继承了 SuperType，同时还传递了参数
    SuperType.call(this, "Nicholas");
    //实例属性
    this.age = 29;
}
var instance = new SubType();
alert(instance.name); //"Nicholas";
alert(instance.age); //29

1）以上代码中的 SuperType 只接受一个参数 name ，该参数会直接赋给一个属性。在 SubType 构造函数内部调用 SuperType 构造函数时，实际上是为 SubType 的实例设置了 name 属性。

2）为了确保SuperType 构造函数不会重写子类型的属性，可以在调用超类型构造函数后，再添加应该在子类型中定义的属性。

2. 借用构造函数的问题

借用构造函数的技术也是很少单独使用的。方法都在构造函数中定义，因此函数复用就无从谈起了。而且，在超类型的原型中定义的方法，对子类型而言也是不可见的。