继续上一篇,在 上一篇的基础上我们在 Shape
类新增一个 color
属性:
// 父类
function Shape(color) {
this.color = color;
};
// 父类方法
Shape.prototype.duplicate = function() {
console.log('duplicate');
};
// 子类
function Circle(color, radius) {
Shape(color);
this.radius = radius;
};
// Circle 继承 Shape
Circle.prototype = Object.create(Shape.prototype);
// 修正构造函数
Circle.prototype.construcor = Circle;
// 子类的方法
Circle.prototype.draw = function() {
console.log('draw');
};
但现在构造函数 Circle()
生成的实例依然是没有 color
这一属性的,即使我们在构造函数 Circle()
中调用了 Shape()
函数。
let c = new Circle('red', 1);
c
// Circle {radius: 1}
而且还产生了一个诡异的情况,我们把 color
属性绑定到了全集变量 window
上面去了:
window.color
// "red"
为什么会这样呢,这要从我们使用 new
关键字创建新对象说起。
这在里,调用 new
的时候总共发生3件事:
-
new
操作符创建一个空对象 -
让
this
对象指向这个空对象 -
把属性(比如这里的
radius
)绑定到新对象上
如果不使用 new
关键字,this
就会默认指向全局对象,也就是浏览器中的 window
或 node 中的 global
。
要做子类中调用父类的构造器我们使用 call
方法:
// 父类
function Shape(color) {
this.color = color;
};
// 父类方法
Shape.prototype.duplicate = function() {
console.log('duplicate')
};
// 子类
function Circle(color, radius) {
Shape.call(this, color);
this.radius = radius;
};
// Circle 继承 Shape
Circle.prototype = Object.create(Shape.prototype);
// 修正构造函数
Circle.prototype.construcor = Circle;
// 子类的方法
Circle.prototype.draw = function() {
console.log('draw');
};
let c = new Circle('red', 1);
测试:
c
// Circle {color: "red", radius: 1}
网友评论