JavaScript之撲朔迷離的this

JavaScript · 發表 2019-03-17 13:54:00

摘要： JavaScript這門語言中，最令人迷惑的地方有三個，閉包、this、原型。針對大多數人，可以利用詞法作用域等避開this的坑，但是我們不能一直生活在舒適區，要敢於打破砂鍋問到底，對我們來說也是一種提升。一、一般對this關鍵字的誤解： 1、 this指向函式自身 2、 ...

JavaScript這門語言中，最令人迷惑的地方有三個，閉包、this、原型。針對大多數人，可以利用詞法作用域等避開this的坑，但是我們不能一直生活在舒適區，要敢於打破砂鍋問到底，對我們來說也是一種提升。

一、一般對this關鍵字的誤解：

1、 this指向函式自身

2、 this指向函式詞法作用域

我們可以看以下一段程式碼：

 1 function test() {
 2test.a = 1;
 3this.a = 2;
 4console.log(test.a);
 5console.log(this.a);
 6console.log(test.a === this.a);
 7}
 8 
 9test();
10console.dir(test);

在上面這段程式碼中，我們在全域性宣告一個方法test,給test中的a屬性賦值1，當前方法中的this中的a屬性賦值2，加入this指向函式自身，那麼test.a === this,a並且都等於2.

下面我們來看下這段程式碼的執行結果：

從上可以看出，scopes為全域性作用域window，this也指向這裡，雖然函式本身也是一個物件，但是this並不指向這裡。

有一點我們一定要記住， this是在執行時進行繫結的，並不是在編寫時繫結的，它的上下文取決於函式呼叫時的各種條件。this的繫結和函式宣告的位置沒有任何關係，只取決於函式的呼叫方式。

既然this是在執行時繫結的，那我們有沒有辦法改變當前this的繫結，使其不指向window，而指向方法test呢？答案是肯定的，我們可以藉助一些強制繫結方法，如 call、apply、bind 來改變this的指向，我們可以將程式碼改成下面這種方式：

 1 function test() {
 2test.a = 1;
 3this.a = 2;
 4console.log(test.a);
 5console.log(this.a);
 6console.log(test.a === this.a);
 7}
 8 
 9test.call(test);
10console.dir(test);

執行結果如下：

接下來我們看下this是否指向函式的詞法作用域，以下有段比較有意思的程式碼：

 1 function parent() {
 2var a = 2;
 3 
 4function child() {
 5console.log(this.a)
 6}
 7child();
 8 
 9}
10parent();

假如this指向函式的詞法作用域，那麼child方法中的this.a應該是存在，實際上的執行結果如下：

實際上，在JavaScript內部，作用域確實和物件類似，可見的識別符號都是它的屬性。但是作用域“物件”無法通過JavaScript程式碼訪問，它存在JavaScript引擎內部。所以每當你想要把this和詞法作用域的查詢混合使用時，一定要提醒自己，這是無法實現的。

二、this的繫結規則

this的繫結規則大致分為以下幾類：

2.1 預設繫結

2.2 隱式繫結

2.3 顯式繫結

2.4 new繫結

2.1 預設繫結

上述示例中this的指向是指向window的，他們都有一個共同的特徵，不帶任何修飾的函式引用進行呼叫的，因此只能使用預設繫結，無法應用其他規則

2.2 隱式繫結

隱式繫結首先需要考慮的規則就是呼叫位置是否有上下文物件，或者說是否被某個物件擁有或包含，例如：

這裡的this就是指向物件obj。還有類似一些DOM事件的繫結，document.getElementById('xxx').addEventListener('click', function(){xxx});回撥方法中的this是指向選擇器選中的元素的。這種情況下可以簡單的理解為this指向呼叫方法.前面的那個物件。

2.3 顯式繫結

顯示繫結在開發過程中運用的比較多，藉助於這些顯式繫結方法，可以直接改變當前方法的this指向，使得js語言非常的靈活。主要有call、apply和bind三種，基本使用如下：

 1function sum() {
 2console.log(this.a + this.b);
 3}
 4var obj1 = {
 5a: 1,
 6b: 2
 7};
 8var test = sum.bind(obj1);
 9sum.call(obj1); //3
10sum.apply(obj1); //3
11test(); //3

注意事項：

call && apply第一個引數接受的是this物件，call第二個引數以後可以接受字串形式的引數，apply接受的是一個類陣列/陣列引數

將null || undefined作為this的繫結物件傳入call/apply/bind時，這些值在呼叫時會被忽略，實際應用的是預設繫結規則

2.4 new繫結

JavaScript語言中的new操作符和其他面嚮物件語言中的new操作符不大一樣，因為在JavaScript中沒有物件的概念。所有的函式都可以使用new來呼叫，new的呼叫又稱為建構函式呼叫。在建構函式呼叫過程中，會自動執行下面的操作。

1、建立（或者說構造）一個全新的物件

2、這個物件會被執行[[Prototype]]連線

3、這個新物件會繫結到函式呼叫的this

4、如果函式沒有返回其他物件，那麼new表示式中的函式呼叫會自動返回這個新物件

建構函式也是js中常用的一種設計模式，如以下程式碼：

 1 function Test(a, b) {
 2this.a = a;
 3this.b = b;
 4this.add = function() {
 5debugger;
 6console.log(this.a + this.b);
 7}
 8}
 9var cc = new Test(1, 2);
10cc.add();
11console.log(cc);

在new呼叫過程中，返回了一個新物件，並且該物件的this指向Test；

如有問題，煩請及時指出，謝謝！

JavaScript之撲朔迷離的this

您可能也會喜歡…