如何對象的JavaScript數組的實例化過程中引用屬性

Question

我想：

1. 實例化一個JavaScript對象數組，其中對象的屬性指的是物體本身的其他屬性，然後
2. 使用該數組用於配置一組按鈕的點擊事件。

問題（請參見片段上方）：

1. mymessage和myvalue的參數是未定義的時anotherfunction（）被調用
2. 被點擊myclass*類的一個按鈕，當x [I] .myaction（ ）;在按鈕被點擊的時間是不確定的，因爲，我求2

var x = [{ 
 
    mymessage: "this is message1", 
 
    myclass: "myclass1", 
 
    myvalue: 10, 
 
    myaction: function() { 
 
    var res = anotherfunction(mymessage, myvalue); 
 
    //do something with res 
 
    } 
 
}, { 
 
    mymessage: "this is message2", 
 
    myclass: "myclass2", 
 
    myvalue: 20, 
 
    myaction: function() { 
 
    res = anotherfunction(mymessage, myvalue); 
 
    //do something else with res 
 
    } 
 
}]; 
 

 
function anotherfunction(m, v) { 
 
    alert(m); 
 
    return v; 
 
} 
 
for (var i = 0, len = x.length; i < len; i++) { 
 
    $('.' + x[i].myclass).click(function() { 
 
    alert(i); 
 
    x[i].myaction(); 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="myclass1">Click me1</div> 
 
<div class="myclass2">Click me2</div>

Answer 1

對於你其實應該使用this的對象像

myaction: function() { 
    anotherfunction(this.mymessage, this.myvalue); 
    } 

然而，你可重用性的目的應該用適當的上下文來調用它在事件監聽器的回調中如下：

var x = { 
 
    mymessage: "this is a message", 
 
    myclass: "myclass", 
 
    myvalue: 10, 
 
    myaction: function() { 
 
    anotherfunction(this.mymessage, this.myvalue); 
 
    } 
 
}; 
 
function anotherfunction(m, v) { 
 
    alert(m); 
 
} 
 
$('.'+x.myclass).click(function(e){x.myaction()})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="myclass">Click me</div>

所以按照這一問題的修改後的版本，我相信這是一個很好的例子來證明對象的數組中的this的可重用性。您可以安全地執行以下操作;

var x = [{ 
 
    mymessage: "this is message1", 
 
    myclass: "myclass1", 
 
    myvalue: 10, 
 
    myaction: function() { 
 
    var res = anotherfunction(this.mymessage, this.myvalue); 
 
    //do something with res 
 
    } 
 
}, { 
 
    mymessage: "this is message2", 
 
    myclass: "myclass2", 
 
    myvalue: 20, 
 
    myaction: function() { 
 
    res = anotherfunction(this.mymessage, this.myvalue); 
 
    //do something else with res 
 
    } 
 
}]; 
 

 
function anotherfunction(m, v) { 
 
    alert(m); 
 
    return v; 
 
} 
 
for (var i = 0, len = x.length; i < len; i++) { 
 
    (function(j){ 
 
    $('.' + x[j].myclass).click(function(e) { 
 
            alert(j); 
 
            x[j].myaction(); 
 
           }); 
 
    })(i); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="myclass1">Click me1</div> 
 
<div class="myclass2">Click me2</div>

Answer 2

只要將其更改爲以下

var x = { 
 
    mymessage: "this is a message", 
 
    myclass: "myclass", 
 
    myvalue: 10, 
 
    myaction: function() { 
 
    anotherfunction(x.mymessage, x.myvalue); 
 
    } 
 
}; 
 

 
function anotherfunction(m, v) { 
 
    alert(m); 
 
} 
 

 
$('.' + x.myclass).click(x.myaction);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="myclass"> 
 
    hi 
 
</div>

希望它可以幫助

Answer 3

只需使用x.mymessage和x.myvalue

var x = { 
 
    mymessage: "this is a message", 
 
    myclass: "myclass", 
 
    myvalue: 10, 
 
    myaction: function() { 
 
    anotherfunction(x.mymessage, x.myvalue); 
 
    } 
 
}; 
 
function anotherfunction(m, v) { 
 
    alert(m); 
 
} 
 
$('.'+x.myclass).click(x.myaction)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="myclass">Click me</div>