this

JavaScript的函數(shù)內(nèi)部如果調(diào)用了this，那么這個(gè)this到底指向誰？

答案是，視情況而定！

如果以對(duì)象的方法形式調(diào)用，比如xiaoming.age()，該函數(shù)的this指向被調(diào)用的對(duì)象，也就是xiaoming，這是符合我們預(yù)期的。

如果單獨(dú)調(diào)用函數(shù)，比如getAge()，此時(shí)，該函數(shù)的this指向全局對(duì)象，也就是window。

坑爹啊！ 更坑爹的是，如果這么寫：

var fn = xiaoming.age; // 先拿到xiaoming的age函數(shù) fn(); // NaN

也是不行的！要保證this指向正確，必須用obj.xxx()的形式調(diào)用！

由于這是一個(gè)巨大的設(shè)計(jì)錯(cuò)誤，要想糾正可沒那么簡(jiǎn)單。ECMA決定，在strict模式下讓函數(shù)的this指向undefined，因此，在strict模式下，你會(huì)得到一個(gè)錯(cuò)誤：

'use strict';var xiaoming = {name: '小明',birth: 1990,age: function () {var y = new Date().getFullYear();return y - this.birth;} };var fn = xiaoming.age; fn(); // Uncaught TypeError: Cannot read property 'birth' of undefined

這個(gè)決定只是讓錯(cuò)誤及時(shí)暴露出來，并沒有解決this應(yīng)該指向的正確位置。

有些時(shí)候，喜歡重構(gòu)的你把方法重構(gòu)了一下：

'use strict';var xiaoming = {name: '小明',birth: 1990,age: function () {function getAgeFromBirth() {var y = new Date().getFullYear();return y - this.birth;}return getAgeFromBirth();} };

xiaoming.age(); // Uncaught TypeError: Cannot read property 'birth' of undefined

結(jié)果又報(bào)錯(cuò)了！原因是this指針只在age方法的函數(shù)內(nèi)指向xiaoming，在函數(shù)內(nèi)部定義的函數(shù)，this又指向undefined了！（在非strict模式下，它重新指向全局對(duì)象window！）

修復(fù)的辦法也不是沒有，我們用一個(gè)that變量首先捕獲this：

'use strict';var xiaoming = {name: '小明',birth: 1990,age: function () {var that = this; // 在方法內(nèi)部一開始就捕獲thisfunction getAgeFromBirth() {var y = new Date().getFullYear();return y - that.birth; // 用that而不是this}return getAgeFromBirth();} };xiaoming.age(); // 25

用var that = this;，你就可以放心地在方法內(nèi)部定義其他函數(shù)，而不是把所有語句都堆到一個(gè)方法中。

apply

雖然在一個(gè)獨(dú)立的函數(shù)調(diào)用中，根據(jù)是否是strict模式，this指向undefined或window，不過，我們還是可以控制this的指向的！

要指定函數(shù)的this指向哪個(gè)對(duì)象，可以用函數(shù)本身的apply方法，它接收兩個(gè)參數(shù)，第一個(gè)參數(shù)就是需要綁定的this變量，第二個(gè)參數(shù)是Array，表示函數(shù)本身的參數(shù)。

用apply修復(fù)getAge()調(diào)用：

function getAge() {var y = new Date().getFullYear();return y - this.birth; }var xiaoming = {name: '小明',birth: 1990,age: getAge };xiaoming.age(); // 25 getAge.apply(xiaoming, []); // 25, this指向xiaoming, 參數(shù)為空

另一個(gè)與apply()類似的方法是call()，唯一區(qū)別是：

apply()把參數(shù)打包成Array再傳入；

call()把參數(shù)按順序傳入。

比如調(diào)用Math.max(3, 5, 4)，分別用apply()和call()實(shí)現(xiàn)如下：

Math.max.apply(null, [3, 5, 4]); // 5 Math.max.call(null, 3, 5, 4); // 5

對(duì)普通函數(shù)調(diào)用，我們通常把this綁定為null。

裝飾器

利用apply()，我們還可以動(dòng)態(tài)改變函數(shù)的行為。

JavaScript的所有對(duì)象都是動(dòng)態(tài)的，即使內(nèi)置的函數(shù)，我們也可以重新指向新的函數(shù)。

現(xiàn)在假定我們想統(tǒng)計(jì)一下代碼一共調(diào)用了多少次parseInt()，可以把所有的調(diào)用都找出來，然后手動(dòng)加上count += 1，不過這樣做太傻了。最佳方案是用我們自己的函數(shù)替換掉默認(rèn)的parseInt()：

var count = 0; var oldParseInt = parseInt; // 保存原函數(shù)window.parseInt = function () {count += 1;return oldParseInt.apply(null, arguments); // 調(diào)用原函數(shù) };// 測(cè)試: parseInt('10'); parseInt('20'); parseInt('30'); count; // 3

---

轉(zhuǎn)載于:https://www.cnblogs.com/zi-xing/p/9502866.html

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

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

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