總結(jié)js中的this指向問題

一旦签、js默認(rèn)綁定

在全局聲明的對象或者函數(shù)都會被認(rèn)為是window對象下的毙石,這時(shí)候默認(rèn)this是綁定到全局作用域下的window對象下

function foo(){
console.log(this.a);
}
var a=2;
foo();
var name = "The Window";
var object = {
    name : "My Object",
    getNameFunc : function(){
        return function(){
            return this.name;
        };
} };
alert(object.getNameFunc()()); //"The Window" 

由于getNameFunc函數(shù)返回一個(gè)函數(shù)渐行,因此這個(gè)函數(shù)會立即執(zhí)行,函數(shù)會搜索this和argument,只能搜索到活動(dòng)對象為止,不能訪問外部函數(shù)這兩個(gè)變量喇完。執(zhí)行變成var func = object.getNameFunc(); func(); //這個(gè)func結(jié)果在全局作用域執(zhí)行了,沒在object活動(dòng)作用域執(zhí)行從而導(dǎo)致最終調(diào)用函數(shù)的執(zhí)行環(huán)境是window
我們使用閉包可以改進(jìn)如下代碼

var name = "The Window";
    var object = {
        name : "My Object",
        getNameFunc : function(){               
          var that = this;
          return function(){
            return that.name;
          }; 
     }
};
alert(object.getNameFunc()());  //"My Object"

二剥啤、隱式綁定

當(dāng)函數(shù)引用時(shí)候存在上下文的時(shí)候會產(chǎn)生隱式綁定 this總是指向調(diào)用該函數(shù)的對象锦溪,就是看點(diǎn)前面的變量是誰,this就指向誰(看執(zhí)行函數(shù)前面有沒有點(diǎn))

var a=3;
function foo(){
console.log(this.a);
}
var obj={
  a:2,
  foo:foo
}
foo(); //3
obj.foo(); //2

三府怯、顯式綁定

顯示綁定就是常用的call刻诊,apply,bind函數(shù)強(qiáng)制綁定this的指向
具體實(shí)現(xiàn)方式可以參考 call牺丙,apply则涯、bind實(shí)現(xiàn)原理這篇文章

四、new綁定

function lala(a){
 this.a=a;
}
foo(4);
var obj=new lala(2);
console.log(a); // 4
console.log(obj.a); // 2

new的源代碼中會將傳入的構(gòu)造函數(shù)的prototype賦值給一個(gè)新new出來的object對象的-proto-屬性上,同時(shí)會使用apply去改變this指向?qū)魅氲臉?gòu)造函數(shù)的this指向改變到新new出來的object對象上面去 從而實(shí)現(xiàn)構(gòu)造函數(shù)的繼承粟判,將傳入的一些屬性繼承下來肖揣,實(shí)現(xiàn)原理如下

function objectFactory() {
  var obj = new Object();
  var [Constructor, ...args] = [ ...arguments];
  obj.__proto__ = Constructor.prototype;
  Constructor.apply(obj, args);
  return obj;
};

五、

但是在settimeout里面就有所不同浮入,這是由于setTimeout()調(diào)用的代碼運(yùn)行在與所在函數(shù)完全分離的執(zhí)行環(huán)境上。這會導(dǎo)致這些代碼中包含的 this 關(guān)鍵字會在非嚴(yán)格模式下指向 window (或全局)對象 嚴(yán)格模式指向undefined

settimeout在全局環(huán)境window中執(zhí)行

那么需要使用箭頭函數(shù)綁定this羊异,看下面??


var obj={
    num:3,
    fn:function(){
        setTimeout(function(){
            console.log(this.num);
        });
    }
}
obj.fn();//undefined
var obj1={
    num:4,
    fn:function(){
        setTimeout(() => {
            console.log(this.num);
        });
    }
}
obj1.fn();//4

箭頭函數(shù)沒有自己的this事秀,是繼承來的,箭頭函數(shù)的this指向的是誰調(diào)用箭頭函數(shù)的外層function野舶,箭頭函數(shù)的this就是指向該對象易迹,如果箭頭函數(shù)沒有外層函數(shù),則指向window平道。這樣可以方便地讓我們在 setTimeout ,setInterval中方便的使用this睹欲。此問題也可以使用bind來綁定this,或者將this存在一個(gè)變量來調(diào)用

var c = {
  lala: 2,
  fun: () => {
    console.log(this, '//////');  // 這里的this指向window 箭頭函數(shù)外層沒有function
    this.lala++;
    console.log(this.lala);
  }
}
c.fun();
c.fun();
var c = {
  lala: 2,
  fun: function() {
     return () => {
       console.log(this, '//////'); // 這里的this指向c 因?yàn)榧^函數(shù)外層有function一屋,這個(gè)function是c調(diào)用
       this.lala++;
       console.log(this.lala);
     }
  }
}
c.fun()();
c.fun()();
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末窘疮,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子冀墨,更是在濱河造成了極大的恐慌闸衫,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,372評論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件诽嘉,死亡現(xiàn)場離奇詭異蔚出,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)虫腋,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評論 3 392
  • 文/潘曉璐 我一進(jìn)店門骄酗,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人悦冀,你說我怎么就攤上這事趋翻。” “怎么了雏门?”我有些...
    開封第一講書人閱讀 162,415評論 0 353
  • 文/不壞的土叔 我叫張陵嘿歌,是天一觀的道長。 經(jīng)常有香客問我茁影,道長宙帝,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,157評論 1 292
  • 正文 為了忘掉前任募闲,我火速辦了婚禮步脓,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己靴患,他們只是感情好仍侥,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,171評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著鸳君,像睡著了一般农渊。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上或颊,一...
    開封第一講書人閱讀 51,125評論 1 297
  • 那天砸紊,我揣著相機(jī)與錄音,去河邊找鬼囱挑。 笑死醉顽,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的平挑。 我是一名探鬼主播游添,決...
    沈念sama閱讀 40,028評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼通熄!你這毒婦竟也來了唆涝?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,887評論 0 274
  • 序言:老撾萬榮一對情侶失蹤棠隐,失蹤者是張志新(化名)和其女友劉穎石抡,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體助泽,經(jīng)...
    沈念sama閱讀 45,310評論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡啰扛,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,533評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了嗡贺。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片隐解。...
    茶點(diǎn)故事閱讀 39,690評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖诫睬,靈堂內(nèi)的尸體忽然破棺而出煞茫,到底是詐尸還是另有隱情,我是刑警寧澤摄凡,帶...
    沈念sama閱讀 35,411評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站亲澡,受9級特大地震影響钦扭,放射性物質(zhì)發(fā)生泄漏床绪。R本人自食惡果不足惜客情,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,004評論 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望膀斋。 院中可真熱鬧梭伐,春花似錦仰担、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽项鬼。三九已至,卻和暖如春劲阎,著一層夾襖步出監(jiān)牢的瞬間绘盟,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評論 1 268
  • 我被黑心中介騙來泰國打工悯仙, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留龄毡,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,693評論 2 368
  • 正文 我出身青樓锡垄,卻偏偏與公主長得像沦零,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子货岭,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,577評論 2 353

推薦閱讀更多精彩內(nèi)容

  • 1.概念 在JavaScript中路操,this 是指當(dāng)前函數(shù)中正在執(zhí)行的上下文環(huán)境,因?yàn)檫@門語言擁有四種不同的函數(shù)調(diào)...
    BluesCurry閱讀 1,129評論 0 2
  • 前言 面試官出很多考題千贯,基本都會變著方式來考察this指向屯仗,看候選人對JS基礎(chǔ)知識是否扎實(shí)。讀者可以先拉到底部看總...
    若川i閱讀 1,110評論 0 10
  • 葡萄藤PPT JS中this的指向 大家好搔谴,我是IT修真院鄭州分院第6期的學(xué)員王棟魁袜,一枚正直、純潔敦第、善良的前端程序...
    17064閱讀 624評論 0 2
  • 1. this之謎 在JavaScript中峰弹,this是當(dāng)前執(zhí)行函數(shù)的上下文。因?yàn)镴avaScript有4種不同的...
    百里少龍閱讀 994評論 0 3
  • 高考即將來臨芜果,給考生們寫一篇有關(guān)閱高考卷的文章鞠呈。我閱過三年高考卷,06 年文言文翻譯师幕,07年文綜粟按,08年現(xiàn)代文理解...
    a23ac10f103d閱讀 390評論 3 5