來自javascript忍者書籍祕密的例子

開始閱讀javascript忍者書，我真的不明白爲什麼在這個例子中需要'this'這個詞。我嘗試了它，並且代碼不運行。「這」在下文中有什麼用途？我想我理解'這個'（或者根本不是），但在下面，我只是不明白。請讓我知道！謝謝。來自javascript忍者書籍祕密的例子

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<script type="text/javascript"> 
(function() { 
    var results; 
    this.assert = function assert(value,desc) { 
     var li = document.createElement("li"); 
     li.className = value ? "pass" : "fail"; 
     li.appendChild(document.createTextNode(desc)); 
     results.appendChild(li); 
     if (!value) { 
      li.parentNode.parentNode.className = "fail"; 
     } 
     return li; 
    }; 

    //this.test = function test(name, fn) { 
    this.test = function test(name, fn) { 
     results = document.getElementById("results"); 
     results = assert(true,  name).appendChild(document.createElement("ul")); 
     fn(); 
    }; 
})(); 

window.onload = function() { 
    test("A test", function() { 
     assert(true, "First assertion completed"); 
     assert(true, "Second assertion completed"); 
     assert(true, "Third assertion completed"); 

    }); 

    test("Another stupid test", function() { 

     assert(true, "First assertion completed"); 
     assert(true, "Second assertion completed"); 
     assert(true, "Third assertion completed"); 

    }); 
    test("A third test", function() { 
     assert(null, "fail"); 
     assert(5, "pass") 

    }); 

}; 
</script> 
<style type="text/css"> 
    #results li.pass { color: green;} 
    #results li.fail { color: red;} 

</style> 
</head> 
<body> 
<ul id="results"</ul> 
</body> 
</html>

來源

2015-07-01 user3502374

代碼正在利用的事實，代碼，是不是在「嚴格」的模式將設置this向全局上下文（window）當一個函數被沒有任何上下文中調用的參考優勢。因此，在第一個函數中，this是window，並且「測試」和「斷言」符號被綁定爲全局變量。

就我個人而言，我認爲這是一個有問題的代碼塊用於教學目的。我認爲它會更好（更清晰）來編寫，最初的功能是這樣的：

(function(global) { 
    var results; 
    global.assert = function assert(value,desc) { 
     var li = document.createElement("li"); 
     li.className = value ? "pass" : "fail"; 
     li.appendChild(document.createTextNode(desc)); 
     results.appendChild(li); 
     if (!value) { 
      li.parentNode.parentNode.className = "fail"; 
     } 
     return li; 
    }; 

    //this.test = function test(name, fn) { 
    global.test = function test(name, fn) { 
     results = document.getElementById("results"); 
     results = assert(true,  name).appendChild(document.createElement("ul")); 
     fn(); 
    }; 
})(this);

上面的代碼將在「嚴格」模式下正常工作，而且是更加明確約束力的全球性的符號。

來源

2015-07-01 13:06:38 Pointy

我很欣賞這兩篇評論，並且在閱讀完本文後更加全面地結合w /方向之後，我想我明白了。我希望我能接受這兩種方式，但是這個方面有更多的總體方向，所以我接受了這個答案。不過謝謝你們！ – user3502374

爲了更好地瞭解如何this作品，看看來自此相關的問題的答案：

How does the "this" keyword work?

這應該教給你所有你需要知道的（多）在JavaScript中約this。

來源

2015-07-01 13:07:11

感謝您的留言。它肯定幫助我進入了正確的方向，然後我在「你不知道JS」中讀到了「this」，這讓我很清楚，這幫助我理解了第一人稱的帖子。非常感謝你，但我會首先接受我接受的答案，因爲它有更全面的方向，但你的帖子肯定幫助了我，所以我非常感謝你！ – user3502374

來自javascript忍者書籍祕密的例子

回答

相關問題