成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

js中this的四種使用場(chǎng)景

lk20150415 / 2654人閱讀

摘要：最近讀到了一篇介紹中的四種使用場(chǎng)景的文章，感覺(jué)總結(jié)的很好，所以我認(rèn)真讀了讀，并且動(dòng)手實(shí)踐了其中的，與大家共享。

最近讀到了一篇介紹js中this的四種使用場(chǎng)景的文章，感覺(jué)總結(jié)的很好，所以我認(rèn)真讀了讀，并且動(dòng)手實(shí)踐了其中的demo，與大家共享。原文鏈接：
https://github.com/alsotang/n...
遇到this，一直要記得這句：函數(shù)執(zhí)行時(shí)，this總是指向調(diào)用該函數(shù)的對(duì)象（即：判斷this所在的函數(shù)屬于誰(shuí)）。

1、函數(shù)有所屬對(duì)象，則指向所屬對(duì)象

var myObject={
    value:100
};
myObject.getValue=function(){
    console.log(this.value);
    console.log(this);
    return this.value;
}
console.log(myObject.getValue());

這里的getValue屬于對(duì)象myObject，所以this就指向myObject，執(zhí)行結(jié)果如下：

2、函數(shù)沒(méi)有所屬對(duì)象時(shí)，就指向全局對(duì)象（window或global）

var myObject={
    value:100
};
myObject.getValue=function(){
    var foo=function(){
        console.log(this.value);
        console.log(this);
    }
    foo();
    return this.value;
}
console.log(myObject.getValue());

在這里，foo屬于全局對(duì)象，所以foo函數(shù)打印的this.value為undefined。

寫(xiě)到這里，我又想起setTimeout和setInterval方法也是屬于全局對(duì)象的，所以在這兩個(gè)函數(shù)體內(nèi)this是指向全局的，所以也是這種情況，如下：

var myObject={
    value:100
};
myObject.getValue=function(){
    setTimeout(function(){
        console.log(this.value);
        console.log(this);
    },0);
    return this.value;
}
console.log(myObject.getValue());

執(zhí)行結(jié)果如下：

所以，如果要得到想要的結(jié)果，就要這樣寫(xiě)了吧：

myObject.getValue=function(){
    let self=this;//用一個(gè)self保存當(dāng)前的實(shí)例對(duì)象，即myObject
    setTimeout(function(){
        console.log(self.value);
        console.log(self);
    },0);
    return this.value;
}
console.log(myObject.getValue());

結(jié)果如下：

這又讓我想起來(lái)了es6中箭頭函數(shù)的妙用了（這個(gè)this綁定的是定義時(shí)所在的作用域，而不是運(yùn)行時(shí)所在的作用域；箭頭函數(shù)其實(shí)沒(méi)有自己的this，所以箭頭函數(shù)內(nèi)部的this就是外部的this）（可詳看es6教程：http://es6.ruanyifeng.com/#do...箭頭函數(shù)），如下：

var myObject={
    value:100
};
myObject.getValue=function(){
    // let self=this;//因?yàn)橛昧思^函數(shù)，所以這句不需要了
    setTimeout(()=>{
        console.log(this.value);
        console.log(this);
    },0);
    return this.value;
}
console.log(myObject.getValue());

執(zhí)行結(jié)果同上：

3、使用構(gòu)造器new一個(gè)對(duì)象時(shí)，this就指向新對(duì)象：

var oneObject=function(){
    this.value=100;
};
var myObj=new oneObject();
console.log(myObj.value);

這里的this就指向了new出來(lái)的新對(duì)象myObj，執(zhí)行結(jié)果如下：

4、apply，call，bind改變了this的指向

var myObject={
    value:100
}
var foo=function(){
    console.log(this);
    console.log(this.value);
    console.log("...............");
}
foo();
foo.apply(myObject);
foo.call(myObject);
var newFoo=foo.bind(myObject);
newFoo();

foo本來(lái)指向全局對(duì)象window，但是call，apply和bind將this綁定到了myObject上，所以，foo里面的this就指向了myObject。執(zhí)行代碼如下：

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/85209.html

相關(guān)文章

  • Vue.js應(yīng)用的四種AJAX請(qǐng)求數(shù)據(jù)模式

    摘要：應(yīng)用的四種請(qǐng)求數(shù)據(jù)模式翻譯原文出處鄙人翻譯略差，別見(jiàn)笑。每個(gè)都有自己的利弊，應(yīng)根據(jù)要求進(jìn)行判斷。二組件在使用框架時(shí)，組件負(fù)責(zé)管理自己的請(qǐng)求和獨(dú)立狀態(tài)。相反，將初始應(yīng)用程序狀態(tài)注入頁(yè)面的內(nèi)聯(lián)腳本中，以便應(yīng)用程序作為全局變量在需要時(shí)可用。 Vue.js應(yīng)用的四種AJAX請(qǐng)求數(shù)據(jù)模式 翻譯原文出處：4 AJAX Patterns For Vue.js Apps 鄙人翻譯略差，別見(jiàn)笑。 如果...

    iKcamp 評(píng)論0 收藏0

  • [摘譯]js內(nèi)存泄漏常見(jiàn)的四種情況

    摘要：本文主要選取了這篇文章中的一小部分來(lái)說(shuō)明一下中產(chǎn)生內(nèi)存泄漏的常見(jiàn)情況對(duì)于較難理解的第四種情況參考了一些文章來(lái)進(jìn)行說(shuō)明意外的全局變量中如果不用聲明變量該變量將被視為對(duì)象全局對(duì)象的屬性也就是全局變量上面的函數(shù)等價(jià)于所以你調(diào)用完了函數(shù)以后變量仍然 本文主要選取了4 Types of Memory Leaks in JavaScript and How to Get Rid Of Them 這...

    Moxmi 評(píng)論0 收藏0

  • MyBatis 中 @Param 注解的四種使用場(chǎng)景，最后一種經(jīng)常被人忽略！

    摘要：如果我們?cè)趧?dòng)態(tài)中用到了參數(shù)作為判斷條件，那么也是一定要加注解的，例如如下方法定義出來(lái)的如下這種情況，即使只有一個(gè)參數(shù)，也需要添加注解，而這種情況卻經(jīng)常被人忽略好了，不知道大家有沒(méi)有到呢有問(wèn)題歡迎留言討論。 有一些小伙伴覺(jué)得 MyBatis 只有方法中存在多個(gè)參數(shù)的時(shí)候，才需要添加 @Param 注解，其實(shí)這個(gè)理解是不準(zhǔn)確的。即使 MyBatis 方法只有一個(gè)參數(shù)，也可能會(huì)用到 @Par...

    BothEyes1993 評(píng)論0 收藏0

  • JavaScript創(chuàng)建對(duì)象的四種方式

    摘要：這種方式和有異曲同工之處，因?yàn)槭菍?duì)象的構(gòu)造函數(shù)，它的原型對(duì)象也是的方式四這種方式叫做使用對(duì)象字面量創(chuàng)建對(duì)象，這是最簡(jiǎn)單的一種方式，也是我經(jīng)常使用的方法，目的是在于簡(jiǎn)化創(chuàng)建包含大量屬性的對(duì)象的過(guò)程。 關(guān)鍵字 Object.create; new Object(); new Fn(); {} 背景 此段可跳過(guò)不讀……在平時(shí)的使用中，創(chuàng)建對(duì)象最常用的方式是使用{}直接創(chuàng)建，里面直接寫(xiě)方法和屬...

    2450184176 評(píng)論0 收藏0

  • react關(guān)于事件綁定this的四種方式

    摘要：在組件中，每個(gè)方法的上下文都會(huì)指向該組件的實(shí)例，即自動(dòng)綁定為當(dāng)前組件而且還會(huì)對(duì)這種引用進(jìn)行緩存，以達(dá)到和內(nèi)存的最大化。 在react組件中，每個(gè)方法的上下文都會(huì)指向該組件的實(shí)例，即自動(dòng)綁定this為當(dāng)前組件,而且react還會(huì)對(duì)這種引用進(jìn)行緩存，以達(dá)到cpu和內(nèi)存的最大化。在使用了es6 class或者純函數(shù)時(shí)，這種自動(dòng)綁定就不復(fù)存在了，我們需要手動(dòng)實(shí)現(xiàn)this的綁定以下是幾種綁定的方...

    張利勇 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<