5分鐘理解JavaScript中this用法分享_javascript技巧

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

複製代碼 代碼如下:

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

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

複製程式碼 程式碼如下:

程式碼如下:


var f 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）情況：

複製代碼

程式碼如下:

    this.value = Math.random();
}

點擊這個button之後，你會發現按鈕的value值沒有改變。 原因：在本程式碼執行的情況下this指向的是window物件。

複製程式碼

代碼如下:

}
button.onclick= demo;

點選這個button之後，程式可以正常執行。 （2）原因解釋：

複製程式碼

程式碼如下:



程式碼如下:

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

button.onclick= demo; alert(button.onclick); alert(button.onclick);

得到的輸出是：

複製程式碼

程式碼如下:f ) {     this.value = Math.random(); }

複製程式碼


程式碼如下:

得到🎜>得到的輸出是：

複製程式碼

程式碼如下:function onclick() { demo(); }