5分鐘理解JavaScript中this用法分享

2019-11-20 21:45:00

字體：大中小

來源：轉載

供稿：網友

前言
關于JavaScript中this的用法網絡中已經有較多比較詳盡的介紹，可以參考本文的參考學習資料和網絡。本文結合網絡收集整理，嘗試以一種簡易的方式闡述JavaScript中this的用法，希望對大家關于JavaScript中this用法的快速理解有所幫助。
正文
1. this用法實例

復制代碼代碼如下:

window.color = “red”; 
var o = { color: “blue” }; 
function sayColor(){ 
    alert(this.color); 
} 
sayColor(); //”red” 
o.sayColor = sayColor; 
o.sayColor(); //”blue” 

2. this用法簡易理解
this指向哪里：
this運行的環境（the context object），或者簡單理解為：this所在函數被調用時的當前作用域。
一段實例代碼立刻明白：

復制代碼代碼如下:

var fun = function() { 
    console.log(this); 
} 
fun();// console: window，fun 的執行context為window，即this所在函數（fun()）被調用時的當前作用域為window。 
new fun();//console: fun，fun 的執行context為fun對象內，即this所在函數（fun()）被調用時的當前作用域為fun對象內。 

3. this用法的一個特殊情況
（1）情況：

復制代碼代碼如下:

<input type="button" id="aButton" value="demo" onclick="demo()" /> 
<script type="text/javascript"> 
function demo() { 
    this.value = Math.random(); 
} 
</script>

點擊這個button之后，你會發現按鈕的value值沒有改變。
原因：在本代碼運行的情況下this指向的是window對象。

復制代碼代碼如下:

<input type="button" id="aButton" value="demo" /> 
<script type="text/javascript"> 
var button = document.getElementById("aButton"); 
function demo() { 
    this.value = Math.random(); 
} 
button.onclick= demo; 
</script> 

點擊這個button之后，程序可正常執行。
（2）原因解釋：

復制代碼代碼如下:

<input type="button" id="aButton" value="demo" /> 
<script type="text/javascript"> 
var button = document.getElementById("aButton"); 
function demo() { 
    this.value = Math.random(); 
} 
button.onclick= demo; 
alert(button.onclick); 
</script> 

得到的輸出是：

復制代碼代碼如下:

function demo() {
this.value = Math.random();
}

復制代碼代碼如下:

<input type="button" id="aButton" value="demo" onclick="demo()" /> 
<script type="text/javascript"> 
var button = document.getElementById("aButton"); 
function demo() { 
    this.value = Math.random(); 
} 
alert(button.onclick); 
</script> 

得到的輸出是：

復制代碼代碼如下: