国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

小菊花課堂之JavaScript關(guān)于this

CHENGKANG / 3122人閱讀

摘要：另外，的綁定和函數(shù)聲明的位置沒有任何關(guān)系，之取決于函數(shù)的調(diào)用方式。請(qǐng)看下面代碼這樣，我們就可以在調(diào)用的時(shí)候強(qiáng)制把它的綁定到上綁定在傳統(tǒng)的面向類語言中，使用初始化類時(shí)會(huì)調(diào)用類中的構(gòu)造函數(shù)。

關(guān)于this

上一章我們講了關(guān)于作用域和閉包的相關(guān)知識(shí)，現(xiàn)在開始新一輪的學(xué)習(xí)，那就是JavaScript中最復(fù)雜的機(jī)制之一---this關(guān)鍵字。它是一個(gè)很特別的關(guān)鍵字，被自動(dòng)定義在所有函數(shù)的作用域中。另外我們需要明確的一點(diǎn)就是，this在任何情況下都不指向函數(shù)的詞法作用域。

那么我們來看看this到底是怎么樣的機(jī)制。this是在運(yùn)行時(shí)進(jìn)行綁定的，它的上下文取決于函數(shù)調(diào)用時(shí)的各種條件。另外，this的綁定和函數(shù)聲明的位置沒有任何關(guān)系，之取決于函數(shù)的調(diào)用方式。

this的四條綁定規(guī)則 默認(rèn)綁定

默認(rèn)綁定就是最常用的獨(dú)立函數(shù)調(diào)用時(shí)所綁定的。思考一下代碼

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

我們可以看到，當(dāng)調(diào)用foo()時(shí)，this.a被解析成了全局變量a。
但是，如果使用嚴(yán)格模式，那么就不能將全局對(duì)象用于默認(rèn)綁定，報(bào)錯(cuò)TypeError:this is undefined

隱式綁定

一個(gè)對(duì)那個(gè)內(nèi)部包含一個(gè)指向函數(shù)的屬性，并通過這個(gè)屬性間接引用函數(shù)，從而把this隱式綁定到這個(gè)對(duì)象上。所以這一條就需要考慮調(diào)用位置是否有上下文對(duì)象。

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

這段代碼中，當(dāng)foo()被調(diào)用時(shí)，前面加上了對(duì)obj的引用。當(dāng)函數(shù)引用有上下文對(duì)象時(shí)，隱式綁定規(guī)則會(huì)把函數(shù)調(diào)用中的this綁定到這個(gè)上下文對(duì)象。另外，對(duì)象屬性引用鏈中只有上一層或者說最后一層在調(diào)用位置中起作用。也就是說，this永遠(yuǎn)都是指向最近調(diào)用的位置。

顯式綁定

前面說了隱式綁定的概念，那么我們?nèi)绻幌朐趯?duì)象內(nèi)部包含函數(shù)引用，而想在某個(gè)對(duì)象上強(qiáng)制調(diào)用函數(shù)，該如何做呢？
JavaScript中提供了兩個(gè)方法，分別是call()和apply()，那么我們應(yīng)該怎么在實(shí)際中運(yùn)用呢？
首先我們要搞清楚call()和apply()的作用，這里引用MDN上的解釋:

call() 方法調(diào)用一個(gè)函數(shù), 其具有一個(gè)指定的this值和分別地提供的參數(shù)(參數(shù)的列表)。
apply() 方法調(diào)用一個(gè)具有給定this值的函數(shù)，以及作為一個(gè)數(shù)組（或類似數(shù)組對(duì)象）提供的參數(shù)。
具體如何實(shí)現(xiàn)，這里不作展開說明，可以自行研究，加深理解。

可以看出，它們倆的差異僅在于所需參數(shù)的形式不同，ok回歸正題。
請(qǐng)看下面代碼：

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

這樣，我們就可以在調(diào)用foo的時(shí)候強(qiáng)制把它的this綁定到obj上

new綁定

在傳統(tǒng)的面向類語言中，使用new初始化類時(shí)會(huì)調(diào)用類中的構(gòu)造函數(shù)。但是，JavaScript中的構(gòu)造函數(shù)只是使用new操作符時(shí)被調(diào)用的函數(shù)。它們并不屬于某個(gè)類，也不會(huì)實(shí)例化一個(gè)類。
JavaScript中使用new調(diào)用函數(shù)時(shí)，會(huì)自動(dòng)執(zhí)行下面操作

構(gòu)造一個(gè)新對(duì)象

新對(duì)象會(huì)被執(zhí)行[[prototype]]連接

新對(duì)象會(huì)綁定函數(shù)調(diào)用的this

如果函數(shù)沒有返回其他對(duì)象，那么new表達(dá)式中的函數(shù)調(diào)用會(huì)自動(dòng)返回這個(gè)新對(duì)象

判斷this

那么我們?cè)谂袛嗪瘮?shù)在某個(gè)調(diào)用位置應(yīng)該應(yīng)用哪條規(guī)則呢，優(yōu)先級(jí)如何判斷呢？有下面四條法寶供參考

函數(shù)是否在new中調(diào)用？如果是，則this綁定的是新對(duì)象
var bar = new foo()

函數(shù)是否通過call、apply調(diào)用？如果是，則this綁定的是指定對(duì)象
var bar = foo.call(obj)

函數(shù)是否在某個(gè)上下文對(duì)象中調(diào)用？如果是，則this綁定的是上下文對(duì)象
var bar = obj.foo()

如果都不是的話，使用默認(rèn)綁定。注意，在嚴(yán)格模式下，就綁定到undefined，否則就綁定到全局對(duì)象
var bar = foo()

當(dāng)然，也許會(huì)有例外的情況發(fā)生，暫時(shí)先留著，大家一起思考一下，看看會(huì)在什么情況下出現(xiàn)這種例外情況。

那么，今天就先到這里啦
see u ~ again

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

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

相關(guān)文章

  • 小菊花課堂之JavaScript作用域與閉包

    摘要：而閉包卻能阻止這件事情發(fā)生。由于的聲明位置使它擁有涵蓋內(nèi)部作用域的閉包，使得該作用域能夠一直存在，以供在之后進(jìn)行引用。到這里，小菊花課堂之閉包的內(nèi)容就告一段落啦，感謝各位能耐心看到這里。 由于前段時(shí)間項(xiàng)目沒有那么忙，然后我這人一天不看點(diǎn)啥就非常焦慮，于是二刷《你不知道的JavaScript》，現(xiàn)在讀到閉包，想著看完這一章節(jié)，寫點(diǎn)東西也是挺好的，所以有了下面的內(nèi)容，如有不對(duì)的地方，敬請(qǐng)斧...

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

  • 小菊花課堂之JS的防抖與節(jié)流

    摘要：文章來源詳談防抖和節(jié)流輕松理解函數(shù)節(jié)流和函數(shù)防抖函數(shù)防抖和節(jié)流好啦，今天的小菊花課堂之的防抖與節(jié)流的內(nèi)容就告一段落啦，感各位能耐心看到這里。 前言 陸游有一首《冬夜讀書示子聿》——古人學(xué)問無遺力，少壯工夫老始成。紙上得來終覺淺，絕知此事要躬行。，其中的意思想必大家都能明白，在學(xué)習(xí)或工作中，不斷的印證著這首詩的內(nèi)涵。所以，又有了此篇小菊花文章。 詳解 在前端開發(fā)中，我們經(jīng)常會(huì)碰到一些會(huì)持...

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

  • 小菊花課堂之JS的防抖與節(jié)流

    摘要：文章來源詳談防抖和節(jié)流輕松理解函數(shù)節(jié)流和函數(shù)防抖函數(shù)防抖和節(jié)流好啦，今天的小菊花課堂之的防抖與節(jié)流的內(nèi)容就告一段落啦，感各位能耐心看到這里。 前言 陸游有一首《冬夜讀書示子聿》——古人學(xué)問無遺力，少壯工夫老始成。紙上得來終覺淺，絕知此事要躬行。，其中的意思想必大家都能明白，在學(xué)習(xí)或工作中，不斷的印證著這首詩的內(nèi)涵。所以，又有了此篇小菊花文章。 詳解 在前端開發(fā)中，我們經(jīng)常會(huì)碰到一些會(huì)持...

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

  • 干貨--手把手?jǐn)]vue移動(dòng)UI框架： 滑動(dòng)加載

    摘要：前言在我們移動(dòng)端還有一個(gè)很常用的組件，那就是滑動(dòng)加載更多組件。平常我們看到的很多插件實(shí)現(xiàn)相當(dāng)復(fù)雜就覺得這個(gè)組件很難，其實(shí)不是的這個(gè)組件其實(shí)可以很簡單的就實(shí)現(xiàn)出來，而且體驗(yàn)也能非常的棒當(dāng)然我們沒有實(shí)現(xiàn)下拉刷新功能下面我們就一起來實(shí)現(xiàn)這個(gè)組件。 前言 在我們移動(dòng)端還有一個(gè)很常用的組件，那就是滑動(dòng)加載更多組件。平常我們看到的很多插件實(shí)現(xiàn)相當(dāng)復(fù)雜就覺得這個(gè)組件很難，其實(shí)不是的??！這個(gè)組件其實(shí)可...

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

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

0條評(píng)論

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