JavaScript中this的用法

本篇內容介紹了“JavaScript中this的用法”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

JavaScript的this和Java等面向對象語言中的this大不一樣，bind()、call()和apply()函數更是將this的靈活度進一步延伸。

全局對象 (Global Object)

打開Chrome瀏覽器開發者面板(Windows: Ctrl + Shift + J)(Mac: Cmd + Option + J)，并且輸入:

console.log(this);

看看輸出了什么？

// Window {}

window對象！ 因為在全局作用域下，this指向全局對象。在瀏覽器中全局對象就是window對象。
為了讓你更加清楚理解為什么this會指向window對象，我們來看另外一個例子：

var myName = 'Brandon';
我們可以通過在控制臺輸入myName來訪問其值：

myName
// 輸出 'Brandon'

其實，所有在全局定義的變量都綁定到window對象。我們來做如下測試：

window.myName
// 輸出 'Brandon'
window.myName === myName
// 輸出 true

現在我們將this放到函數內部，看看有何效果。

function test(){
 return this;
}
test();

你會發現this依然指向全局的window對象。因為this關鍵字沒有處于一個聲明的對象內部，默認指向全局window對象。這一點可能對于大部分初學者來說有點難以理解。當讀完這篇文章，你就會豁然開朗。
注意：如果在strcit模式下，上面的例子中this為undefined。

聲明的對象 (Declared Object)

當this關鍵字在一個聲明對象內部使用，其值會被綁定到調用該this的函數的最近的父對象。我們用例子來說明這個問題：

var person = {
 first: 'John',
 last: 'Smith', 
 full: function() {
  console.log(this.first + ' ' + this.last);
 }
};
person.full();
// 輸出 'John Smith'

在被聲明的對象person中的full函數里面使用了this, 那么調用this的full函數的最近的父對象就是person, 因此，this指向person。

為了更好的描述this實際上是指向person對象的，你可以拷貝如下代碼到瀏覽器控制臺，將this打印出來。

var person = {
 first: 'John',
 last: 'Smith', 
 full: function() {
  console.log(this);
 }
};
person.full();
// 輸出 Object {first: "John", last: "Smith", full: function}

我們接下來看一個更復雜的例子：

var person = {
 first: 'John',
 last: 'Smith',
 full: function() {
  console.log(this.first + ' ' + this.last);
 },
 personTwo: {
  first: 'Allison',
  last: 'Jones',
  full: function() {
   console.log(this.first + ' ' + this.last);
  }
 }
};

在這里我們有嵌套的對象，在這個時候，this分別指向誰呢？ 我們將其打印出來看一看：

person.full();
// 輸出 'John Smith'
person.personTwo.full();
// 輸出 'Allison Jones'

你會發現滿足我們前面所描述的規則：其值會被綁定到調用this的函數的最近的父對象。

new關鍵字

當使用new關鍵字構建一個新的對象，this會綁定到這個新對象。我們來看一個例子：

function Car(make, model) {
 this.make = make;
 this.model = model;
};

根據第一條規則，你可能會推斷this指向全局對象。但是如果我們使用new關鍵字來聲明一個新的變量，Car函數中的this將會綁定一個新的空對象，然后初始化this.make和this.model的值。

var myCar = new Car('Ford', 'Escape');
console.log(myCar);
// 輸出 Car {make: "Ford", model: "Escape"}

call, bind, 和apply

我們可以顯示的在call()，bind()，apply()中設置this的綁定對象。這三個函數很類似，但是我們需要注意它們微小的區別。

<!-- call可以接收任意個數的參數，其中第一個必須是一個this對象，其余依次是所有的參數。 -->

我們來看一個例子：

function add(c, d) {
 console.log(this.a + this.b + c + d);
}
add(3,4);
// 輸出 NaN

add函數輸出NaN, 因為this.a和this.b未定義。

現在我們引入對象，并且使用call()和apply()來調用：

function add(c, d) {
 console.log(this.a + this.b + c + d);
}
var ten = {a: 1, b: 2};
add.call(ten, 3, 4);
// 輸出 10
add.apply(ten, [3,4]);
// 輸出 10

當我們使用add.call()，第一個參數是this需要綁定的對象，剩下的是add函數本來的參數。
因此，this.a指向ten.a,this.b指向ten.b。add.apply()也類似，除了第二個參數是一個數組，用于存儲add函數的參數。

bind()函數和call()類似，但是bind()函數不會立即被調用。bind()函數會返回一個函數，并且將this綁定好。接下來我們來用例子來幫助理解bind()函數的應用場景：

var small = {
 a: 1,
 go: function(b,c,d){
  console.log(this.a+b+c+d);
 }
}
var large = {
 a: 100
}

執行:

small.go(2, 3, 4);
// 輸出 10

如果我們想使用large.a的值，而不是small.a呢？ 我們可以使用call/apply:

small.go.call(large, 2, 3, 4);
// 輸出 109

但是，如果我們現在還不知道這三個參數應該傳入什么值，應該怎么辦呢？ 我們可以使用bind:

var bindTest = small.go.bind(large, 2);


如果我們將bindTest在控制臺下打印出來，我們會看到：

console.log(bindTest);
// 輸出 function (b,c,d){console.log(this.a+b+c+d);}

注意：該函數已經將this綁定到large對象，并且傳入了第一個參數b。所以，我們接下來是需要傳入余下的參數即可：

bindTest(3, 4);
// 輸出 109

“JavaScript中this的用法”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！