資訊專欄INFORMATION COLUMN
摘要：另外，的綁定和函數(shù)聲明的位置沒有任何關(guān)系，之取決于函數(shù)的調(diào)用方式。請看下面代碼這樣，我們就可以在調(diào)用的時候強(qiáng)制把它的綁定到上綁定在傳統(tǒng)的面向類語言中，使用初始化類時會調(diào)用類中的構(gòu)造函數(shù)。
關(guān)于this
上一章我們講了關(guān)于作用域和閉包的相關(guān)知識，現(xiàn)在開始新一輪的學(xué)習(xí)，那就是JavaScript中最復(fù)雜的機(jī)制之一---this關(guān)鍵字。它是一個很特別的關(guān)鍵字，被自動定義在所有函數(shù)的作用域中。另外我們需要明確的一點就是，this在任何情況下都不指向函數(shù)的詞法作用域。
那么我們來看看this到底是怎么樣的機(jī)制。this是在運行時進(jìn)行綁定的，它的上下文取決于函數(shù)調(diào)用時的各種條件。另外，this的綁定和函數(shù)聲明的位置沒有任何關(guān)系，之取決于函數(shù)的調(diào)用方式。
this的四條綁定規(guī)則 默認(rèn)綁定默認(rèn)綁定就是最常用的獨立函數(shù)調(diào)用時所綁定的。思考一下代碼
function foo() {
console.log(this.a);
}
var a = 2;
foo(); // 2
我們可以看到，當(dāng)調(diào)用foo()時，this.a被解析成了全局變量a。
但是，如果使用嚴(yán)格模式，那么就不能將全局對象用于默認(rèn)綁定，報錯TypeError:this is undefined
一個對那個內(nèi)部包含一個指向函數(shù)的屬性，并通過這個屬性間接引用函數(shù)，從而把this隱式綁定到這個對象上。所以這一條就需要考慮調(diào)用位置是否有上下文對象。
function foo() {
console.log(this.a);
}
var obj = {
a : 2,
foo: foo
};
obj.foo(); // 2
這段代碼中，當(dāng)foo()被調(diào)用時，前面加上了對obj的引用。當(dāng)函數(shù)引用有上下文對象時，隱式綁定規(guī)則會把函數(shù)調(diào)用中的this綁定到這個上下文對象。另外，對象屬性引用鏈中只有上一層或者說最后一層在調(diào)用位置中起作用。也就是說，this永遠(yuǎn)都是指向最近調(diào)用的位置。
顯式綁定前面說了隱式綁定的概念，那么我們?nèi)绻幌朐趯ο髢?nèi)部包含函數(shù)引用，而想在某個對象上強(qiáng)制調(diào)用函數(shù)，該如何做呢？
JavaScript中提供了兩個方法，分別是call()和apply()，那么我們應(yīng)該怎么在實際中運用呢？
首先我們要搞清楚call()和apply()的作用，這里引用MDN上的解釋:
call() 方法調(diào)用一個函數(shù), 其具有一個指定的this值和分別地提供的參數(shù)(參數(shù)的列表)。
apply() 方法調(diào)用一個具有給定this值的函數(shù)，以及作為一個數(shù)組（或類似數(shù)組對象）提供的參數(shù)。
具體如何實現(xiàn)，這里不作展開說明，可以自行研究，加深理解。
可以看出，它們倆的差異僅在于所需參數(shù)的形式不同，ok回歸正題。
請看下面代碼：
function foo() {
console.log(a);
}
var obj = {
a: 2
}
foo.call(obj); // 2
這樣，我們就可以在調(diào)用foo的時候強(qiáng)制把它的this綁定到obj上
new綁定在傳統(tǒng)的面向類語言中，使用new初始化類時會調(diào)用類中的構(gòu)造函數(shù)。但是，JavaScript中的構(gòu)造函數(shù)只是使用new操作符時被調(diào)用的函數(shù)。它們并不屬于某個類，也不會實例化一個類。
JavaScript中使用new調(diào)用函數(shù)時，會自動執(zhí)行下面操作
構(gòu)造一個新對象
新對象會被執(zhí)行[[prototype]]連接
新對象會綁定函數(shù)調(diào)用的this
如果函數(shù)沒有返回其他對象，那么new表達(dá)式中的函數(shù)調(diào)用會自動返回這個新對象
判斷this那么我們在判斷函數(shù)在某個調(diào)用位置應(yīng)該應(yīng)用哪條規(guī)則呢，優(yōu)先級如何判斷呢？有下面四條法寶供參考
函數(shù)是否在new中調(diào)用？如果是，則this綁定的是新對象
var bar = new foo()
函數(shù)是否通過call、apply調(diào)用？如果是，則this綁定的是指定對象
var bar = foo.call(obj)
函數(shù)是否在某個上下文對象中調(diào)用？如果是，則this綁定的是上下文對象
var bar = obj.foo()
如果都不是的話，使用默認(rèn)綁定。注意，在嚴(yán)格模式下，就綁定到undefined，否則就綁定到全局對象
var bar = foo()
當(dāng)然，也許會有例外的情況發(fā)生，暫時先留著，大家一起思考一下，看看會在什么情況下出現(xiàn)這種例外情況。
那么，今天就先到這里啦
see u ~ again
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/99220.html
摘要：而閉包卻能阻止這件事情發(fā)生。由于的聲明位置使它擁有涵蓋內(nèi)部作用域的閉包，使得該作用域能夠一直存在，以供在之后進(jìn)行引用。到這里，小菊花課堂之閉包的內(nèi)容就告一段落啦，感謝各位能耐心看到這里。 由于前段時間項目沒有那么忙，然后我這人一天不看點啥就非常焦慮，于是二刷《你不知道的JavaScript》，現(xiàn)在讀到閉包，想著看完這一章節(jié)，寫點東西也是挺好的，所以有了下面的內(nèi)容，如有不對的地方，敬請斧...
摘要：文章來源詳談防抖和節(jié)流輕松理解函數(shù)節(jié)流和函數(shù)防抖函數(shù)防抖和節(jié)流好啦，今天的小菊花課堂之的防抖與節(jié)流的內(nèi)容就告一段落啦，感各位能耐心看到這里。 前言 陸游有一首《冬夜讀書示子聿》——古人學(xué)問無遺力，少壯工夫老始成。紙上得來終覺淺，絕知此事要躬行。，其中的意思想必大家都能明白，在學(xué)習(xí)或工作中，不斷的印證著這首詩的內(nèi)涵。所以，又有了此篇小菊花文章。 詳解 在前端開發(fā)中，我們經(jīng)常會碰到一些會持...
摘要：文章來源詳談防抖和節(jié)流輕松理解函數(shù)節(jié)流和函數(shù)防抖函數(shù)防抖和節(jié)流好啦，今天的小菊花課堂之的防抖與節(jié)流的內(nèi)容就告一段落啦，感各位能耐心看到這里。 前言 陸游有一首《冬夜讀書示子聿》——古人學(xué)問無遺力，少壯工夫老始成。紙上得來終覺淺，絕知此事要躬行。，其中的意思想必大家都能明白，在學(xué)習(xí)或工作中，不斷的印證著這首詩的內(nèi)涵。所以，又有了此篇小菊花文章。 詳解 在前端開發(fā)中，我們經(jīng)常會碰到一些會持...
摘要：前言在我們移動端還有一個很常用的組件，那就是滑動加載更多組件。平常我們看到的很多插件實現(xiàn)相當(dāng)復(fù)雜就覺得這個組件很難，其實不是的這個組件其實可以很簡單的就實現(xiàn)出來，而且體驗也能非常的棒當(dāng)然我們沒有實現(xiàn)下拉刷新功能下面我們就一起來實現(xiàn)這個組件。 前言 在我們移動端還有一個很常用的組件，那就是滑動加載更多組件。平常我們看到的很多插件實現(xiàn)相當(dāng)復(fù)雜就覺得這個組件很難，其實不是的！！這個組件其實可...
閱讀 1014·2021-09-26 09:55
閱讀 3280·2021-09-22 15:36
閱讀 3045·2021-09-04 16:48
閱讀 3229·2021-09-01 11:41
閱讀 2649·2019-08-30 13:49
閱讀 1545·2019-08-29 18:46
閱讀 3598·2019-08-29 17:28
閱讀 3511·2019-08-29 14:11
