如何在對象中執行函數和引用變量

Question

我想更好地理解對象字面量，並將其卡在這個特定的部分。

我這裏有一個完全工作的例子 - https://jsfiddle.net/breezy/dqjpkus4/

我想整個對象使用的設置，但控制檯說我的項目是不確定的。但是，我想將其轉換爲對象。你可以在這裏看到我的工作進展，並在錯誤正在發生 - http://codepen.io/BryanBarrera/pen/OXZvgR

我的問題是我怎麼可以訪問此部分：

boxes: $('.boxes'), 
container: $('.container'), 

從裏面我的功能呢？

showMore: function() { 

}, 

showLess: function() { 

}, 

我想要做的另一個例子 - 下面是我被卡住的小提琴。 https://jsfiddle.net/breezy/86Lryrep/

init部分工作正常，但是當我嘗試在點擊時執行該功能時，它給了我一個錯誤。的this

"use strict"; 

var object = { 
    container: $('.container'), 
    item: $('div'), 
    textToAlert: 'Working', 

    init: function() { 


    console.log(this.textToAlert); 
    }, 

    firstFunction: function() { 
    // here i should be able to use container and item 
    // but when i use my click event it doesn't work. 
    console.log(this.item.length); 
    }, 

    secondFunction: function() { 
    // here i should be able to use container and item 
    } 
} 



object.init(); 

$('button').on('click', object.firstFunction); 

Answer 1

值由功能是如何被調用來確定。

在你的榜樣，this指DOMElement因爲在eventhandler-function，this是Element在其上調用的事件！

使用Function#bind，

的bind（）方法創建一個新的功能，調用它時，具有其將此關鍵字設置爲所提供的值，與設置的前述任何參數給定的序列，當新函數被調用。

var object = { 
 
    container: $('.container'), 
 
    item: $('div'), 
 
    textToAlert: 'Working', 
 
    init: function() { 
 
    console.log(this.textToAlert); 
 
    }, 
 
    firstFunction: function() { 
 
    console.log(this.item.length); 
 
    }, 
 
    secondFunction: function() {} 
 
} 
 

 
object.init(); 
 
$('button').on('click', object.firstFunction.bind(object));

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