Question

在下面的代码中，我试图将getter和setter添加到原型中。

function Car(make, model, year) {
    this.make = make;
    this.model = model;
    this.year = year;
    this.displayCar = displayCar;
}

function displayCar() {
    console.log("A Beautiful " + this.year + " " + this.color + " " + this.make + " " + this.model);
}

var c1 = new Car("Ford", "Mustang", 1969);
var c2 = new Car("Skoda", "Octavia", 1999);

var p = Car.prototype;
Object.defineProperty(p, "color", {
    get: function() {return this.color},
    set: function(c) {this.color = c}
    });

c2.color = "White";

c2.displayCar();

有人可以帮我理解为什么我在第18行收到此错误：

 Uncaught RangeError: Maximum call stack size exceeded

感谢。

Answer 1

我认为你必须为内部属性使用不同的名称（它在我的测试中有用），也许使用_color

Object.defineProperty(p, "color", {
    get: function() {return this._color},
    set: function(c) {this._color = c}
    });

Answer 2

问题出在以下几行：

var p = Car.prototype;
Object.defineProperty(p, "color", {
    set: function(c) {this.color = c} // Setter
});

c2.color = "White";

<强> 说明：

这里发生的是你将c2.color设置为“White”。此触发器是您之前定义的setter。这个setter再次将this.color设置为“White”，再次调用setter。依此类推......直到你超过堆栈大小。

所以，你会陷入无限递归问题。

如何解决

这个问题的一个可能的解决方案是将“color”属性的值存储在另一个属性中，如下所示：

var p = Car.prototype;
Object.defineProperty(p, "color", {
    get: function() {return this.color2},
    set: function(c) {this.color2 = c}
});

c2.color = "White";

c2.color // White!

希望它能帮助你！ ;）

将getters / setter添加到原型中

2 个答案: