前言
构造函数是JavaScript中生成实例对象的模板,如何实现构造函数的继承,是JavaScript程序员需要掌握的一项十分重要的技能。 本文将介绍如何使用原型对象,实现构造函数的继承。
理论讲解
让一个构造函数继承另一个构造函数,可以分成两步实现。
- 第一步是在子类的构造函数中,调用父类的构造函数。
function Son(value) {
Father.call(this);
this.prop = value;
}
- 第二步,是让子类的原型指向父类的原型,这样子类就可以继承父类原型。
Son.prototype = Object.create(Father.prototype);
Son.prototype.constructor = Son;
Son.prototype.method = '...';
另外一种写法是Son.prototype等于一个父类实例。
Son.prototype = new Father();
实例参考
举例来说,下面是一个Shape构造函数。
function Shape() {
this.x = 0;
this.y = 0;
}
Shape.prototype.move = function (x, y) {
this.x += x;
this.y += y;
console.info('Shape moved.');
};
我们需要让Rectangle构造函数继承Shape。
// 第一步,子类继承父类的实例
function Rectangle() {
Shape.call(this); // 调用父类构造函数
}
// 第二步,子类继承父类的原型
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;
采用这样的写法以后,instanceof运算符会对子类和父类的构造函数,都返回true。
var rect = new Rectangle();
rect instanceof Rectangle // true
rect instanceof Shape // true
上面代码中,子类是整体继承父类。有时只需要单个方法的继承,这时可以采用下面的写法。
ClassB.prototype.print = function() {
ClassA.prototype.print.call(this);
// some code
}
继承数组
如果让构造函数的prototype属性指向一个数组,就意味着实例对象可以调用数组方法。
var MyArray = function () {};
MyArray.prototype = new Array();
MyArray.prototype.constructor = MyArray;
var mine = new MyArray();
mine.push(1, 2, 3);
mine.length // 3
mine instanceof Array // true