DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> Javascript對象中關於setTimeout和setInterval的this介紹
Javascript對象中關於setTimeout和setInterval的this介紹
編輯:關於JavaScript     
在Javascript裡,setTimeout和setInterval接收第一個參數是一個字符串或者一個函數,當在一個對象裡面用setTimeout延時調用該對象的方法時
復制代碼 代碼如下:
function obj() {
this.fn = function() {
alert("ok");
console.log(this);
setTimeout(this.fn, 1000);//直接使用this引用當前對象
}
}
var o = new obj();
o.fn();

然後我們發現上面的代碼不是想要的結果,原因是setTimeout裡面的this是指向window,所以要調用的函數變成 window.fn 為undefined,於是悲劇了。所以問題的關鍵在於得到當前對象的引用,於是有以下三種方法
復制代碼 代碼如下:
// 方法一:

function obj() {
this.fn = function() {
alert("ok");
console.log(this);
setTimeout(this.fn.bind(this), 1000);//通過Function.prototype.bind 綁定當前對象
}
}
var o = new obj();
o.fn();

這樣可以得到正確的結果,可惜Function.prototype.bind方法是ES5新增的標准,測試了IE系列發現IE6-8都不支持,只有IE9+可以使用。要想兼容就得簡單的模擬下bind,看下面的代碼
復制代碼 代碼如下:
// 方法二:
function obj() {
this.fn = function() {
alert("ok");
setTimeout((function(a,b){
return function(){
b.call(a);
}
})(this,this.fn), 1000);//模擬Function.prototype.bind
}
}
var o = new obj();
o.fn();

首先通過一個自執行匿名函數傳當前對象和對象方法進去,也就是裡面的參數a和b,再返回一個閉包,通過call方法使this指向正確。下面是比較簡潔的方法
復制代碼 代碼如下:
// 方法三:
function obj() {
this.fn = function() {
var that = this;//保存當前對象this
alert("ok");
setTimeout(function(){
that.fn();
}, 1000);//通過閉包得到當前作用域,好訪問保存好的對象that
}
}
var o = new obj();
o.fn();

上面第三個方法的兩個關鍵點是 保存當前對象this為別名that 和 通過閉包得到當前作用域,以訪問保存好的對象that;當對象方法裡面多層嵌套函數或者setTimeout,setInterval等方法丟失this(也就是this不指向當前對象而是window),所以在this指向正確的作用域保存var that = this就變得很實用了
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved