本篇內(nèi)容介紹了“JavaScript中this的用法”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì)、澗西網(wǎng)絡(luò)推廣、成都小程序開(kāi)發(fā)、澗西網(wǎng)絡(luò)營(yíng)銷、澗西企業(yè)策劃、澗西品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供澗西建站搭建服務(wù)，24小時(shí)服務(wù)熱線：13518219792，官方網(wǎng)址：www.cdcxhl.com

JavaScript的this和Java等面向?qū)ο笳Z(yǔ)言中的this大不一樣，bind()、call()和apply()函數(shù)更是將this的靈活度進(jìn)一步延伸。

全局對(duì)象 (Global Object)

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

console.log(this);

看看輸出了什么？

// Window {}

window對(duì)象！ 因?yàn)樵谌肿饔糜蛳?，this指向全局對(duì)象。在瀏覽器中全局對(duì)象就是window對(duì)象。
為了讓你更加清楚理解為什么this會(huì)指向window對(duì)象，我們來(lái)看另外一個(gè)例子：

var myName = 'Brandon';
我們可以通過(guò)在控制臺(tái)輸入myName來(lái)訪問(wèn)其值：

myName
// 輸出 'Brandon'

其實(shí)，所有在全局定義的變量都綁定到window對(duì)象。我們來(lái)做如下測(cè)試：

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

現(xiàn)在我們將this放到函數(shù)內(nèi)部，看看有何效果。

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

你會(huì)發(fā)現(xiàn)this依然指向全局的window對(duì)象。因?yàn)閠his關(guān)鍵字沒(méi)有處于一個(gè)聲明的對(duì)象內(nèi)部，默認(rèn)指向全局window對(duì)象。這一點(diǎn)可能對(duì)于大部分初學(xué)者來(lái)說(shuō)有點(diǎn)難以理解。當(dāng)讀完這篇文章，你就會(huì)豁然開(kāi)朗。
注意：如果在strcit模式下，上面的例子中this為undefined。

聲明的對(duì)象 (Declared Object)

當(dāng)this關(guān)鍵字在一個(gè)聲明對(duì)象內(nèi)部使用，其值會(huì)被綁定到調(diào)用該this的函數(shù)的最近的父對(duì)象。我們用例子來(lái)說(shuō)明這個(gè)問(wèn)題：

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

在被聲明的對(duì)象person中的full函數(shù)里面使用了this, 那么調(diào)用this的full函數(shù)的最近的父對(duì)象就是person, 因此，this指向person。

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

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

我們接下來(lái)看一個(gè)更復(fù)雜的例子：

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);
  }
 }
};

在這里我們有嵌套的對(duì)象，在這個(gè)時(shí)候，this分別指向誰(shuí)呢？ 我們將其打印出來(lái)看一看：

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

你會(huì)發(fā)現(xiàn)滿足我們前面所描述的規(guī)則：其值會(huì)被綁定到調(diào)用this的函數(shù)的最近的父對(duì)象。

new關(guān)鍵字

當(dāng)使用new關(guān)鍵字構(gòu)建一個(gè)新的對(duì)象，this會(huì)綁定到這個(gè)新對(duì)象。我們來(lái)看一個(gè)例子：

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

根據(jù)第一條規(guī)則，你可能會(huì)推斷this指向全局對(duì)象。但是如果我們使用new關(guān)鍵字來(lái)聲明一個(gè)新的變量，Car函數(shù)中的this將會(huì)綁定一個(gè)新的空對(duì)象，然后初始化this.make和this.model的值。

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

call, bind, 和apply

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

我們來(lái)看一個(gè)例子：

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

add函數(shù)輸出NaN, 因?yàn)閠his.a和this.b未定義。

現(xiàn)在我們引入對(duì)象，并且使用call()和apply()來(lái)調(diào)用：

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

當(dāng)我們使用add.call()，第一個(gè)參數(shù)是this需要綁定的對(duì)象，剩下的是add函數(shù)本來(lái)的參數(shù)。
因此，this.a指向ten.a,this.b指向ten.b。add.apply()也類似，除了第二個(gè)參數(shù)是一個(gè)數(shù)組，用于存儲(chǔ)add函數(shù)的參數(shù)。

bind()函數(shù)和call()類似，但是bind()函數(shù)不會(huì)立即被調(diào)用。bind()函數(shù)會(huì)返回一個(gè)函數(shù)，并且將this綁定好。接下來(lái)我們來(lái)用例子來(lái)幫助理解bind()函數(shù)的應(yīng)用場(chǎng)景：

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

執(zhí)行:

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

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

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

但是，如果我們現(xiàn)在還不知道這三個(gè)參數(shù)應(yīng)該傳入什么值，應(yīng)該怎么辦呢？ 我們可以使用bind:

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


如果我們將bindTest在控制臺(tái)下打印出來(lái)，我們會(huì)看到：

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

注意：該函數(shù)已經(jīng)將this綁定到large對(duì)象，并且傳入了第一個(gè)參數(shù)b。所以，我們接下來(lái)是需要傳入余下的參數(shù)即可：

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

“JavaScript中this的用法”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！