KnockoutJS中「click」處理程序中「this」的值是什麼？

Question

LIVE DEMO

請看下面的例子：

HTML：

<div data-bind="with: job"> 
    <div data-bind="foreach: tasks"> 
    <div> 
     <span data-bind="text: $data"></span> 
     <span data-bind="click: $parent.allDone">(Done)</span> 
    </div> 
    </div> 
</div> 

JS：

ko.applyBindings(function() { 
    this.job = { 
    tasks: ['Buy milk', 'Sleep', 'Work', 'Praise'], 
    allDone: function(data) { 
     console.log(this); 
     console.log(data); 
    } 
    }; 
}); 

你能澄清以下幾點：

1. 爲什麼this在allDone的值不是job？是不是allDone通過$parent調用誰是job？
2. 有沒有辦法在點擊時致電allDone，使得this的值爲job？

3. 的this價值和data看起來相似，但並不完全相同：

   this -> String {0: "S", 1: "l", 2: "e", 3: "e", 4: "p", length: 5}

   data -> Sleep

   的區別是什麼？

Answer 1

1. this在allDone函數的範圍下操作，所以它不會指job。 allDone正在通過$parent調用，在這種情況下是job，但這是數據綁定語法 - 這並不意味着您的this在Javascript中將引用job。

2. 是的，您可以使用將作業的值this設置爲另一個變量。通常的做法是使用var self = this。然後，您可以通過self在子功能的範圍內引用父對象（job）。見fiddle

   var job = function() { 
       var self = this; 
   
       this.tasks = ['Buy milk', 'Sleep', 'Work', 'Praise']; 
       this.allDone = function (data) { 
        console.log(self); // refers to the parent job now 
        console.log(data); // refers to the current item in the data-bound array 
       }; 
   }; 
   
   ko.applyBindings(new job()); 
   

3. 你原來this被處理簡單的字符串作爲new Object(data)。使用你的原代碼， new Object(data) - >String {0: "S", 1: "l", 2: "e", 3: "e", 4: "p", length: 5}

   參考this SO post瞭解更多詳情。另一篇文章是this SO post on Property value of a String object in JavaScript