當你將某些東西綁定到超時時，這意味着什麼？

Question

在一個樣品，我有，他們已經模擬一個Ajax調用是這樣的：

route('/page1', 'template1', function() { 
    this.greeting = 'Hello world!'; 
    this.moreText = 'Loading...'; 

    // Simulating an Ajax call which take 0.5 s 
    setTimeout(function() { 
    this.moreText = 'Bacon ipsum...'; 
    }.bind(this), 500); 
}); 

綁定似乎更新「本」，並引發

Object.observe(current.controller, current.render.bind(current)); 

更新一個視圖。

我嘗試與實際AJAX調用執行相同的事情：

route('/products', 'item_tmpl', function(){ 
    this.products = [] 
    $.getJSON('/data/list.json', function(data){ 
     this.products = data; 
     //var dataObject = { products: data }; 
    }).bind(this); 
}) 

但是，返回undefined不是一個函數。

Answer 1

setTimeout存在一個大問題：回調將被調用錯誤的this。不是來自它被調用的函數的this。

從MDN：

當你傳遞一個方法的setTimeout（）（或其它任何功能， 這個問題），它將被用錯了這個值調用。

Read more

所以這個代碼的作者使用bind()：

的bind（）方法創建一個新的功能，調用它時，有其 這個關鍵字設置爲所提供的值

該怎麼解決這個問題。

---

$.getJSON('/data/list.json', function(data){ 
     this.products = data; 
     //var dataObject = { products: data }; 
}).bind(this); 

您正在呼籲的$.getJSON回報bind。

但是，正如你可以在bind參考文件中看到的那樣，它是一個Function方法。 $.getJSON什麼也沒有返回undefined。這就是原因undefined is not a function.

正確的應該是這樣的：

$.getJSON('/data/list.json', function(data){ 
     this.products = data; 
     //var dataObject = { products: data }; 
}.bind(this)); 

Answer 2

您需要在JavaScript中的 「這個」 關鍵詞讀了 -

這裏

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this