【问题标题】:prototype object inheritance原型对象继承
【发布时间】:2012-06-09 14:48:03
【问题描述】:

我是Codeyear 同胞,不幸的是没有解释原型对象的概念。我在谷歌上搜索并找到了tutorial。经过学习,我的理解是我们使用原型对象继承来节省内存并在对象之间共享公共属性。 我说的对吗?如果是,你不认为下面的代码是 不好的做法。由于汽车构造函数已经定义了价格、速度和 & getPrice,为什么我们需要再次定义相同的东西,因为我们使用了继承的概念。请解释 。下面是代码。

function Car( listedPrice ) {
    var price = listedPrice;
    this.speed = 0;

    this.getPrice = function() {
        return price;
    };
}

Car.prototype.accelerate = function() {
    this.speed += 10;
};

function ElectricCar( listedPrice ) {
    var price = listedPrice;
    this.speed = 0;

    this.getPrice = function() {
        return price;
    };
}

ElectricCar.prototype = new Car(); // Please also explain why car constructor 
                                   // is not thowing error since we are not passing
                                   // listedPrice parameter

myElectricCar = new ElectricCar(500);

console.log(myElectricCar instanceof Car);

【问题讨论】:

标签: javascript oop inheritance prototype


【解决方案1】:

构造函数和原型是两个独立的概念。当您使用ElectricCar.prototype = new Car(); 应用原型继承时,它仅继承对象及其原型上定义的方法,而不是构造函数本身。

您实际上可以通过一些快速的console.log() 调用看到它的工作方式:

console.log(ElectricCar);
console.log(ElectricCar.prototype);
console.log(ElectricCar.prototype.__proto__);

这会返回:

[Function: ElectricCar]
{ speed: 0, getPrice: [Function] }
{ accelerate: [Function] }

第一行是构造函数。

第二个是实际原型,由上面的ElectricCar.prototype = new Car(); 设置。请记住,在Car 的构造函数中,设置了this.speedthis.getPrice,这就解释了ElectricCar.prototype.speedElectricCar.prototype.getPrice 的值。

也许最不清楚的是最后一行,ElectricCar.prototype.__proto__。这是原型的原型。 Car 对象有一个 prototype 对象,其中定义了 accelerate。这个原型被复制到ElectricCar 内部__proto__ 属性中的原型。这称为prototype chaining

因为构造函数不是原型的一部分,而原型是您继承的全部,所以 Car 的构造函数已被复制并粘贴到 ElectricCar 中。正如您所指出的,肯定有更清洁的方法可以做到这一点。这是另一种选择:

function ElectricCar( listedPrice ) {
    Car.apply(this, arguments);
}

ElectricCar.prototype = new Car();

更多详情请见apply

至于你的最后一个问题(为什么new Car() 不抛出错误),正如其他答案所说,这就是 JavaScript 的工作原理。如果您为函数提供的参数少于它的参数,则任何未设置(可以这么说)的参数都将设置为undefined。演示:

function returnMe(a) {
    return a;
}

console.log(returnMe(5));
console.log(returnMe(2+2));
console.log(returnMe());
console.log(returnMe(undefined));

这将返回:

5
4
undefined
undefined

如您所见,undefined 实际上是一个可以传递的变量(如returnMe(undefined))。有关更多信息,请参阅undefined

【讨论】:

    【解决方案2】:

    getPrice 是在其外部范围内对price var 创建闭包的方式,有效地使price 成为私有成员,为每个不同的实例分开,只有这个函数可以曾经有机会访问。

    构造函数不会抛出错误,因为在 JavaScript 中向函数提供参数从来都不是强制性的。您可以根据需要提供尽可能多的参数,只要有命名参数,首先从您提供的列表中分配给该名称。

    【讨论】:

      猜你喜欢
      • 2022-07-27
      • 2012-06-19
      • 1970-01-01
      • 1970-01-01
      • 2014-11-26
      • 2012-07-14
      • 1970-01-01
      • 1970-01-01
      • 2017-07-06
      相关资源
      最近更新 更多