我们让 Circle
继承 Shape
,并让 Circle
拥有自己独特的 duplicate
方法:
// 传入两个构造函数,实现继承
function extend(Child, Parent) {
Child.prototype = Object.create(Parent.prototype);
Child.prototype.construcor = Child;
};
// 父类
function Shape(color) {};
// 父类方法
Shape.prototype.duplicate = function() {
console.log('duplicate')
};
// 子类
function Circle(color, radius) {};
// Circle 继承 Shape
extend(Circle, Shape)
// 重新定义父类的 duplicate 方法
// 重新定义要在继承之后
Circle.prototype.duplicate = function() {
console.log('circle duplicate')
};
const c = new Circle('red', 1)
测试:
c.duplicate()
// circle duplicate
为什么可以这样修改是可以生效的呢?因为当我们访问对象成员时。Javascript 编译器会沿着继承路径向上查找。
本例中,我们执行 c.duplicate()
时,编译器先查找 Circle.prototype
中的 duplicate
方法,能找得到这个方法就执行。否则再查找 Shape.prototype
里面的方法。
如果我们想直接调用父类的方法,也是可行的:
// 传入两个构造函数,实现继承
function extend(Child, Parent) {
Child.prototype = Object.create(Parent.prototype);
Child.prototype.construcor = Child;
}
// 父类
function Shape(color) {};
// 父类方法
Shape.prototype.duplicate = function() {
console.log('duplicate')
};
// 子类
function Circle(color, radius) {};
// Circle 继承 Shape
extend(Circle, Shape)
// 重新定义父类的 duplicate 方法
Circle.prototype.duplicate = function() {
// 直接调用父类方法
Shape.prototype.duplicate();
console.log('circle duplicate')
};
const c = new Circle('red', 1)
测试:
c.duplicate()
// duplicate
// circle duplicate
网友评论