JavaScript中的this是讓很多開發(fā)者頭疼的地方，而this關(guān)鍵字又是一個(gè)非常重要的語(yǔ)法點(diǎn)。毫不夸張地說(shuō)，不理解它的含義，大部分開發(fā)任務(wù)都無(wú)法完成。

想要理解this，你可以先記住以下兩點(diǎn)：

1：this永遠(yuǎn)指向一個(gè)對(duì)象；

2：this的指向完全取決于函數(shù)調(diào)用的位置；

針對(duì)以上的第一點(diǎn)特別好理解，不管在什么地方使用this，它必然會(huì)指向某個(gè)對(duì)象；確定了第一點(diǎn)后，也引出了一個(gè)問(wèn)題，就是this使用的地方到底在哪里，而第二點(diǎn)就解釋了這個(gè)問(wèn)題，但關(guān)鍵是在JavaScript語(yǔ)言之中，一切皆對(duì)象，運(yùn)行環(huán)境也是對(duì)象，所以函數(shù)都是在某個(gè)對(duì)象下運(yùn)行，而this就是函數(shù)運(yùn)行時(shí)所在的對(duì)象（環(huán)境）。這本來(lái)并不會(huì)讓我們糊涂，但是JavaScript支持運(yùn)行環(huán)境動(dòng)態(tài)切換，也就是說(shuō)，this的指向是動(dòng)態(tài)的，很難事先確定到底指向哪個(gè)對(duì)象，這才是最讓我們感到困惑的地方。

先看原理

function fun(){console.log(this.s); } ? var obj = {s:'1',f:fun } ? var s = '2'; ? obj.f(); //1 fun(); //2

上述代碼中，fun函數(shù)被調(diào)用了兩次，顯而易見的是兩次的結(jié)果不一樣；

很多人都會(huì)這樣解釋，obj.f()的調(diào)用中，因?yàn)檫\(yùn)行環(huán)境在obj對(duì)象內(nèi)，因此函數(shù)中的this指向?qū)ο髈bj;

而在全局作用域下調(diào)用 fun() ，函數(shù)中的 this 就會(huì)指向全局作用域?qū)ο體indow;

但是大部分人不會(huì)告訴你，this的指向?yàn)槭裁磿?huì)發(fā)生改變，this指向的改變到底是什么時(shí)候發(fā)生的；而搞懂了這些，this的使用才不會(huì)出現(xiàn)意外；

首先我們應(yīng)該知道，在JS中，數(shù)組、函數(shù)、對(duì)象都是引用類型，在參數(shù)傳遞時(shí)也就是引用傳遞；

上面的代碼中，obj 對(duì)象有兩個(gè)屬性，但是屬性的值類型是不同的，在內(nèi)存中的表現(xiàn)形式也是不同的；

調(diào)用時(shí)就成了這個(gè)樣子：

因?yàn)楹瘮?shù)在js中既可以當(dāng)做值傳遞和返回，也可當(dāng)做對(duì)象和構(gòu)造函數(shù)，所有函數(shù)在運(yùn)行時(shí)需要確定其當(dāng)前的運(yùn)行環(huán)境，this就出生了，所以，this會(huì)根據(jù)運(yùn)行環(huán)境的改變而改變，同時(shí)，函數(shù)中的this也只能在運(yùn)行時(shí)才能最終確定運(yùn)行環(huán)境；

再來(lái)看下面的代碼，你可能會(huì)更加理解this對(duì)于運(yùn)行環(huán)境的動(dòng)態(tài)切換規(guī)則：

var A = {name: '張三',f: function () {console.log('姓名：' + this.name);} }; ? var B = {name: '李四' }; ? B.f = A.f; B.f() // 姓名：李四 A.f() // 姓名：張三

上面代碼中，A.f屬性被賦給B.f，也就是A對(duì)象將匿名函數(shù)的 地址 賦值給B對(duì)象；

那么在調(diào)用時(shí)，函數(shù)分別根據(jù)運(yùn)行環(huán)境的不同，指向?qū)ο驛和B

function foo() {console.log(this.a); } var obj2 = {a: 2,fn: foo }; var obj1 = {a: 1,o1: obj2 }; obj1.o1.fn(); // 2

obj1對(duì)象的o1屬性值是obj2對(duì)象的地址，而obj2對(duì)象的fn屬性的值是函數(shù)foo的地址；

函數(shù)foo的調(diào)用環(huán)境是在obj2中的，因此this指向?qū)ο髈bj2;

那么接下來(lái)，我們對(duì)this使用最頻繁的幾種情況做一個(gè)總結(jié)，最常見的基本就是以下5種：

對(duì)象中的方法，事件綁定 ，構(gòu)造函數(shù) ，定時(shí)器，函數(shù)對(duì)象的call()、apply() 方法；

上面在講解this原理是，我們使用對(duì)象的方法中的this來(lái)說(shuō)明的，在此就不重復(fù)講解了，不懂的同學(xué)們，請(qǐng)返回去重新閱讀；

事件綁定中的this

事件綁定共有三種方式：行內(nèi)綁定、動(dòng)態(tài)綁定、事件監(jiān)聽；

行內(nèi)綁定的兩種情況：

<input type="button" value="按鈕" onclick="clickFun()"> <script>function clickFun(){this // 此函數(shù)的運(yùn)行環(huán)境在全局window對(duì)象下，因此this指向window;} </script> ? <input type="button" value="按鈕" onclick="this"> <!-- 運(yùn)行環(huán)境在節(jié)點(diǎn)對(duì)象中，因此this指向本節(jié)點(diǎn)對(duì)象 -->

行內(nèi)綁定事件的語(yǔ)法是在html節(jié)點(diǎn)內(nèi)，以節(jié)點(diǎn)屬性的方式綁定，屬性名是事件名稱前面加'on'，屬性的值則是一段可執(zhí)行的 JS 代碼段；而屬性值最常見的就是一個(gè)函數(shù)調(diào)用；

當(dāng)事件觸發(fā)時(shí)，屬性值就會(huì)作為JS代碼被執(zhí)行，當(dāng)前運(yùn)行環(huán)境下沒(méi)有clickFun函數(shù)，因此瀏覽器就需要跳出當(dāng)前運(yùn)行環(huán)境，在整個(gè)環(huán)境中尋找一個(gè)叫clickFun的函數(shù)并執(zhí)行這個(gè)函數(shù)，所以函數(shù)內(nèi)部的this就指向了全局對(duì)象window；如果不是一個(gè)函數(shù)調(diào)用，直接在當(dāng)前節(jié)點(diǎn)對(duì)象環(huán)境下使用this，那么顯然this就會(huì)指向當(dāng)前節(jié)點(diǎn)對(duì)象；

動(dòng)態(tài)綁定與事件監(jiān)聽：

<input type="button" value="按鈕" id="btn"> <script>var btn = document.getElementById('btn');btn.onclick = function(){this ; // this指向本節(jié)點(diǎn)對(duì)象} </script>

因?yàn)閯?dòng)態(tài)綁定的事件本就是為節(jié)點(diǎn)對(duì)象的屬性(事件名稱前面加'on')重新賦值為一個(gè)匿名函數(shù)，因此函數(shù)在執(zhí)行時(shí)就是在節(jié)點(diǎn)對(duì)象的環(huán)境下，this自然就指向了本節(jié)點(diǎn)對(duì)象；

事件監(jiān)聽中this指向的原理與動(dòng)態(tài)綁定基本一致，所以不再闡述；

構(gòu)造函數(shù)中的this

function Pro(){this.x = '1';this.y = function(){}; } var p = new Pro();

對(duì)于接觸過(guò) JS 面向?qū)ο缶幊痰耐瑢W(xué)來(lái)說(shuō)，上面的代碼和圖示基本都能看懂，new 一個(gè)構(gòu)造函數(shù)并執(zhí)行函數(shù)內(nèi)部代碼的過(guò)程就是這個(gè)五個(gè)步驟，當(dāng) JS 引擎指向到第3步的時(shí)候，會(huì)強(qiáng)制的將this指向新創(chuàng)建出來(lái)的這個(gè)對(duì)象；基本不需要理解，因?yàn)檫@本就是 JS 中的語(yǔ)法規(guī)則，記住就可以了；

window定時(shí)器中的this

var obj = {fun:function(){this ;} } ? setInterval(obj.fun,1000); // this指向window對(duì)象 setInterval('obj.fun()',1000); // this指向obj對(duì)象

setInterval() 是window對(duì)象下內(nèi)置的一個(gè)方法，接受兩個(gè)參數(shù)，第一個(gè)參數(shù)允許是一個(gè)函數(shù)或者是一段可執(zhí)行的 JS 代碼，第二個(gè)參數(shù)則是執(zhí)行前面函數(shù)或者代碼的時(shí)間間隔；

在上面的代碼中，setInterval(obj.fun,1000) 的第一個(gè)參數(shù)是obj對(duì)象的fun ，因?yàn)?JS 中函數(shù)可以被當(dāng)做值來(lái)做引用傳遞，實(shí)際就是將這個(gè)函數(shù)的地址當(dāng)做參數(shù)傳遞給了 setInterval 方法，換句話說(shuō)就是 setInterval 的第一參數(shù)接受了一個(gè)函數(shù)，那么此時(shí)1000毫秒后，函數(shù)的運(yùn)行就已經(jīng)是在window對(duì)象下了，也就是函數(shù)的調(diào)用者已經(jīng)變成了window對(duì)象，所以其中的this則指向的全局window對(duì)象；

而在 setInterval('obj.fun()',1000) 中的第一個(gè)參數(shù)，實(shí)際則是傳入的一段可執(zhí)行的 JS 代碼；1000毫秒后當(dāng) JS 引擎來(lái)執(zhí)行這段代碼時(shí)，則是通過(guò) obj 對(duì)象來(lái)找到 fun 函數(shù)并調(diào)用執(zhí)行，那么函數(shù)的運(yùn)行環(huán)境依然在 對(duì)象 obj 內(nèi)，所以函數(shù)內(nèi)部的this也就指向了 obj 對(duì)象；

函數(shù)對(duì)象的call()、apply() 方法

函數(shù)作為對(duì)象提供了call()，apply() 方法，他們也可以用來(lái)調(diào)用函數(shù)，這兩個(gè)方法都接受一個(gè)對(duì)象作為參數(shù)，用來(lái)指定本次調(diào)用時(shí)函數(shù)中this的指向；

call()方法

call方法使用的語(yǔ)法規(guī)則
函數(shù)名稱.call(obj,arg1,arg2...argN);
參數(shù)說(shuō)明:
obj:函數(shù)內(nèi)this要指向的對(duì)象,
arg1,arg2...argN :參數(shù)列表，參數(shù)與參數(shù)之間使用一個(gè)逗號(hào)隔開var lisi = {names:'lisi'}; var zs = {names:'zhangsan'}; function f(age){console.log(this.names);console.log(age);} f(23);//undefined ? //將f函數(shù)中的this指向固定到對(duì)象zs上； f.call(zs,32);//zhangsan

apply()方法

函數(shù)名稱.apply(obj,[arg1,arg2...,argN])
參數(shù)說(shuō)明:
obj :this要指向的對(duì)象
[arg1,arg2...argN] : 參數(shù)列表，要求格式為數(shù)組var lisi = {name:'lisi'}; var zs = {name:'zhangsan'}; function f(age,sex){console.log(this.name+age+sex); } //將f函數(shù)中的this指向固定到對(duì)象zs上； f.apply(zs,[23,'nan']);

注意：call和apply的作用一致，區(qū)別僅僅在函數(shù)實(shí)參參數(shù)傳遞的方式上；

這個(gè)兩個(gè)方法的最大作用基本就是用來(lái)強(qiáng)制指定函數(shù)調(diào)用時(shí)this的指向；

總結(jié)

以上是生活随笔為你收集整理的$.ligerdialog.open中确定按钮加事件_彻底搞懂JavaScript中的this指向问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。