Question

为什么此代码会为setMedium和setLarge生成未定义的内容？我希望这些看起来像setSmall的类似方法。我该怎么做才能正确地将它们定义为方法？

function Box() {
    this.length = 14;
    this.width = 10;
    this.height = 6;
    this.setSmall = function (){
        this.length = 14;
        this.width = 10;
        this.height = 6;
    }
    this.setMedium = setBoxDimensions(16,14,6);
    this.setLarge = setBoxDimensions(24,14,6);
    this.initBoxDimensions = this.setSmall;

    function setBoxDimensions(length, width, height){
        this.length = length;
        this.width = width;
        this.height = height;
    }
}
var newBox = new Box();
newBox.setSmall();
console.log(newBox);

Answer 1

你的初始化语句如下：

this.setMedium = setBoxDimensions(16,14,6);

调用函数“setBoxDimensions”。如果你想让“setMedium”调用带有特定参数的“setBoxDimensions”，你需要让它成为一个函数：

this.setMedium = function() {
    this.setBoxDimensions(16,14,6);
}.bind(this);

每当你提到一个函数并通过带括号的参数列表来跟随它时，你就会在那里进行函数调用。

上面使用的.bind()函数安排在匿名包装函数中正确设置this。在旧版浏览器中可以使用的替代方法是：

var that = this;
this.setMedium = function() {
    that.setBoxDimensions(16, 14, 6);
};

Answer 2

首先，您需要为对象分配一个函数。现在你正在调用一个函数，而不是分配它。

如果要使用静态参数调用setBoxDimensions，则为this.setMedium/Large分配一个匿名函数，然后调用setBoxDimensions。

但似乎您也不希望setBoxDimensions被曝光。在这种情况下，您需要通过.call()方法调用它，这样您就可以设置其this值。

function Box() {

    // use the setBoxDimensions since we have it.
    this.setSmall = function (){
        setBoxDimensions.call(this, 14,10,6);
    }

    this.setSmall(); // to initialize instead of repeating the code above

    // assign anonymous functions that invoke `setBoxDimensions`
    this.setMedium = function() {
        // call setBoxDimensions, and set its `this` to the current `this`
        setBoxDimensions.call(this, 16,14,6); 
    }
    this.setLarge = function() {
        // call setBoxDimensions, and set its `this` to the current `this`
        setBoxDimensions.call(this, 24,14,6);
    }

    this.initBoxDimensions = this.setSmall;

    function setBoxDimensions(length, width, height){
        this.length = length;
        this.width = width;
        this.height = height;
    }
}
var newBox = new Box();
newBox.setSmall();
console.log(newBox);

如果您希望setBoxDimensions成为公开曝光的方法，则可以在this上进行设置。此外，在这里利用原型继承可能是一个好主意。：

function Box() {
    this.setSmall();
}

Box.prototype.setSmall = function (){
    this.setBoxDimensions(14,10,6);
}
Box.prototype.setMedium = function() {
    this.setBoxDimensions(16,14,6); 
}
Box.prototype.setLarge = function() {
    this.setBoxDimensions(24,14,6);
}

Box.prototype.initBoxDimensions = Box.prototype.setSmall;

Box.prototype.setBoxDimensions = function(length, width, height){
    this.length = length;
    this.width = width;
    this.height = height;
}

var newBox = new Box();
newBox.setSmall();
console.log(newBox);

Answer 3

因为setBoxDimensions没有返回值。此外，setBoxDimension的上下文是全局对象。

Answer 4

我认为你想要实现的是部分函数应用程序，它基本上是从现有函数创建派生函数，但是将使用预定义参数调用它。

this.setMedium = setBoxDimensions.bind(this, 16,14,6);
this.setLarge = setBoxDimensions.bind(this, 24,14,6);

javascript对象 - 为什么未定义的属性？

4 个答案: