關於 js 中 this 的理解

今天在寫乙個tab選項卡切換時遇到乙個 this 的引用問題，做個記錄加深一下理解。

//定時器
var timer = null; 
var lis = document.getelementsbytagname('li'); 
for (var i=0; i//給每個li元素新增自定義屬性id，值為當前li元素在lis中的索引
lis[i].id = i; 
lis[i].onmouseover = function
() timer = settimeout(function
() lis[that.id].classname = 'select'; 
},500)
}}

當然，只為了說明 this 的引用，這只是其中的一部分**。

對於不是很理解 this 的朋友來說，難道不是應該在定時器裡直接用 this 表示當前觸發的元素，用 this.id 獲取開始自定義的屬性值，然後給當前觸發事件的元素新增 class 嗎？為什麼要在 settimeout() 方法外定義乙個 var that = this，然後用 that 代替 this？

對，我當時就是想當然的這樣做的，直接在 settimeout() 方法裡用 this.id 來作為 lis 的索引。但是結果卻是瀏覽器報錯，報錯資訊為『classname 為 undefined』。這是個什麼情況，難道是沒有給每個 li 元素新增上自定義的 id 屬性？經過在 elements 裡檢視，事實是確實每個 li 元素都新增上了 id 屬性並且屬性值也都是正確的。那麼就可以判定是 this 的問題，然後經過打斷點檢視，發現 this 的值為 window。

為什麼 this 的值會是 window呢。經過一番搜素得知 settimeout() 是 window 的乙個方法，由於一般的書寫習慣會將前面 window 省略，其實 settimeout() 也可以寫成 window.settimeout()，類似的還有setinterval() 也是屬於 window 下的方法。

那麼問題就顯而易見，this 的值是 window，肯定引用不了當前觸發事件的 li 元素。那麼應該怎樣在 settimeout() 方法裡引用當前 li 元素呢？

答案就是，在 settimeout() 方法外部、lis[i].onmouseover = function(){} 函式內部申明個變數存貯觸發事件時當前 li 元素，var that = this。因為在 lis[i].onmouseover = function(){} 函式內部 this 肯定指向觸發事件的當前 li 元素。再在 settimeout() 方法內部用 that 代替 this，問題就可以解決了。

func.call(context, arg1, arg2)

它會立即執行函式，第乙個引數是指定執行函式中 this 的上下文，後面是執行函式時需要傳入的引數。

this 就是上面**中的 context，this 就是 call 乙個函式時傳的 context。

它會立即執行函式，第乙個引數是指定函式中 this 的上下文，第二個引數是乙個陣列，是傳給執行函式的引數。（與 call() 的區別）

this 就是上面**中的 context。

其實也可以這樣理解：

①全域性作用域中呼叫：

function
func
()func(); // window

因為 func() 函式是在全域性作用域中呼叫的，所以 this 指向 window。

上面的**也可以等價的變為 call() 形式，如下：

function
func
() func.call(undefined); // 可以簡寫為
func(); // window

結合第一種 call() 情況下來說，func() 列印值應該為 undefined，但是事實卻是 window。是因為瀏覽器裡有一條規則：如果 call() 裡傳入的不是乙個物件，那麼 window 物件就是預設的 context，所以列印值為 window。

② 作為物件的方法呼叫：

var obj = 
}obj.foo(); // 'bob'

這時候 this 指向當前的這個物件（obj）。

如果把物件的方法賦給乙個變數呢：

var obj = 
}var test = obj.foo;
test(); // window

可以看到，這時候 this 指行了全域性，當我們把 var test = obj.foo，test 直接指向了乙個函式的引用，這時候就和 obj 這個物件沒有關係了，所以它被當做普通函式來呼叫。因為 test 是乙個全域性變數，所以 this就指向 window。

本文就是其中的乙個例子。

其他的待更。。。

關於 js 中 this 的理解

關於 JS 中物件和類的理解

關於JS變數的理解

js中的this理解

關於 js 中 this 的理解

關於 JS 中物件和類的理解

關於JS變數的理解

js中的this理解

相關推薦