在JavaScript中，this關(guān)鍵字是動(dòng)態(tài)綁定的，或稱為運(yùn)行期綁定，這極大地增強(qiáng)的我們程序的靈活性，同時(shí)也給初學(xué)者帶來了很多困惑。本文總結(jié)了this的幾個(gè)使用場(chǎng)景和常見誤區(qū)。

全局環(huán)境

在全局環(huán)境中使用 this ，它會(huì)指向全局對(duì)象。在web游覽器中，也就是window對(duì)象。

alert(this === window); // true

函數(shù)調(diào)用

當(dāng)作為普通函數(shù)被調(diào)用時(shí)，函數(shù)內(nèi)部的的 this 也會(huì)指向全局對(duì)象

var name = "window";function sayName(){var name = "fun";alert(this.name); }sayName(); // "window"

作為對(duì)象的方法調(diào)用

當(dāng)作為對(duì)象內(nèi)部的方法被調(diào)用時(shí)，這里 this 指向這個(gè)方法所在的對(duì)象。

var name = "window";var obj = {name: "obj",sayName: function(){alert(this.name);} };obj.sayName(); // "obj"

作為構(gòu)造函數(shù)調(diào)用

JavaScript 中的構(gòu)造函數(shù)很特殊，如果不使用 new 調(diào)用，則和普通函數(shù)一樣。作為又一項(xiàng)約定俗成的準(zhǔn)則，構(gòu)造函數(shù)以大寫字母開頭，提醒調(diào)用者使用正確的方式調(diào)用。如果調(diào)用正確， this 綁定到新創(chuàng)建的對(duì)象上。

function Person(name){this.name = name,this.sayName = function(){alert(this.name);} }var person1 = new Person("daoko"); person1.sayName(); // "darko"

apply和call調(diào)用

apply 和 call 是函數(shù)對(duì)象的的兩個(gè)方法，它們可以修改函數(shù)執(zhí)行的上下文環(huán)境，即 this 綁定的對(duì)象。 apply 和 call 的第一個(gè)參數(shù)就是this綁定的對(duì)象，若 apply 和 call 的參數(shù)為空，則默認(rèn)調(diào)用全局對(duì)象。

var name = "window"var obj = {name: "object" }function sayName(){alert(this.name); }sayName(); // 直接調(diào)用函數(shù)sayName sayName.call(obj); // 用call方法修改this的指向 sayName.call(); // 當(dāng)call方法的參數(shù)為空時(shí)，默認(rèn)調(diào)用全局對(duì)象

特殊情況

常見錯(cuò)誤

我們首先來看這樣一個(gè)栗子：

var name = "window";var obj = {name: "obj",sayName: function(){var test = function(){alert(this.name); // this綁定到全局對(duì)象上 }test();} }obj.sayName(); // "window"

是不是和上面說的 作為對(duì)象的方法調(diào)用 情況很像，按照我們的理解此時(shí)的 this 應(yīng)該指向 obj 對(duì)象，但是實(shí)際情況不是這樣的，此時(shí)的 this 指向全局對(duì)象。

這屬于 JavaScript 的設(shè)計(jì)缺陷，正確的設(shè)計(jì)方式是內(nèi)部函數(shù)的 this 應(yīng)該綁定到其外層函數(shù)對(duì)應(yīng)的對(duì)象上，為了規(guī)避這一缺陷，我們可以使用變量替代的方法，約定俗成，該變量一般被命名為 that。 在這個(gè)栗子中，這樣我們創(chuàng)建了一個(gè)局部變量 that 來指向 obj 對(duì)象。

var name = "window";var obj = {name: "obj",sayName: function(){var that = this; // that指向?qū)ο髈bjvar test = function(){alert(that.name);}test();} }obj.sayName(); // "obj"

方法的賦值表達(dá)式

當(dāng)我們把一個(gè)對(duì)象的方法賦值給一個(gè)變量時(shí)，它的 this 會(huì)發(fā)生什么變化呢? 看個(gè)栗子:

var name = "window";var obj = {name: "obj",sayName: function(){alert(this.name);} }var test = obj.sayName; obj.sayName(); // "obj" test(); // "window"

從上面這個(gè)栗子中我們可以看到，當(dāng)把對(duì)象 obj 的方法賦值給一個(gè)新的變量 test 時(shí)，它的this指向發(fā)生了變化， test 就向一個(gè)普通的函數(shù)一樣被調(diào)用，此時(shí)指向全局對(duì)象。

轉(zhuǎn)載于:https://www.cnblogs.com/kevin2016/p/5941303.html

總結(jié)

以上是生活随笔為你收集整理的this对象的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。