了解JavaScript中的原型继承 [英] Understanding prototypal inheritance in JavaScript

问题描述

我是JavaScript OOP的新人。你能否解释下面的代码块的区别。我测试和两个块工作。

I am new to JavaScript OOP. Can you please explain the difference between the following blocks of code. I tested and both blocks work. What's the best practice and why?

第一个块：

function Car(name){
    this.Name = name;
}

Car.prototype.Drive = function(){
    document.write("My name is " + this.Name + " and I'm driving. <br />");
}

SuperCar.prototype = new Car();
SuperCar.prototype.constructor = SuperCar;

function SuperCar(name){
    Car.call(this, name);
}

SuperCar.prototype.Fly = function(){
    document.write("My name is " + this.Name + " and I'm flying! <br />");
}

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(){ 
        document.write("My name is " + this.Name + " and I'm driving. <br />");
    }
}

SuperCar.prototype = new Car();

function SuperCar(name){
    Car.call(this, name);
    this.Fly = function(){
        document.write("My name is " + this.Name + " and I'm flying! <br />");
    }
}

var myCar = new Car("Car");
myCar.Drive();

var mySuperCar = new SuperCar("SuperCar");
mySuperCar.Drive();
mySuperCar.Fly();

为什么作者添加驱动器 code>使用原型的方法，但不声明为 this.Drive $ c>方法中 c> class？

Why did the author add Drive and Fly methods using prototype, but doesn't declare them as this.Drive method inside Car class and this.Fly in SuperCar class?

为什么 SuperCar.prototype.constructor 需要设置为 SuperCar ？当原型设置时，构造函数属性是否被覆盖？

Why does SuperCar.prototype.constructor need to be set back to SuperCar? Is constructor property overridden when prototype is set? I commented out this line and nothing changed.

为什么要调用 Car.call（this，name）; code> SuperCar 构造函数？ Car 的属性和方法在执行时不会继承

Why call Car.call(this, name); in SuperCar constructor? Won't properties and methods of Car be 'inherited' when I do

var myCar = new Car("Car");

推荐答案

示例 Drive（）将只存在一次，而第二种方法 Drive（）将存在每个实例do new Car（）函数 drive（）将被再次创建）。或者不同的说，第一次使用原型来存储函数，第二次使用构造函数。函数的查找是构造函数，然后是原型。因此，对于查找 Drive（），无论是在构造函数中还是在原型中，它都会找到它。使用原型是更有效的，因为通常你每个类型只需要一个函数。

The two blocks differ in a way that in the first example Drive() will only exist once while at the second approach Drive() will exist per instance (Every time you do new Car() the function drive() will be created again). Or different said the first uses the prototype to store the function and the second the constructor. The lookup for functions is constructor and then prototype. So for your lookup of Drive() it finds it regardless if it is in the constructor or in the prototype. Using the prototype is more efficient because usually you need a function only once per type.

在javascript中的 new 自动在原型中设置构造函数。

The new call in javascript automatically sets the constructor in the prototype. If you are overwriting the prototype so you have to set the constructor manually.

javascript中的继承与 super 没有什么不同， 。所以如果你有一个子类，调用超级构造函数的唯一机会是它的名字。

Inheritance in javascript has nothing like super. So if you have a subclass the only chance to call the super constructor is by its name.

这篇关于了解JavaScript中的原型继承的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！