小菊花課堂之JavaScript關于this

CHENGKANG 發布于2019-08-23 13:07 / 3127人閱讀

摘要：另外，的綁定和函數聲明的位置沒有任何關系，之取決于函數的調用方式。請看下面代碼這樣，我們就可以在調用的時候強制把它的綁定到上綁定在傳統的面向類語言中，使用初始化類時會調用類中的構造函數。

關于this

上一章我們講了關于作用域和閉包的相關知識，現在開始新一輪的學習，那就是JavaScript中最復雜的機制之一---this關鍵字。它是一個很特別的關鍵字，被自動定義在所有函數的作用域中。另外我們需要明確的一點就是，this在任何情況下都不指向函數的詞法作用域。

那么我們來看看this到底是怎么樣的機制。this是在運行時進行綁定的，它的上下文取決于函數調用時的各種條件。另外，this的綁定和函數聲明的位置沒有任何關系，之取決于函數的調用方式。

this的四條綁定規則 默認綁定

默認綁定就是最常用的獨立函數調用時所綁定的。思考一下代碼

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

我們可以看到，當調用foo()時，this.a被解析成了全局變量a。
但是，如果使用嚴格模式，那么就不能將全局對象用于默認綁定，報錯TypeError:this is undefined

隱式綁定

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

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

這段代碼中，當foo()被調用時，前面加上了對obj的引用。當函數引用有上下文對象時，隱式綁定規則會把函數調用中的this綁定到這個上下文對象。另外，對象屬性引用鏈中只有上一層或者說最后一層在調用位置中起作用。也就是說，this永遠都是指向最近調用的位置。

顯式綁定

前面說了隱式綁定的概念，那么我們如果不想在對象內部包含函數引用，而想在某個對象上強制調用函數，該如何做呢？
JavaScript中提供了兩個方法，分別是call()和apply()，那么我們應該怎么在實際中運用呢？
首先我們要搞清楚call()和apply()的作用，這里引用MDN上的解釋:

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

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

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

這樣，我們就可以在調用foo的時候強制把它的this綁定到obj上

new綁定

在傳統的面向類語言中，使用new初始化類時會調用類中的構造函數。但是，JavaScript中的構造函數只是使用new操作符時被調用的函數。它們并不屬于某個類，也不會實例化一個類。
JavaScript中使用new調用函數時，會自動執行下面操作

構造一個新對象

新對象會被執行[[prototype]]連接

新對象會綁定函數調用的this

如果函數沒有返回其他對象，那么new表達式中的函數調用會自動返回這個新對象

判斷this

那么我們在判斷函數在某個調用位置應該應用哪條規則呢，優先級如何判斷呢？有下面四條法寶供參考

函數是否在new中調用？如果是，則this綁定的是新對象
var bar = new foo()

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

函數是否在某個上下文對象中調用？如果是，則this綁定的是上下文對象
var bar = obj.foo()

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

當然，也許會有例外的情況發生，暫時先留著，大家一起思考一下，看看會在什么情況下出現這種例外情況。

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/99220.html

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

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

lunaticf 2019-08-23 12:36 評論0 收藏0
小菊花課堂之JS的防抖與節流

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

leoperfect 2019-08-23 13:53 評論0 收藏0
小菊花課堂之JS的防抖與節流

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

Yangder 2019-08-02 12:10 評論0 收藏0
干貨--手把手擼vue移動UI框架：滑動加載

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

Harpsichord1207 2019-08-22 15:17 評論0 收藏0