? ?大家好侯养，我是IT修真院武漢第10期學(xué)員畔况，一枚正直鲸鹦、純潔、善良的前端程序員跷跪。
? ?今天給大家分享一下馋嗜，修真院官網(wǎng)任務(wù)js-2，深度思考的知識(shí)點(diǎn)——函數(shù)表達(dá)式跟函數(shù)聲明的區(qū)別;
1.背景介紹
JAVASCRIPT中THIS指的是什么吵瞻？
this是JavaScript語(yǔ)言中定義的眾多關(guān)鍵字之一葛菇，它的特殊在于它自動(dòng)定義于每一個(gè)函數(shù)域內(nèi)，在函數(shù)運(yùn)行時(shí)橡羞，this會(huì)自動(dòng)生成一個(gè)內(nèi)部對(duì)象眯停，這個(gè)對(duì)象只能在函數(shù)內(nèi)部使用。同時(shí)卿泽，隨著函數(shù)使用場(chǎng)合的不同莺债，this的值會(huì)發(fā)生變化。但是有一個(gè)總的原則又厉，那就是this指的是，調(diào)用函數(shù)的那個(gè)對(duì)象椎瘟。
那什么THIS的指向又是什么呢覆致？
在JavaScript中，this是動(dòng)態(tài)綁定的肺蔚，它可以是全局對(duì)象煌妈、當(dāng)前對(duì)象或者任意對(duì)象，這完全取決于函數(shù)的調(diào)用方式。這就導(dǎo)致了this具備了多重含義璧诵，可以使得JavaScript更靈活的使用汰蜘。但是，帶來了靈活性的同時(shí)也會(huì)給我們初學(xué)者帶來不少困惑之宿。
2.知識(shí)剖析??
var name = '小明';
function look() {??? ?
????????var name = '二明';???
? ? ? ? console.log(this.name);?? ?
????????console.log(this);?
};?
look(); //小明
總結(jié)：在全局作用域中它的 this 執(zhí)行當(dāng)前的全局對(duì)象（瀏覽器端是 Window）族操，所以才會(huì)在全局環(huán)境下查找'name'，然后打印出來
var name = '小明';
var name2 = {??? ?
????????name: '二明',??? ?
????????age: 20,???
?????????look: function(){??? ???
????????console.log(this.name);??? ??? ?
????????console.log(this.age);??? ?
????????}?
}?
name2.look();
這里的打印的結(jié)果是打印的第一個(gè)是二明比被，第二個(gè)是20色难。因?yàn)檎{(diào)用look函數(shù)的是name2這個(gè)對(duì)象，所以this指向的是name2中的name屬性的指向只在函數(shù)中定義的話是確定不了的等缀，只有當(dāng)被函數(shù)執(zhí)行的時(shí)候才能確定this到底指向誰(shuí)枷莉，也就是誰(shuí)調(diào)用了這個(gè)函數(shù)。
var name ='小明';
var name2 = {
????????name:'二明',
????????func:{
????????????????name:'三明',
????????????????look:function(){
????????????????????console.log(this.name);
????????????????}
????????}
}
name2.func.look();
這里的話尺迂，第一個(gè)是函數(shù)被name2調(diào)用的笤妙，本應(yīng)打印的是二明，但是最后的打印結(jié)果卻是三明噪裕，是為什么呢蹲盘。我們可以看下下面的圖
調(diào)用之間的關(guān)系
THIS的指向的三種情況
1.如果一個(gè)函數(shù)有this，但是它沒有被上一級(jí)對(duì)象所調(diào)用州疾，那么它指向的就是window辜限。在嚴(yán)格模式下指向的是undefined。
2.如果一個(gè)函數(shù)中有this严蓖，這個(gè)函數(shù)有被上一級(jí)所調(diào)用薄嫡，那么它指向的就是調(diào)用它的對(duì)象。
3.如果一個(gè)函數(shù)中有this颗胡，且這個(gè)函數(shù)外層被多個(gè)對(duì)象包含毫深，盡管最終這個(gè)函數(shù)是被最外層的對(duì)象所調(diào)用，this指向的也只是函數(shù)上一級(jí)的對(duì)象毒姨。
var name ='小明';
var name2 = {
????????name:'二明',
????????func:{
????????????????look:function(){
????????????????????????console.log(this.name);
????????????????}
????????}
}
name2.func.look();//undefined
雖然函數(shù)look()最終是被func調(diào)用哑蔫，哪怕func中沒有name這個(gè)屬性，this指向的依然是func弧呐，所以打印的結(jié)果為undefined闸迷。但是還有一種特殊情況：
var name ='小明';
var name2 = {
????????name:'二明',
????????func:{
????????????????name:'三明',
????????????????look:function(){
????????????????????????console.log(this.name);
????????????????}
????????}
}
var a = name2.func.look;
a();
這里的話this最終打印的是小明，卻不是我們想象中的三明俘枫，這是因?yàn)槲覀冎匦侣暶髯兞縜腥沽，并把look函數(shù)賦值給它，最后執(zhí)行函數(shù)a()的時(shí)候鸠蚪，調(diào)用a()是Window對(duì)象今阳。那句話：誰(shuí)調(diào)用this师溅，this就指向誰(shuí).
3、常見問題
現(xiàn)象：下面的代碼兩次打印的this不一樣
var obj = {??? ?
????????name: 'qiutc',??? ?
????????foo: function() {??? ??? ?
????????????????console.log(this);??? ?
????????},??? ?
????????foo2: function() {?? ??? ?
????????????????console.log(this);??? ??? ?
????????????????setTimeout(this.foo, 1000);??? ?
????????}?
}?
obj.foo2();
4盾舌、解決方案
我們可以這么解決：利用 閉包 的特性來處理
var obj = {
????????name:'qiutc',
????????foo: function() {
????????????????console.log(this);
????????},
????????foo2: function() {
????????????????console.log(this);
????????????????var _this= this;
????????????????setTimeout(function() {
????????????????????????console.log(this);// Window
????????????????????????console.log(_this);// Object {name: "qiutc"}
????????????????},1000);
????????}
}
obj.foo2();
可以看到直接用 this 仍然是 Window墓臭；因?yàn)?foo2 中的 this 是指向 obj，我們可以先用一個(gè)變量 _this 來儲(chǔ)存妖谴，然后在回調(diào)函數(shù)中使用 _this窿锉，就可以指向當(dāng)前的這個(gè)對(duì)象了
執(zhí)行這段代碼我們會(huì)發(fā)現(xiàn)兩次打印出來的 this 是不一樣的：
第一次是 foo2 中直接打印 this，這里指向 obj 這個(gè)對(duì)象窖维，我們毋庸置疑榆综；
但是在 setTimeout 中執(zhí)行的 this.foo ，卻指向了全局對(duì)象铸史，這里不是把它當(dāng)作函數(shù)的方法使用嗎鼻疮？這一點(diǎn)經(jīng)常讓很多初學(xué)者疑惑；
其實(shí)琳轿，setTimeout 也只是一個(gè)函數(shù)而已判沟，函數(shù)必然有可能需要參數(shù)，我們把 this.foo 當(dāng)作一個(gè)參數(shù)傳給 setTimeout 這個(gè)函數(shù)崭篡，就像它需要一個(gè) fun 參數(shù)挪哄，在傳入?yún)?shù)的時(shí)候，其實(shí)做了個(gè)這樣的?? ??? ?操作 fun = this.foo琉闪，看到?jīng)]有迹炼，這里我們直接把 fun 指向 this.foo 的引用；執(zhí)行的時(shí)候其實(shí)是執(zhí)行了 fun() 所以已經(jīng)和 obj 無關(guān)了颠毙，它是被當(dāng)作普通函數(shù)直接調(diào)用的斯入，因此 this 指向全局對(duì)象。
這個(gè)問題是很多異步回調(diào)函數(shù)中普遍會(huì)碰到的
6.擴(kuò)展思考
問題：當(dāng)this遇到return時(shí)會(huì)發(fā)生什么蛀蜜？
答：如果返回值是一個(gè)對(duì)象刻两，那么this指向的就是那個(gè)返回的對(duì)象，如果返回值不是一個(gè)對(duì)象那么this還是指向函數(shù)的實(shí)例
問題：當(dāng)this在一個(gè)對(duì)象里面的對(duì)像里滴某，這是this指向哪?
答：誰(shuí)調(diào)用this磅摹，this就指向誰(shuí)；這時(shí)候指向的是這個(gè)對(duì)象霎奢；
問題：this看起來很簡(jiǎn)單户誓，有什么需要注意的么？
答：講起來肯定簡(jiǎn)單幕侠，用起來卻很復(fù)雜帝美。
7.參考文獻(xiàn)
參考一：徹底理解JS中this的指向
參考二：阮一峰的博客
