JavaScript里的小妖精———this!!

關(guān)于this指向這個(gè)問(wèn)題,活生生折磨了我一個(gè)下午,回來(lái)靜下心捋順一下,總結(jié)出來(lái)一下規(guī)律。

當(dāng)然,this這個(gè)復(fù)雜的問(wèn)題不是一句兩句可以說(shuō)清楚,作為菜鳥,我的總結(jié)也就是為了做一些 ‘坑人的’ 筆試題,所以只能歡迎吐槽了。


題中一般分為兩種情況

  • 調(diào)用者是函數(shù)
  • 函數(shù)通過(guò)對(duì)象被調(diào)用(this指向?qū)ο?)
  • 函數(shù)單獨(dú)被調(diào)用(this指向undefined,非嚴(yán)格模式下指向全局)
  • 調(diào)用者是對(duì)象
  • 對(duì)象聲明在函數(shù)中 (this指向undefined,非嚴(yán)格模式下指向全局)
  • 對(duì)象聲明在函數(shù)外 (this指向全局)

PS:匿名函數(shù)的存在會(huì)導(dǎo)致this指向的丟失與以上情況不符合,用bind()來(lái)解決就可以了


舉一些栗子??????

  • ** 栗子??一**
 var a = 1;
    var obj = {
        a:2,
        c:this.a + 10,
        b: function () {
            return this.a;
        }
  }
 console.log(obj.b()); //函數(shù)b通過(guò)對(duì)象obj被調(diào)用,this指向obj【2】
 console.log(obj.c); //對(duì)象聲明在函數(shù)外,this指向全局【11】
  • ** 栗子??二**
var o = {
    a:10,
    b:{
        a:12,
        fn:function(){
            console.log(this.a);
        }
    }
}
o.b.fn();//fn通過(guò)對(duì)象被b調(diào)用,this指向b【12】
  • ** 栗子??三**
var o = {
    a:10,
    b:{
        a:12,
        fn:function(){
            console.log(this.a);
            console.log(this);
        }
    }
}
var j = o.b.fn;//fn未被執(zhí)行
j();//此時(shí)fn單獨(dú)被調(diào)用,this指向全局,全局沒(méi)有a【undefined】【window】
  • ** 栗子??四**
var name = '222';
    var a = {
        name:'111',
        say:function () {
            console.log(this.name);
        }
    }
    var fun = a.say;//say未被執(zhí)行
    fun();//say單獨(dú)被執(zhí)行,this指向全局【222】
    a.say();//函數(shù)say通過(guò)對(duì)象a被調(diào)用,this指向?qū)ο骯【111】
    var b = {
        name: '333',
        say: function (fun) {
            fun();
        }
    }
    b.say(a.say);//a.say未被執(zhí)行
    fun();//say單獨(dú)執(zhí)行,this指向全局【222】
    /*b.say(function(){}),但是通過(guò)b對(duì)象調(diào)用的函數(shù)say被執(zhí)行,this指向b,。
     但此時(shí)的this不是我們要打印的this,我們要打印的this在function(){}里,function里的this指向全局
     */
    b.say = a.say;//a.say未被執(zhí)行,將function賦值給了b,此時(shí)b對(duì)象也可以打印啦!
    b.say();//say函數(shù)被對(duì)象b調(diào)用執(zhí)行,this指向b【333】
  • ** 栗子??五**
var name = 'global';
var obj = {
    name: 'obj',
    getName: function () {
        return function () {
            console.log(this.name);
        }
    }
}
obj.getName()();//【global】
/*
var fn = obj.getName();
fn();
*/

call和apply改變this指向

  • call和apply的第一個(gè)參數(shù)都是this的指向
  • call的其他參數(shù)是一個(gè)一個(gè)傳的
  • apply的其他參數(shù)以數(shù)組形式傳遞。
function fn(a,b,c) {
    console.log(this.a + a + b + c);
}
var obj = {
    a: 20
}
fn.call(obj, 10, 20, 30);//【80】
fn.apply(obj, [100, 200, 300]);//【620】
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容