对象属性的Javascript范围答案

【问题标题】：Javascript scope of object property对象属性的Javascript范围
【发布时间】：2014-08-18 02:07:38
【问题描述】：

假设我想为页面中的框创建一个 Javascript 类。当创建该类的对象时，我想向它添加一个单击事件，这将需要我访问它的一个或多个独特属性。我该怎么做？这是一个例子：

function Box(boxClassName, originalColor, changeColor){

this.boxClassName = boxClassName;
this.originalColor = originalColor;
this.changeColor = changeColor;

this.initialize = function (){

    var html = '<div class="' + this.boxClassName + '></div>';

    $(document).append(html);
    $(this.boxClassName).css("background-color", originalColor);

    // Toggle box color on click
    $(this.boxClassName).click(function (){
        // this.boxClassName is undefined here, none of this works

        if ($("." + this.boxClassName).css("background-color") == originalColor) {
            $("." + this.boxClassName).css("background-color", this.changeColor);
        } else {
            $("." + this.boxClassName).css("background-color", this.originalColor);
        }
    });
};

this.initialize();

}

【问题讨论】：

不清楚。尤其是“这需要我访问它的一个或多个独特属性”。
JavaScript 没有有类。

标签： javascript jquery class object

【解决方案1】：

有两种方式：

1) 在变量中保留对 this 的引用并使用它：

// Toggle box color on click
var self = this;
$(this.boxClassName).click(function () {
    if ($("." + self.boxClassName).css("background-color") == originalColor) {
        $("." + self.boxClassName).css("background-color", self.changeColor);
    } else {
        $("." + self.boxClassName).css("background-color", self.originalColor);
    }
});

2) 或者将点击回调绑定到Box

$(this.boxClassName).click(function () {
    if ($("." + this.boxClassName).css("background-color") == originalColor) {
        $("." + this.boxClassName).css("background-color", this.changeColor);
    } else {
        $("." + this.boxClassName).css("background-color", this.originalColor);
    }
}.bind(this));

【讨论】：

【解决方案2】：

您不能在 onclick 事件中访问 Box 的属性。如果你想存储html元素的数据，你必须使用http://api.jquery.com/jquery.data/。顺便说一句，下面的代码可能对你有用。

if ($(this).css("background-color") == originalColor) {
    $(this).css("background-color", this.changeColor);
} else {
    $(this).css("background-color", this.originalColor);
}

【讨论】：

【解决方案3】：

首先，你可以通过bind函数得到正确的this

$(this.boxClassName).click(function (){
    // this.boxClassName is now defined here

    if ($("." + this.boxClassName).css("background-color") == originalColor) {
        $("." + this.boxClassName).css("background-color", this.changeColor);
    } else {
        $("." + this.boxClassName).css("background-color", this.originalColor);
    }
}.bind(this));

也可以考虑使用稍微不同的方法

function Box(boxClassName, originalColor, changeColor) {

    var changedBg = false, div = $('<div />'), handler = function ( e ) {
      $(this).css('background-color', changedBg ? originalColor : changeColor)
      changedBg = !changedBg
    }

    div.addClass(boxClassName)on('click', handler).appendTo(document)    
}

【讨论】：