不了解Javascript继承

时间:2016-08-14 07:13:20

标签: javascript inheritance

我正在学习javascript继承。我在这里找到了一个很好的解释 JavaScript Inheritance

function A() {
    B.call(this);
}

function B() {
    C.call(this);
    this.bbb = function() {
        console.log("i was inherited from b!");
    }
}

我正在尝试基于上面的解决方案和其他解决方案实现继承(在网上有很多这些解决方案,它们似乎都提出了不同的建议)。无论如何,我想让SportsCar继承Car并使用Car的describeSelf方法。我不确定我做错了什么。 PLUNK for convenience

var Car = function(make, topSpeed, color){
    this.make = make;
    this.topSpeed = topSpeed;
    this.color = color;
}

Car.prototype.describeSelf = function(){
    document.write('Hi, I am a: ' + this.make + ', my top speed is ' + this.topSpeed + ' and I am ' + this.color);
}

var corolla = new Car('toyota', 120, 'blue');

corolla.describeSelf();

//Code works fine up to here
var SportsCar = function(engineSize, make, topSpeed, color) {
    Car.call(this, make, topSpeed, color); 
    this.engineSize = engineSize;
};

var fordGt = new SportsCar('V8', 'ford', 205 , 'red');

fordGt.describeSelf();

我真的不明白call的作用。

编辑:看起来我不是很清楚我在问什么。问题的实质是使这一行有效:fordGt.describeSelf();并解释我目前的错误。

2 个答案:

答案 0 :(得分:1)

添加评论为add this的行。

var Car = function(make, topSpeed, color){
  this.make = make;
  this.topSpeed = topSpeed;
  this.color = color; 
}

Car.prototype.describeSelf = function(){
  document.write('Hi, I am a: ' + this.make + ', my top speed is ' +      this.topSpeed + ' and I am ' + this.color);
}

var corolla = new Car('toyota', 120, 'blue');

corolla.describeSelf();

//Code works fine up to here
var SportsCar = function(engineSize, make, topSpeed, color) {
  Car.call(this, make, topSpeed, color); 
  this.engineSize = engineSize;
};

// add this
SportsCar.prototype = Object.create( Car.prototype );

var fordGt = new SportsCar('V8', 'ford', 205 , 'red');

fordGt.describeSelf();

这是因为你真的希望正确设置原型链,以便新创建的对象在链中具有其父原型。

另一方面,如果您将方法附加到对象本身

var Car = function(make, topSpeed, color){
  this.make = make;
  this.topSpeed = topSpeed;
  this.color = color; 
  this.describeSelf = function() ...
}

链可以被忽略(因为你已经从另一个构造函数中调用了构造函数,但是你最终会将多个相同函数的实例附加到新创建的实例上。

答案 1 :(得分:0)

您可以继续这样

  this.make = make;
  this.topSpeed = topSpeed;
  this.color = color;

  this.engineSize = engineSize;

,而不是使用call方法。但是也许有时候会有很多争论,而您不会重复自己。调用方法在做什么:

它运行代码在Car构造函数内部,就像代码是在sportCar构造函数中编写的一样。这是通过.call()方法中的“ this”参数完成的。

不过,在ES6进行继承的方式中,必须通过super()方法来完成相同的事情。