JavaScript中this的綁定規則是怎樣的

JavaScript中this的綁定規則是怎樣的，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

對于 JavaScript 新手來說，this 是非常基礎同時也難以理解的知識點。

比如下面的代碼，this 指向就有三種方式。

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

this 就是函數運行時所在的環境對象，它指向運行時所在的位置，而不是定義時的位置。

根據 this 綁定規則，分為下面四種：

1.  默認綁定

2.  隱式綁定

3.  顯式綁定

4.  new 綁定

1. 默認綁定

默認情況下，this 指向全局對象。例如下面的代碼。

var a = 2;  console.log(this.a); // 2  // 在函數中  function foo() {    console.log(this.a);  }  foo(); // 2  // 在回調函數中  function doFoo() {    return function() {      console.log(this.a);    };  }  doFoo()(); // 2

不過，函數在嚴格模式下，this 無法指向全局對象，因此this會綁定到undefined。

function foo() {    "use strict";    console.log(this);  }  foo(); // undefined

2. 隱式綁定

當函數作為方法被調用，需考慮運行時上下文環境。

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

代碼中，foo()前面添加了obj對象的修飾，因此，obj對象就是函數的上下文。

this 會綁定到這個對象上。

另外，需要注意下面三種情況，它們會出現綁定對象丟失，從而把this綁定到全局對象或undefined上。

情況一

這段代碼中，雖然obj.foo()和bar()都指向同一函數，但執行結果并不一樣。

可以理解為，bar()是一個不帶任何修飾的函數調用，等價于直接調用foo()，因此應用了默認綁定。

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

情況二

另一種情況，發生在回調函數中。原理和上面的情況一樣。

修改上面的代碼，obj.foo作為參數傳入doFoo()函數中，實際上，引用的是foo()函數本身，因此應用了默認綁定。

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

情況三

在一些流行的 JavaScript 庫，進行事件處理操作時，回調函數的 this 可能會強制綁定到 DOM 元素上。

這種情況也值得注意。

3. 顯式綁定

JavaScript 提供了call()、apply()和bind()方法，可以強制綁定函數的this對象。

function fn() {    console.log(this.a);  }  fn.call({ a: 3 }); // 3

通過fn.call(obj)，我們將函數運行時，this強制綁定到obj上。

call apply和bind的區別

call 和 apply 改變了函數的 this 上下文后，便執行該函數，而 bind 則是將該函數返回。

function fn() {      console.log(this.a);  }  fn.call({ a: 3 }); // 3  fn.bind({ a: 4 })(); // 4

call和apply的區別

call 和 apply 的區別在于傳入參數不同。

call 方法接收若干個參數列表。

apply 第一個參數和 call 一樣，第二個參數接收一個包含多個參數的數組。

let arr = [2, 5, 9]  console.log(Math.max.call(3, 2, 5, 9))  // 9  console.log(Math.max.call(3, arr))  // NaN  console.log(Math.max.apply(3, arr))  // 9

4. new 綁定

如果使用 new 構造函數，在函數內部，this 指向新創建的對象。

function foo() {    console.log(this);  }  new foo(); // foo {}  foo(); // Window {...}

其他情況

需要忽略的this

若第三方庫的某個函數使用了 this，默認綁定會把this指向全局對象，從而導致不可預測的后果。

一個安全的做法，就是使用顯式綁定，將函數的this指向空對象。

function foo() {    console.log(this);  }  // 創建空對象  var ø = Object.create(null);  // 使用bind()進行柯里化（Curry）  var bar = foo.bind(ø);  bar(); // {}

這方法通常也用于對象初始化，以獲得一個干凈且高度可定制的對象。

箭頭函數

箭頭函數常用于回調函數中。

它會繼承父級作用域 this 綁定的對象，等價于ES6之前self = this的書寫方式。

const people = {      name: "Merry",      sayHi() {          console.log(this.name)      },      wait() {          setTimeout(() => {              console.log(this.name)          })      }  }  people.sayHi() // Merry  people.wait()  // Merry

此外還有軟綁定（softBind），用的不多，了解一下即可。

看完上述內容，你們掌握JavaScript中this的綁定規則是怎樣的的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！