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

更新時間：2013年11月09日 15:15:41 作者：

這篇文章介紹了5分鐘理解JavaScript中this用法，有需要的朋友可以參考一下

前言
關于JavaScript中this的用法網(wǎng)絡中已經(jīng)有較多比較詳盡的介紹，可以參考本文的參考學習資料和網(wǎng)絡。本文結(jié)合網(wǎng)絡收集整理，嘗試以一種簡易的方式闡述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運行的環(huán)境（the context object），或者簡單理解為：this所在函數(shù)被調(diào)用時的當前作用域。
一段實例代碼立刻明白：

復制代碼代碼如下:

var fun = function() { 
    console.log(this); 
} 
fun();// console: window，fun 的執(zhí)行context為window，即this所在函數(shù)（fun()）被調(diào)用時的當前作用域為window。 
new fun();//console: fun，fun 的執(zhí)行context為fun對象內(nèi)，即this所在函數(shù)（fun()）被調(diào)用時的當前作用域為fun對象內(nèi)。 

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

復制代碼代碼如下:

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

點擊這個button之后，你會發(fā)現(xiàn)按鈕的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之后，程序可正常執(zhí)行。
（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> 

得到的輸出是：

復制代碼代碼如下:

function onclick() { 
    demo(); 
}

您可能感興趣的文章:

JavaScript中for..in循環(huán)陷阱介紹
for...in循環(huán)中的循環(huán)計數(shù)器是字符串，而不是數(shù)字它包含當前屬性的名稱或當前數(shù)組元素的索引，下面有個不錯的示例大家可以參考下
2013-11-11
微信小程序監(jiān)聽用戶登錄事件的實現(xiàn)方法
這篇文章主要介紹了微信小程序監(jiān)聽用戶登錄事件的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-11-11
一定有你會用到的JavaScript一行代碼實用技巧總結(jié)
這篇文章主要為大家介紹了一定有你會用到的JavaScript一行代碼總結(jié)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-07-07
JS繪圖Flot如何實現(xiàn)動態(tài)可刷新曲線圖
這篇文章主要介紹了JS繪圖Flot如何實現(xiàn)動態(tài)可刷新曲線圖,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-10-10
8個絕妙的JS字符串處理技巧分享
當處理JavaScript字符串時,有許多有趣的技巧可以提高你的編碼效率,這篇文章將介紹一些有關JavaScript字符串的技巧,讓你在字符串操作方面更加嫻熟
2023-10-10
微信小程序開發(fā)篇之踩坑記錄
這篇文章主要給大家介紹了關于微信小程序開發(fā)篇之踩坑記錄的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-03-03
javascript 實現(xiàn)的類似hao123的多郵箱登錄效果
javascript 實現(xiàn)的類似hao123的多郵箱登錄效果...
2007-08-08
JS交換變量的方法
這篇文章主要介紹了JS交換變量的方法,實例分析了javascript通過自定義函數(shù)實現(xiàn)變量交換的使用技巧,需要的朋友可以參考下
2015-01-01
yepnope.js 異步加載資源文件
yepnope.js是一個能夠根據(jù)輸入條件來選擇性異步加載資源文件的js腳本，可以在頁面上僅加載用戶需要的js/css。
2011-09-09
js實現(xiàn)同一頁面可多次調(diào)用的圖片幻燈切換效果
這篇文章主要介紹了js實現(xiàn)同一頁面可多次調(diào)用的圖片幻燈切換效果,可實現(xiàn)在同一頁面中多次調(diào)用幻燈切換效果,非常具有實用價值,需要的朋友可以參考下
2015-02-02