不再彷徨：完全弄懂JavaScript中的this（譯文總結(jié)）

YanceyOfficial 發(fā)布于2019-08-21 10:56 / 1510人閱讀

摘要：至于，其只是以數(shù)組的方傳入?yún)?shù)，其它部分是一樣的，如下它們也可用于在中的類繼承中，調(diào)用父級構(gòu)造器。間接調(diào)用，調(diào)用了父級構(gòu)造器對比方法和，它倆都立即執(zhí)行了函數(shù)，而函數(shù)返回了一個新方法，綁定了預先指定好的，并可以延后調(diào)用。

其實this是一個老生常談的問題了。關(guān)于this的文章非常多，其實我本以為自己早弄明白了它，不過昨天在做項目的過程中，還是出現(xiàn)了一絲疑惑，想到大概之前在JavaScript weekly里收藏待看的一篇詳解this的文章（后有鏈接，也附上了稀土上的中文譯文）和另一篇一位前輩推薦的文章，就把它們看了看，對this的認識確實提升了一些。

JavaScript 中的’this‘是動態(tài)的，它在函數(shù)運行時被確定而非在函數(shù)聲明時被確定。所有的函數(shù)都可以調(diào)用"this"，這無關(guān)于該函數(shù)是否屬于某個對象。關(guān)于this，主要有以下四種情況。

1.被當做對象的方法被調(diào)用

如果該函數(shù)是被當做某一個對象的方法，那么該函數(shù)的this指向該對象；

    var john = {
      firstName: "John"
    }
    function func() {
      alert(this.firstName + ": hi!")
    }
    john.sayHi = func
    john.sayHi()  // this = john

這里有一點值得注意，當一個對象的方法被取出來賦值給一個變量時，該方法變?yōu)楹瘮?shù)觸發(fā)，this指向window或underfind（嚴格模式）。

2.函數(shù)之內(nèi)調(diào)用

當函數(shù)中有 this，其實就意味著它被當做方法調(diào)用，之間調(diào)用相當于把他當做window對象的方法，this指向window，值得注意的是ES5其實是規(guī)定這種情況this=undefined的，只瀏覽器大多還是按照老的方法執(zhí)行(本人在最新版的Chrome，Safari，F(xiàn)irefox中測試都指向window（201607）),在火狐下使用嚴格模式指向undefined；

    func()
    function func() {
        alert(this) // [object Window] or [object global] or kind of..
    }

為了傳遞this，()之前應該為引用類型，類似于obj.a 或者 obj["a"],不能是別的了。

這里還存在一個小坑，當對象的方法中還存在函數(shù)時，該函數(shù)其實是當做函數(shù)模式觸發(fā)，所以其this默認為window（嚴格模式下為undefined）解決辦法是給該函數(shù)綁定this。

var numbers = {  
   numberA: 5,
   numberB: 10,
   sum: function() {
     console.log(this === numbers); // => true
     function calculate() {
       // this is window or undefined in strict mode
       console.log(this === numbers); // => false
       return this.numberA + this.numberB;
     }
     return calculate();
   }
};
numbers.sum(); // => NaN or throws TypeError in strict mode

var numbers = {  
   numberA: 5,
   numberB: 10,
   sum: function() {
     console.log(this === numbers); // => true
     function calculate() {
       console.log(this === numbers); // => true
       return this.numberA + this.numberB;
     }
     // use .call() method to modify the context
     return calculate.call(this);
   }
};
numbers.sum(); // => 15

3.在new中調(diào)用

一個引用對象的變量實際上保存了對該對象的引用，也就是說變量實際保存的是對真實數(shù)據(jù)的一個指針。
使用new關(guān)鍵字時this的改變其實有以下幾步：

創(chuàng)建 this = {}.

new執(zhí)行的過程中可能改變this，然后添加屬性和方法；

返回被改變的this.

    function Animal(name) {
        this.name = name
        this.canWalk = true
    }
    var animal = new Animal("beastie")
    alert(animal.name)

需要注意的是如果構(gòu)造函數(shù)返回一個對象，那么this指向返回的那個對象；

    function Animal() {
        this.name = "Mousie";
        this.age = "18";
        return {
            name: "Godzilla"
        } // <-- will be returned
    }

    var animal = new Animal()
    console.log(animal.name) // Godzilla
    console.log(animal.age)//undefined

這里需要注意的是不要忘記使用new，否則不會創(chuàng)建一個新的函數(shù)。而是只是執(zhí)行了函數(shù)，相當于函數(shù)調(diào)用，this其實指向window

function Vehicle(type, wheelsCount) {  
  this.type = type;
  this.wheelsCount = wheelsCount;
  return this;
}
// Function invocation
var car = Vehicle("Car", 4);  
car.type;       // => "Car"  
car.wheelsCount // => 4  
car === window  // => true

4.明確調(diào)用this，使用call和apply

這是最具JavaScript特色的地方。
如下代碼：

  func.call(obj, arg1, arg2,...)

第一個參數(shù)將作為this的指代對象，之后的參數(shù)將被作為函數(shù)的參數(shù)，解決方法是使用bind。

function Animal(type, legs) {  
  this.type = type;
  this.legs = legs;  
  this.logInfo = function() {
    console.log(this === myCat); // => true
    console.log("The " + this.type + " has " + this.legs + " legs");
  };
}
var myCat = new Animal("Cat", 4);  
// logs "The Cat has 4 legs"
setTimeout(myCat.logInfo.bind(myCat), 1000); 
// setTimeout??

  var john = {
    firstName: "John",
    surname: "Smith"
  }
  function func(a, b) {
    alert( this[a] + " " + this[b] )
  }
  func.call(john, "firstName", "surname")  // "John Smith"

至于apply，其只是以數(shù)組的方傳入?yún)?shù)，其它部分是一樣的，如下:

  func.call(john, "firstName", "surname")
  func.apply(john, ["firstName", "surname"])

它們也可用于在 ES5 中的類繼承中，調(diào)用父級構(gòu)造器。

    function Runner(name) {  
      console.log(this instanceof Rabbit); // => true
      this.name = name;  
    }
    function Rabbit(name, countLegs) {  
      console.log(this instanceof Rabbit); // => true
      // 間接調(diào)用，調(diào)用了父級構(gòu)造器
      Runner.call(this, name);
      this.countLegs = countLegs;
    }
    var myRabbit = new Rabbit("White Rabbit", 4);  
    myRabbit; // { name: "White Rabbit", countLegs: 4 }

5..bind()

對比方法 .apply() 和 .call()，它倆都立即執(zhí)行了函數(shù)，而 .bind() 函數(shù)返回了一個新方法，綁定了預先指定好的 this ，并可以延后調(diào)用。
.bind() 方法的作用是創(chuàng)建一個新的函數(shù)，執(zhí)行時的上下文環(huán)境為 .bind() 傳遞的第一個參數(shù)，它允許創(chuàng)建預先設(shè)置好 this 的函數(shù)。

var numbers = {  
  array: [3, 5, 10],
  getNumbers: function() {
    return this.array;    
  }
};
// Create a bound function
var boundGetNumbers = numbers.getNumbers.bind(numbers);  
boundGetNumbers(); // => [3, 5, 10]  
// Extract method from object
var simpleGetNumbers = numbers.getNumbers;  
simpleGetNumbers(); // => undefined or throws an error in strict mode

使用.bind()時應該注意，.bind() 創(chuàng)建了一個永恒的上下文鏈并不可修改。一個綁定函數(shù)即使使用 .call() 或者 .apply()傳入其他不同的上下文環(huán)境，也不會更改它之前連接的上下文環(huán)境，重新綁定也不會起任何作用。
只有在構(gòu)造器調(diào)用時，綁定函數(shù)可以改變上下文，然而這并不是特別推薦的做法。

6.箭頭函數(shù)

箭頭函數(shù)并不創(chuàng)建它自身執(zhí)行的上下文，使得 this 取決于它在定義時的外部函數(shù)。
箭頭函數(shù)一次綁定上下文后便不可更改，即使使用了上下文更改的方法：

    var numbers = [1, 2];  
    (function() {  
      var get = () => {
        console.log(this === numbers); // => true
        return this;
      };
      console.log(this === numbers); // => true
      get(); // => [1, 2]
      // 箭頭函數(shù)使用 .apply() 和 .call()
      get.call([0]);  // => [1, 2]
      get.apply([0]); // => [1, 2]
      // Bind
      get.bind([0])(); // => [1, 2]
    }).call(numbers);

這是因為箭頭函數(shù)擁有靜態(tài)的上下文環(huán)境，不會因為不同的調(diào)用而改變。因此不要使用箭頭函數(shù)定義方法

function Period (hours, minutes) {  
      this.hours = hours;
      this.minutes = minutes;
    }
    Period.prototype.format = () => {  
      console.log(this === window); // => true
      return this.hours + " hours and " + this.minutes + " minutes";
    };
    var walkPeriod = new Period(2, 30);  
    walkPeriod.format(); // => "undefined hours and undefined minutes"

參考

Four scents of "this"

Gentle explanation of "this" keyword in JavaScript

JavaScript This 之謎(譯文)

強烈推薦覺得沒弄明白的同學看看上面三篇文章，其中第三篇是第二篇的譯文。如果大家對this還有疑問，也歡迎大家一起討論，交流促進思考，共同進步。

云服務(wù)器 GPU云服務(wù)器 javaScript中的this js中的this js中的this機制 js中的this與html

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

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

發(fā)表評論

登陸后可評論

0條評論

YanceyOfficial

男|高級講師

我要關(guān)注我要私信

TA的文章

Datawhale刷題LeetCode

閱讀 1115·2021-11-16 11:45
C語言：深度刨析數(shù)據(jù)在內(nèi)存中的存儲——浮點型數(shù)據(jù)

閱讀 3134·2021-10-13 09:40
JavaScript 轉(zhuǎn)換數(shù)字為整數(shù)的方法

閱讀 723·2019-08-26 13:45
我為 VS Code 開發(fā)了一個 Deno 插件

閱讀 1222·2019-08-26 13:32
JSON 格式

閱讀 2181·2019-08-26 13:23
Generator：JS執(zhí)行權(quán)的真實操作者

閱讀 920·2019-08-26 12:16
正則基礎(chǔ)詳解

閱讀 2832·2019-08-26 11:37
前端面試每日3+1——第109天

閱讀 1763·2019-08-26 10:32

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

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

不再彷徨：完全弄懂JavaScript中的this（譯文總結(jié)）

相關(guān)文章

前端點滴

JavaScript深入淺出

正在失業(yè)中的《課多周刊》(第3期)

正在失業(yè)中的《課多周刊》(第3期)

發(fā)表評論

0條評論

YanceyOfficial

男|高級講師

TA的文章

Datawhale刷題LeetCode

C語言：深度刨析數(shù)據(jù)在內(nèi)存中的存儲——浮點型數(shù)據(jù)

JavaScript 轉(zhuǎn)換數(shù)字為整數(shù)的方法

我為 VS Code 開發(fā)了一個 Deno 插件

JSON 格式

Generator：JS執(zhí)行權(quán)的真實操作者

正則基礎(chǔ)詳解

前端面試每日3+1——第109天

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

不再彷徨：完全弄懂JavaScript中的this（譯文總結(jié)）

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！