理解JavaScript中的原型继承

12 浏览
0 Comments

理解JavaScript中的原型继承

我对JavaScript面向对象编程(OOP)还不太了解。你能解释一下下面这两段代码的区别吗？我测试了一下，这两段代码都可以运行。哪种是最佳实践，为什么呢？

第一段代码：

function Car(name){
    this.Name = name;
}
Car.prototype.Drive = function(){
    console.log("My name is " + this.Name + " and I'm driving.");
}
SuperCar.prototype = new Car();
SuperCar.prototype.constructor = SuperCar;
function SuperCar(name){
    Car.call(this, name);
}
SuperCar.prototype.Fly = function(){
    console.log("My name is " + this.Name + " and I'm flying!");
}
var myCar = new Car("Car");
myCar.Drive();
var mySuperCar = new SuperCar("SuperCar");
mySuperCar.Drive();
mySuperCar.Fly();

第二段代码：

function Car(name){
    this.Name = name;
    this.Drive = function(){ 
        console.log("My name is " + this.Name + " and I'm driving.");
    }
}
SuperCar.prototype = new Car();
function SuperCar(name){
    Car.call(this, name);
    this.Fly = function(){
        console.log("My name is " + this.Name + " and I'm flying!");
    }
}
var myCar = new Car("Car");
myCar.Drive();
var mySuperCar = new SuperCar("SuperCar");
mySuperCar.Drive();
mySuperCar.Fly();

为什么使用`prototype`添加了`Drive`和`Fly`方法，而没有将它们声明为`Car`类中的`this.Drive`方法和`SuperCar`类中的`this.Fly`方法？

为什么`SuperCar.prototype.constructor`需要重新设置为`SuperCar`？当设置了`prototype`时，`constructor`属性是否会被覆盖？我注释掉了这行代码，但没有发生任何变化。

为什么在`SuperCar`构造函数中调用了`Car.call(this, name);`？当我使用`var myCar = new Car("Car");`时，`Car`的属性和方法不会被“继承”吗？

0