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

javascript object - why undefined properties?

本文关键字:属性 未定义 为什么 对象 JavaScript      更新时间:2023-09-26

为什么这段代码会为setMediumsetLarge生成一个未定义的代码?我希望这些看起来像与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);

你的初始化语句是这样的:

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);
};

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

如果要使用静态参数调用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);

因为setBoxDimensions不返回值。此外,setBoxDimension 的上下文是全局对象。

我认为

您要实现的称为部分函数应用程序,它基本上是从现有函数创建一个派生函数,但将使用预定义的参数调用。

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