全面理解JavaScript中的this

Pines_Cheng 發布于2019-08-21 17:52 / 2033人閱讀

摘要：與方法這兩個方法的第一個參數是一個對象，是給準備的，接著在調用函數時將其綁定到。作為事件處理函數當函數被用作事件處理函數時，它的會指向觸發事件的元素。總結在任何函數體外部，無論是否在嚴格模式，都指代全局對象。

this在JavaScript中似乎可以視而不見，但不去正視它學到的就只是殘缺的JS。拋開這些“形而上”的意義不說，從實用性及代碼簡潔展示this的不可或缺的地位，舉例子：

function identifyUser () {
  return this.name.toUpperCase();
}

let obj1 = {
  name: leeper;
}

let obj2 = {
  name: Sandman;
}

identifyUser.call(obj1) // -> LEEPER
identifyUser.call(obj2) // -> SANDMAN

如果不使用this，就需要給identifyUser()顯示傳入一個上下文對象，但隨著使用模式的增加，顯示傳遞上下文對象成了”噩夢“，讓代碼也變得越來越混亂。為了將API設計得更加簡潔并易于復用，就必須正視this。

什么是this

如果在任何函數體外部，無論是否在嚴格模式，this都指代全局對象。這里著重討論的是函數體內部的this。JavaScript的this總是指向一個對象，具體指向哪個對象是在運行時基于函數的執行環境動態綁定的，而非函數被聲明時的環境。

調用方式

在函數內部，this的綁定和函數聲明的位置沒有任何關系，只取決于函數的調用方式：

作為普通函數調用

this的值默認指向全局對象：

let a = 233;
function foo () {
  console.log(this.a);
}
foo() // -> 233

但在嚴格模式下，this默認為undefined；

作為對象的方法調用

函數調用時會綁定到上下文對象：

let obj = {
  a: 233,
  foo: foo
};
function foo () {
  console.log(this.a);
}
obj.foo(); // -> 233

對象引用鏈中只有在最后一層調用位置中起作用：

function foo () {
  console.log(this.a);
}
let obj1 = {
  a: 233,
  foo: foo
};
let obj2 = {
  a: 2333,
  obj1: obj1
}
obj2.obj1.foo() // -> 233

bind方法

在講bind之前不得不先提兩種綁定丟失的情況：

// 第一種

function foo () {
  console.log(this.a);
}
var obj = {
  a: 233,
  foo: foo
};
var bar = obj.foo;
var a = "global a";
bar(); // -> "global a"

// 雖然bar是obj.foo的一個引用，但實際上，它引用的foo函數本身，作為普通函數直接調用，非嚴格模式下，this指向全局對象。

// 第二種
function foo () {
  console.log(this.a);
}
var obj = {
  a: 233,
  foo: foo
};
var a = "global a";
function doFn(fn) {
  fn();
}
doFn(obj.foo); // -> "global a"

function foo () {
  console.log(this.a);
}
var obj = {
  a: 233,
  foo: foo
};
var a = "global a";
setTimeout(obj.foo, 0) // -> "global a"

參數傳入的是函數，作為普通函數調用，會導致被傳入的這個函數this綁定丟失，this會指向默認的全局對象。
bind方法可以解決上this綁定丟失的情況：

function foo () {
  console.log(this.a);
}
var obj = {
  a: 233,
  foo: foo
};
var a = "global a";
var bar = foo.bind(obj);
function doFn (fn) {
  fn();
}
doFn(bar); // -> 233

fn.bind(某個對象)會創建一個與fn具有相同函數體和作用域的新函數，在這個新函數中，this將永久地綁定到了bind的第一個參數，無論這個函數如何被調用。

call與apply方法

這兩個方法的第一個參數是一個對象，是給this準備的，接著在調用函數時將其綁定到this。

let obj = {
  a:233
};
function foo () {
  console.log(this.a);
}
foo.call(obj) // -> 233

this綁定角度看，apply方法與call方法，區別在于其他參數上。

作為構造函數調用

使用new來調用函數時，會自動執行下面操作：

- 構造一個全新的對象；
- 構造出的新對象會被執行[[Prototype]]連接；
- 新對象會綁定到函數調用的this;
- 如果函數沒有返回其他對象，那么表達式中的函數調用會自動返回這個新對象。

  function foo (a) {
 this.a = a;
  }
  var bar = new foo(233);
  console.log(bar.a); // -> 233

使用new來調用foo()時，會構造一個新對象并把它綁定到foo()調用中的this上。

作為DOM事件處理函數

當函數被用作事件處理函數時，它的this會指向觸發事件的元素。

箭頭函數

箭頭函數會繼承外層函數調用的this綁定，在全局作用域中則會綁定到全局對象上。

function foo () {
  setTimeout(() => {
    console.log("a", this.a);
    }, 0);
}
var a = "global a";
foo.call({a: 233}); // -> 233

如果是普通函數，執行時this應該指向全局對象，輸出的"global a"，而箭頭函數this繼承它的外層foo函數的this綁定，由于使用call方法將foo函數的this綁定指向{a: 233}，所以輸出233。

根據優先級判斷常見this

函數是否在new中調用？如果是的話，this綁定的是新創建的對象；

函數是否通過call, apply或者bind綁定調用？如果是，this綁定的是指定的對象；

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

如果都不是，考慮是否是默認綁定，綁定到全局對象。如果是在嚴格模式下，則綁定到undefined。

總結

在任何函數體外部，無論是否在嚴格模式，this都指代全局對象。

在函數內部，this的綁定和函數聲明的位置沒有任何關系，只取決于函數的調用方式。

箭頭函數會繼承外層函數調用的this綁定，在全局作用域中則會綁定到全局對象上。

云服務器 GPU云服務器 javaScript中的this 全面理解 js中的this js中的this機制

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

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

【進階1-1期】理解JavaScript 中的執行上下文和執行棧

摘要：首次運行代碼時，會創建一個全局執行上下文并到當前的執行棧中。執行上下文的創建執行上下文分兩個階段創建創建階段執行階段創建階段確定的值，也被稱為。（關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）本周正式開始前端進階的第一期，本周的主題是調用堆棧，，今天是第一天本計劃一共28期，每期重點攻克一個面試重難點，如果你還不了解本進...

import. 2019-08-23 13:46 評論0 收藏0
前端開發周報: CSS 布局方式與JavaScript數據結構和算法

摘要：如果沒有學習過計算機科學的程序員，當我們在處理一些問題時，比較熟悉的數據結構就是數組，數組無疑是一個很好的選擇。 showImg(https://segmentfault.com/img/bVTSjt?w=400&h=300); 1、常見 CSS 布局方式詳見：一些常見的 CSS 布局方式梳理，涉及 Flex 布局、Grid 布局、圣杯布局、雙飛翼布局等。http://cherryb...

huhud 2019-08-20 18:59 評論0 收藏0
前端開發周報: CSS 布局方式與JavaScript數據結構和算法

摘要：如果沒有學習過計算機科學的程序員，當我們在處理一些問題時，比較熟悉的數據結構就是數組，數組無疑是一個很好的選擇。 showImg(https://segmentfault.com/img/bVTSjt?w=400&h=300); 1、常見 CSS 布局方式詳見：一些常見的 CSS 布局方式梳理，涉及 Flex 布局、Grid 布局、圣杯布局、雙飛翼布局等。http://cherryb...

?xiaoxiao, 2019-08-29 13:16 評論0 收藏0
全面解析JS中的this

摘要：當我們不想再對象內部間接包含引用函數，而像在某個對象上強制調用函數。我們可以用中內置的和的方法來實現，這兩個方法的第一個參數是一個對象，是給準備的，接著再調用函數時將其綁定到。 this是什么在javascript中，每個執行上下文可以抽象成一組對象showImg(https://segmentfault.com/img/bVuKR7); 而this是與執行上下文相關的特殊對象，任何...

calx 2019-08-20 18:59 評論0 收藏0