@(javascript)[JavaScript中this的指向]
關(guān)于js函數(shù)中this的指向的問(wèn)題
javasript函數(shù)中this的指向一直都是許多編程入門新手的一個(gè)問(wèn)題，老師把這個(gè)this的指向弄錯(cuò)誤膘盖。下面我們可以來(lái)看看關(guān)于this指向的幾種情況校翔。
不過(guò)在講之前禽捆，請(qǐng)各位始終記住一句話：
<span style="color: red;font-weight: 900;font-size: 30px;">JavaScript中的this一直指向觸發(fā)這個(gè)事件（函數(shù)）的這個(gè)Objoct（對(duì)象）来涨。</span>
第一種：函數(shù)直接添加在行內(nèi)
<button onclick="alert(this.innerHTML);">this就是指向這個(gè)div盒子</button>
點(diǎn)擊看看：
<button onclick="alert(this.innerHTML);">this就是指向這個(gè)div盒子</button>
此時(shí)的這個(gè)alert(this.innerHTML)尽纽；事件是直接寫在button這個(gè)元素行內(nèi)的它褪。是這個(gè)button元素觸發(fā)的這個(gè)事件俭驮。
第二種：通過(guò)<span style="color: red;">對(duì)象.事件名</span>來(lái)實(shí)現(xiàn)
這是html代碼
<button id="box">通過(guò)js事件的點(diǎn)擊事件</button>
下面是js代碼
document.getElementById("box").onclcik = function(){
alert(this.innerHTML);
}
<button id="box">通過(guò)js事件的點(diǎn)擊事件</button>
<script type="text/javascript">
document.getElementById("box").onclick = function(){
alert(this.innerHTML);
}
</script>
以上的兩種方式都很好理解，也不做過(guò)多的說(shuō)明悦荒。
第三種：函數(shù)的調(diào)用的形式
這種方式也是存在許多的變種，先來(lái)看看上面例子的一個(gè)變種嘹吨。
這是html代碼
<button id="box1">通過(guò)js事件的點(diǎn)擊事件</button>
下面是js代碼
document.getElementById("box1").onclick = a;
function a(){
alert(this);
}
這一種形式的事件與上面的其實(shí)是一樣的搬味，不過(guò)是單獨(dú)定義了一個(gè)函數(shù)，然后點(diǎn)擊調(diào)用這個(gè)函數(shù)蟀拷。
在看看下面的例子
<button id="box1">通過(guò)js事件的點(diǎn)擊事件</button>
下面是js代碼
document.getElementById("box1").onclick = function(){
a();
}
function a(){
alert(this);
}
此時(shí)的這個(gè)與上面的有很相似碰纬，不同的就是此時(shí)的這個(gè)a函數(shù)是在一個(gè)事件函數(shù)里面執(zhí)行的。此時(shí)的邏輯是：我點(diǎn)擊這個(gè)ID為box1的button,讓后觸發(fā)事件后面的函數(shù)function(){a();}问芬。此時(shí)呢里面的a函數(shù)其實(shí)還沒(méi)有執(zhí)行悦析。到這個(gè)函數(shù)執(zhí)行的時(shí)候，執(zhí)行到里面的函數(shù)了此衅，a函數(shù)自己調(diào)用執(zhí)行（函數(shù)加括號(hào)執(zhí)行）强戴，那么問(wèn)題來(lái)了亭螟，是誰(shuí)調(diào)用的這個(gè)a函數(shù)呢？答案是：window骑歹。因?yàn)椴淮嬖谏厦嬲f(shuō)的兩種以及Object.函數(shù)的形式预烙。這個(gè)就有點(diǎn)像是定義了一個(gè)函數(shù)自執(zhí)行。
像這樣
function t(){
console.log(this);
}
/**
* 此時(shí)的這個(gè) t 函數(shù)是由誰(shuí)調(diào)用的呢（也就是鼠標(biāo)哪一個(gè)對(duì)象讓他執(zhí)行的道媚？）
* 答案是的 null
* 而在 js 中扁掸，如果 this 的指向是null會(huì)自動(dòng)轉(zhuǎn)換為 window
*/
t();
或者是這樣：
function t(){
function t2(){
console.log(this);
}
t2()
}
t();
OK！接下來(lái)看看這個(gè)：
function intro(){
console.log('名字是'+ this.name,this );
}
var dog = {name: "狗"};
dog.intro = intro;
dog.intro(); // 狗
分析一下：此時(shí)先定義了一個(gè)名字是intro的一個(gè)函數(shù)最域，在定義一個(gè)dog對(duì)象并賦值name=狗谴分。下面的代碼就是在dog這個(gè)對(duì)象上添加一個(gè)intro對(duì)象，賦值為一開(kāi)始定義的那個(gè)函數(shù)intro镀脂。此時(shí)的這個(gè)dog對(duì)象就多了一個(gè)屬性intro狸剃，值是函數(shù)。接著在調(diào)用這個(gè)dog.intro();狗热。那么是誰(shuí)調(diào)用的呢钞馁？很明顯是這個(gè)dog對(duì)象調(diào)用的這個(gè)函數(shù)。所以此時(shí)的這個(gè)this就是指向dog對(duì)象匿刮。那this.name就是狗了僧凰。
OK！再來(lái)：
function intro(){
console.log('名字是'+ this.name,this );
}
var dog = {name: "狗"};
dog.intro = intro;
dog.intro(); // 狗
var cat = {name:"貓"};
cat.intro = dog.intro;
cat.intro(); // 貓
現(xiàn)在多了一個(gè)cat,看這句cat.intro = dog.intro;熟丸。這個(gè)是把dog下面的intro方法賦值給了cat下面新建的一個(gè)intro方法训措。此時(shí)涉及到一個(gè)內(nèi)存的問(wèn)題。<span style="color: red;">js中的對(duì)象光羞，函數(shù)等都是存放在內(nèi)存中绩鸣，給其他對(duì)象賦值為這個(gè)函數(shù)的時(shí)候就是讓這個(gè)對(duì)象的這個(gè)屬性指向內(nèi)存中的這個(gè)函數(shù)</span>，所以纱兑，不管上面的是怎樣賦值呀闻，cat與dog的intro的值是指向同一個(gè)函數(shù)的。不同的是調(diào)用他們的對(duì)象不同潜慎，導(dǎo)致this不同捡多，所以最后的this.name的值不同。
再來(lái)看看這個(gè)呢铐炫？
function intro(){
console.log('名字是'+ this.name,this );
}
var dog = {name: "狗"};
dog.intro = intro;
dog.intro(); // 狗
var cat = {name:"貓"};
cat.intro = dog.intro;
cat.intro(); // 貓
(cat.intro = dog.intro)(); // 空 this 指向window```javascript
function intro(){
console.log('名字是'+ this.name,this );
}
var dog = {name: "狗"};
dog.intro = intro;
dog.intro(); // 狗
var cat = {name:"貓"};
cat.intro = dog.intro;
cat.intro(); // 貓
(cat.intro = dog.intro)(); // 空 this 指向window
此時(shí)的在上面的就是多了一句(cat.intro = dog.intro)();垒手。那為什么就指向window了呢？
上面的這個(gè)例子倒信，涉及到的是關(guān)于計(jì)算機(jī)里面的計(jì)算科贬，cat.intro = dog.intro 這是一個(gè)賦值運(yùn)算，而賦值運(yùn)算的結(jié)果是 = 右側(cè)的值鳖悠，此時(shí)這個(gè)值并不屬于任何一個(gè)對(duì)象榜掌，而這個(gè)值是一個(gè)空优妙，也可以說(shuō)是一個(gè) null ，所以此是為 null 轉(zhuǎn)為指向 window唐责×鄹龋可以這么做一個(gè)比喻：
一天張三去面館吃面，給老板說(shuō)：“老板鼠哥，一碗牛肉面”熟菲，做好面后，此時(shí)的這碗牛肉面這個(gè)
值就有了朴恳。相當(dāng)于上面的intro函數(shù)抄罕，此時(shí)呢他并不屬于張三。當(dāng)老板把這碗面端到張三面前于颖，這是才屬于張三呆贿。OK。李四也去吃面森渐，進(jìn)入面館做入，看見(jiàn)張三的面。對(duì)老板說(shuō)：“老板同衣，來(lái)一碗和他一樣的面”竟块。此時(shí)老板需要計(jì)算，這碗面是什么面耐齐？相當(dāng)于上面的cat.intro = dog.intro計(jì)算浪秘。老板計(jì)算后才知道這碗面是牛肉面。此時(shí)讓一個(gè)值加括號(hào)執(zhí)行埠况，那肯定就不行了耸携。此時(shí)的這碗面并不屬于李四。賦值的結(jié)果是是什么呢辕翰？當(dāng)老板把這碗面端到李四面前夺衍，這是才屬于李四。這就是結(jié)果金蜀。
需要注意的點(diǎn)就是cat.intro = dog.intro只是一個(gè)賦值過(guò)程刷后，值是=右邊的東西。執(zhí)行cat.intro = dog.intro會(huì)導(dǎo)致一個(gè)結(jié)果就是cat下面多了一個(gè)intro屬性并且有值渊抄。
基本普通的函數(shù)中的this存在的問(wèn)題就是這么多，其他的也就是上面的一些變種丧裁。
不過(guò)护桦，可以發(fā)現(xiàn)，因?yàn)閠his指向window的存在煎娇，會(huì)導(dǎo)致污染全局二庵，所以多數(shù)時(shí)候使用構(gòu)造函數(shù)new的方式更可取贪染，這樣this才不會(huì)指向全局避免污染全局。
上面說(shuō)了這么多催享。其實(shí)也就是最開(kāi)始說(shuō)的那句：
<span style="color: red;font-weight: 900;font-size: 30px;">JavaScript中的this一直指向觸發(fā)這個(gè)事件（函數(shù)）的這個(gè)Objoct（對(duì)象）杭隙。</span>
