改變javascript函數(shù)內(nèi)部this指針指向的三種方法
更新時(shí)間：2010年04月23日 19:06:55 作者：
javascript 的this 值，真的是非常的莫名奇妙。我一直被搞的很頭暈，也許正是這個(gè)this，讓大多數(shù)人感覺(jué)js 非常的莫名其妙。
在查了大量的資料后，我總結(jié)了下面的三條規(guī)則，這三條規(guī)則，已經(jīng)可以解決目前我所遇到的所有問(wèn)題.
規(guī)則0：函數(shù)本身是一個(gè)特殊類型，大多數(shù)時(shí)候，可以認(rèn)為是一個(gè)變量。
function a()
{
alert(this);
}
或者
var a = function()
{
alert(this);
}
都可以認(rèn)為是創(chuàng)建了一個(gè)變量，這個(gè)變量的值就是一個(gè)函數(shù)。
規(guī)則1：如果一個(gè)函數(shù)，是某個(gè)對(duì)象的key 值，那么，this就指向這個(gè)對(duì)象。
這個(gè)規(guī)則很好理解：
var a = function(obj)
{
alert(this == obj);
}
var o = {};
o.afun = a;
o.afun(o); //true
函數(shù)就是一個(gè)變量，但是可以綁定到某個(gè)對(duì)象的下面，并且 this 就會(huì)指向 o 對(duì)象。
這里必須要注意，沒(méi)有被綁定的對(duì)象，默認(rèn)this 指向window 對(duì)象。
舉幾個(gè)例子：
function a()
{
//this == window
}
function a()
{
//this == window
function b()
{
//this == window
}
}
還必須注意的是，綁定沒(méi)有傳遞性，比如上面的嵌套的函數(shù)，a綁定到 o 對(duì)象，那么就影響了a函數(shù)，
而b 還是指向到window。
規(guī)則2：如果函數(shù)new 了一下，那么就會(huì)創(chuàng)建一個(gè)對(duì)象，并且this 指向 新創(chuàng)建的對(duì)象。
var o = new a();
這個(gè)時(shí)候，o 不再是個(gè)函數(shù)，而實(shí)際上，可以認(rèn)為是這樣的一個(gè)過(guò)程。
創(chuàng)建一個(gè)對(duì)象 var o = {};
然后，把this 指向 o，通過(guò)this 把 o 給初始化了。
規(guī)則3：通過(guò)apply 可以改變this 的指向
這個(gè)apply 的綁定就更加的靈活了，實(shí)際上，apply的功能和下面的功能差不多。
var a = function (obj)
{
alert(this == obj);
};
obj.fun = a;
obj.fun(obj);//true
簡(jiǎn)單的，可以a.apply(obj, [obj]); // true
javascript 的this 可以簡(jiǎn)單的認(rèn)為是 后期綁定，沒(méi)有地方綁定的時(shí)候，默認(rèn)綁定window。
綜合實(shí)例：
jquery 里面有一個(gè)很常用的函數(shù) each，可以把循環(huán)的對(duì)象元素綁定到this，方便操作。
這里只是簡(jiǎn)單的做個(gè)演示：
代碼
function each(tagName, callback)
{
var lists = document.getElementsByTagName(tagName);
for (var i = 0; i < lists.length; i++)
{
callback.apply(lists[i]);
}
}
each("a",
function ()
{
this.style.color = "red";
}
);
可以看到我頭部導(dǎo)航的鏈接都變成紅色了。
規(guī)則0：函數(shù)本身是一個(gè)特殊類型，大多數(shù)時(shí)候，可以認(rèn)為是一個(gè)變量。
復(fù)制代碼 代碼如下:
function a()
{
alert(this);
}
或者
var a = function()
{
alert(this);
}
都可以認(rèn)為是創(chuàng)建了一個(gè)變量，這個(gè)變量的值就是一個(gè)函數(shù)。
規(guī)則1：如果一個(gè)函數(shù)，是某個(gè)對(duì)象的key 值，那么，this就指向這個(gè)對(duì)象。
這個(gè)規(guī)則很好理解：
復(fù)制代碼 代碼如下:
var a = function(obj)
{
alert(this == obj);
}
var o = {};
o.afun = a;
o.afun(o); //true
函數(shù)就是一個(gè)變量，但是可以綁定到某個(gè)對(duì)象的下面，并且 this 就會(huì)指向 o 對(duì)象。
這里必須要注意，沒(méi)有被綁定的對(duì)象，默認(rèn)this 指向window 對(duì)象。
舉幾個(gè)例子：
復(fù)制代碼 代碼如下:
function a()
{
//this == window
}
function a()
{
//this == window
function b()
{
//this == window
}
}
還必須注意的是，綁定沒(méi)有傳遞性，比如上面的嵌套的函數(shù)，a綁定到 o 對(duì)象，那么就影響了a函數(shù)，
而b 還是指向到window。
規(guī)則2：如果函數(shù)new 了一下，那么就會(huì)創(chuàng)建一個(gè)對(duì)象，并且this 指向 新創(chuàng)建的對(duì)象。
var o = new a();
這個(gè)時(shí)候，o 不再是個(gè)函數(shù)，而實(shí)際上，可以認(rèn)為是這樣的一個(gè)過(guò)程。
創(chuàng)建一個(gè)對(duì)象 var o = {};
然后，把this 指向 o，通過(guò)this 把 o 給初始化了。
規(guī)則3：通過(guò)apply 可以改變this 的指向
這個(gè)apply 的綁定就更加的靈活了，實(shí)際上，apply的功能和下面的功能差不多。
復(fù)制代碼 代碼如下:
var a = function (obj)
{
alert(this == obj);
};
obj.fun = a;
obj.fun(obj);//true
簡(jiǎn)單的，可以a.apply(obj, [obj]); // true
javascript 的this 可以簡(jiǎn)單的認(rèn)為是 后期綁定，沒(méi)有地方綁定的時(shí)候，默認(rèn)綁定window。
綜合實(shí)例：
jquery 里面有一個(gè)很常用的函數(shù) each，可以把循環(huán)的對(duì)象元素綁定到this，方便操作。
這里只是簡(jiǎn)單的做個(gè)演示：
代碼
復(fù)制代碼 代碼如下:
function each(tagName, callback)
{
var lists = document.getElementsByTagName(tagName);
for (var i = 0; i < lists.length; i++)
{
callback.apply(lists[i]);
}
}
each("a",
function ()
{
this.style.color = "red";
}
);
可以看到我頭部導(dǎo)航的鏈接都變成紅色了。
相關(guān)文章
幾乎每個(gè)開(kāi)發(fā)人員都有面向?qū)ο笳Z(yǔ)言（比如C++、C#、Java）的開(kāi)發(fā)經(jīng)驗(yàn)。 在傳統(tǒng)面向?qū)ο蟮恼Z(yǔ)言中，有兩個(gè)非常重要的概念 - 類和實(shí)例。2009-07-07
項(xiàng)目中需要比較兩個(gè)對(duì)象是否相等，給Object對(duì)象開(kāi)展了（別緊張，別說(shuō)我把它污染了），一個(gè)實(shí)現(xiàn)而已，象java一樣可以只給自己想要的類重寫equals方法。2011-02-02
在上一遍我們簡(jiǎn)單的介紹了怎么樣使用JavaScript進(jìn)行構(gòu)造函數(shù)的書寫，現(xiàn)在來(lái)認(rèn)識(shí)下JavaScript的構(gòu)造函數(shù)其原理，主要是關(guān)注與原型的概念，首先看如下代碼。2010-06-06
Javascript面向?qū)ο缶幊蹋ǘ?構(gòu)造函數(shù)的繼承
這個(gè)系列的第一部分，主要介紹了如何"封裝"數(shù)據(jù)和方法，以及如何從原型對(duì)象生成實(shí)例。2011-08-08
面向?qū)ο蟮腏avascript之二(接口實(shí)現(xiàn)介紹)
接口是面向?qū)ο驤avascript工具箱中最有用的特性之一。我們都知道GOF在設(shè)計(jì)模式中說(shuō)到：面向接口編程，而非面向?qū)崿F(xiàn)編程2012-01-01
AppBaseJs 類庫(kù) 網(wǎng)上常用的javascript函數(shù)及其他js類庫(kù)寫的
AppBaseJs類庫(kù)。一個(gè)借鑒了網(wǎng)上常用的函數(shù)及其他js類庫(kù)寫的,方便大家的調(diào)用。2010-03-03
javascript 模式設(shè)計(jì)之工廠模式學(xué)習(xí)心得
接口的實(shí)現(xiàn)，從而使不同子類可以被同等的對(duì)待,恰當(dāng)?shù)氖褂霉S模式,但不要拘泥與形式,理解本質(zhì)。2010-04-04
JavaScript面向?qū)ο笤O(shè)計(jì)二 構(gòu)造函數(shù)模式
在Javascript面向?qū)ο笤O(shè)計(jì)一——工廠模式 中介紹了使用CreateEmployee（）函數(shù)創(chuàng)建員工類。ECMAScript中的構(gòu)造函數(shù)可以用來(lái)創(chuàng)建特定類型的對(duì)象，如Object和Array這樣的原生構(gòu)造函數(shù)，在運(yùn)行時(shí)會(huì)自動(dòng)出現(xiàn)在執(zhí)行環(huán)境中，此外也可以創(chuàng)建自定義的構(gòu)造函數(shù)，從而創(chuàng)建自定義對(duì)象類型的屬性和方法2011-12-12
javascript 面向?qū)ο蟮慕?jīng)典實(shí)例代碼
這里的面向?qū)ο笾饕鞘褂胮rototype屬性，大家可以參考下。2009-12-12
這里通過(guò)JS字符串替換、隨機(jī)數(shù)運(yùn)算實(shí)現(xiàn)混淆JS代碼,達(dá)到降低代碼可讀性,以保護(hù)代碼的目的,需要的朋友可以參考一下2007-12-12