首頁»JavaScript»JavaScript 的 this 指向問題深度解析

JavaScript 的 this 指向問題深度解析

來源:邊城 發布時間:2017-02-20 閱讀次數:

  JavaScript 中的 this 指向問題有很多博客在解釋,仍然有很多人問。

  與我們常見的很多語言不同,JavaScript 函數中的 this 指向并不是在函數定義的時候確定的,而是在調用的時候確定的。換句話說,函數的調用方式決定了 this 指向。

  JavaScript 中,普通的函數調用方式有三種:直接調用、方法調用和 new 調用。除此之外,還有一些特殊的調用方式,比如通過 bind() 將函數綁定到對象之后再進行調用、通過 call()、apply() 進行調用等。而 es6 引入了箭頭函數之后,箭頭函數調用時,其 this 指向又有所不同。下面就來分析這些情況下的 this 指向。

 直接調用

  直接調用,就是通過 函數名(...) 這種方式調用。這時候,函數內部的 this 指向全局對象,在瀏覽器中全局對象是 window,在 NodeJs 中全局對象是 global。

  來看一個例子:

// 簡單兼容瀏覽器和 NodeJs 的全局對象
const _global = typeof window === "undefined" ? global : window;

function test() {
    console.log(this === _global);    // true
}

test();    // 直接調用

  這里需要注意的一點是,直接調用并不是指在全局作用域下進行調用,在任何作用域下,直接通過 函數名(...) 來對函數進行調用的方式,都稱為直接調用。比如下面這個例子也是直接調用

(function(_global) {
    // 通過 IIFE 限定作用域

    function test() {
        console.log(this === _global);  // true
    }

    test();     // 非全局作用域下的直接調用
})(typeof window === "undefined" ? global : window);

  bind() 對直接調用的影響

  還有一點需要注意的是 bind() 的影響。Function.prototype.bind() 的作用是將當前函數與指定的對象綁定,并返回一個新函數,這個新函數無論以什么樣的方式調用,其 this 始終指向綁定的對象。還是來看例子:

const obj = {};

function test() {
    console.log(this === obj);
}

const testObj = test.bind(obj);
test();     // false
testObj();  // true

  那么 bind() 干了啥?不妨模擬一個 bind() 來了解它是如何做到對 this 產生影響的。

const obj = {};

function test() {
    console.log(this === obj);
}

// 自定義的函數,模擬 bind() 對 this 的影響
function myBind(func, target) {
    return function() {
        return func.apply(target, arguments);
    };
}

const testObj = myBind(test, obj);
test();     // false
testObj();  // true

  從上面的示例可以看到,首先,通過閉包,保持了 target,即綁定的對象;然后在調用函數的時候,對原函數使用了 apply 方法來指定函數的 this。當然原生的 bind() 實現可能會不同,而且更高效。但這個示例說明了 bind() 的可行性。

  call 和 apply 對 this 的影響

  上面的示例中用到了 Function.prototype.apply(),與之類似的還有 Function.prototype.call()。這兩方法的用法請大家自己通過鏈接去看文檔。不過,它們的第一個參數都是指定函數運行時其中的 this 指向。

  不過使用 apply 和 call 的時候仍然需要注意,如果目錄函數本身是一個綁定了 this 對象的函數,那 apply 和 call 不會像預期那樣執行,比如

const obj = {};

function test() {
    console.log(this === obj);
}

// 綁定到一個新對象,而不是 obj
const testObj = test.bind({});
test.apply(obj);    // true

// 期望 this 是 obj,即輸出 true
// 但是因為 testObj 綁定了不是 obj 的對象,所以會輸出 false
testObj.apply(obj); // false

  由此可見,bind() 對函數的影響是深遠的,慎用!

 方法調用

  方法調用是指通過對象來調用其方法函數,它是 對象.方法函數(...) 這樣的調用形式。這種情況下,函數中的 this 指向調用該方法的對象。但是,同樣需要注意 bind() 的影響。

const obj = {
    // 第一種方式,定義對象的時候定義其方法
    test() {
        console.log(this === obj);
    }
};

// 第二種方式,對象定義好之后為其附加一個方法(函數表達式)
obj.test2 = function() {
    console.log(this === obj);
};

// 第三種方式和第二種方式原理相同
// 是對象定義好之后為其附加一個方法(函數定義)
function t() {
    console.log(this === obj);
}
obj.test3 = t;

// 這也是為對象附加一個方法函數
// 但是這個函數綁定了一個不是 obj 的其它對象
obj.test4 = (function() {
    console.log(this === obj);
}).bind({});

obj.test();     // true
obj.test2();    // true
obj.test3();    // true

// 受 bind() 影響,test4 中的 this 指向不是 obj
obj.test4();    // false

  這里需要注意的是,后三種方式都是預定定義函數,再將其附加給 obj 對象作為其方法。再次強調,函數內部的 this 指向與定義無關,受調用方式的影響。

  方法中 this 指向全局對象的情況

  注意這里說的是方法中而不是方法調用中。方法中的 this 指向全局對象,如果不是因為 bind(),那就一定是因為不是用的方法調用方式,比如

const obj = {
    test() {
        console.log(this === obj);
    }
};

const t = obj.test;
t();    // false

  t 就是 obj 的 test 方法,但是 t() 調用時,其中的 this 指向了全局。

  之所以要特別提出這種情況,主要是因為常常將一個對象方法作為回調傳遞給某個函數之后,卻發現運行結果與預期不符——因為忽略了調用方式對 this 的影響。比如下面的例子是在頁面中對某些事情進行封裝之后特別容易遇到的問題:

class Handlers {
    // 這里 $button 假設是一個指向某個按鈕的 jQuery 對象
    constructor(data, $button) {
        this.data = data;
        $button.on("click", this.onButtonClick);
    }

    onButtonClick(e) {
        console.log(this.data);
    }
}

const handlers = new Handlers("string data", $("#someButton"));
// 對 #someButton 進行點擊操作之后
// 輸出 undefined
// 但預期是輸出 string data

  很顯然 this.onButtonClick 作為一個參數傳入 on() 之后,事件觸發時,是對這個函數進行的直接調用,而不是方法調用,所以其中的 this 會指向全局對象。要解決這個問題有很多種方法

// 這是在 es5 中的解決辦法之一
var _this = this;
$button.on("click", function() {
    _this.onButtonClick();
});

// 也可以通過 bind() 來解決
$button.on("click", this.onButtonClick.bind(this));

// es6 中可以通過箭頭函數來處理,在 jQuery 中慎用
$button.on("click", e => this.onButtonClick(e));

  不過請注意,將箭頭函數用作 jQuery 的回調時造成要小心函數內對 this 的使用。jQuery 大多數回調函數(非箭頭函數)中的 this 都是表示調用目標,所以可以寫 $(this).text() 這樣的語句,但 jQuery 無法改變箭頭函數的 this 指向,同樣的語句語義完全不同。

 new 調用

  在 es6 之前,每一個函數都可以當作是構造函數,通過 new 調用來產生新的對象(函數內無特定返回值的情況下)。而 es6 改變了這種狀態,雖然 class 定義的類用 typeof 運算符得到的仍然是 "function",但它不能像普通函數一樣直接調用;同時,class 中定義的方法函數,也不能當作構造函數用 new 來調用。

  而在 es5 中,用 new 調用一個構造函數,會創建一個新對象,而其中的 this 就指向這個新對象。這沒有什么懸念,因為 new 本身就是設計來創建新對象的。

var data = "Hi";    // 全局變量

function AClass(data) {
    this.data = data;
}

var a = new AClass("Hello World");
console.log(a.data);    // Hello World
console.log(data);      // Hi

var b = new AClass("Hello World");
console.log(a === b);   // false

 箭頭函數中的 this

  先來看看 MDN 上對箭頭函數的說明

An arrow function expression has a shorter syntax than a function expression and does not bind its own this, arguments, super, or new.target. Arrow functions are always anonymous. These function expressions are best suited for non-method functions, and they cannot be used as constructors.

  這里已經清楚了說明了,箭頭函數沒有自己的 this 綁定。箭頭函數中使用的 this,其實是直接包含它的那個函數或函數表達式中的 this。比如

const obj = {
    test() {
        const arrow = () => {
            // 這里的 this 是 test() 中的 this,
            // 由 test() 的調用方式決定
            console.log(this === obj);
        };
        arrow();
    },

    getArrow() {
        return () => {
            // 這里的 this 是 getArrow() 中的 this,
            // 由 getArrow() 的調用方式決定
            console.log(this === obj);
        };
    }
};

obj.test();     // true

const arrow = obj.getArrow();
arrow();        // true

  示例中的兩個 this 都是由箭頭函數的直接外層函數(方法)決定的,而方法函數中的 this 是由其調用方式決定的。上例的調用方式都是方法調用,所以 this 都指向方法調用的對象,即 obj。

  箭頭函數讓大家在使用閉包的時候不需要太糾結 this,不需要通過像 _this 這樣的局部變量來臨時引用 this 給閉包函數使用。來看一段 Babel 對箭頭函數的轉譯可能能加深理解:

// ES6
const obj = {
    getArrow() {
        return () => {
            console.log(this === obj);
        };
    }
}    
// ES5,由 Babel 轉譯
var obj = {
    getArrow: function getArrow() {
        var _this = this;
        return function () {
            console.log(_this === obj);
        };
    }
};

  另外需要注意的是,箭頭函數不能用 new 調用,不能 bind() 到某個對象(雖然 bind() 方法調用沒問題,但是不會產生預期效果)。不管在什么情況下使用箭頭函數,它本身是沒有綁定 this 的,它用的是直接外層函數(即包含它的最近的一層函數或函數表達式)綁定的 this。

QQ群:WEB開發者官方群(515171538),驗證消息:10000
微信群:加小編微信 849023636 邀請您加入,驗證消息:10000
提示:更多精彩內容關注微信公眾號:全棧開發者中心(fsder-com)
網友評論(共1條評論) 正在載入評論......
理智評論文明上網,拒絕惡意謾罵 發表評論 / 共1條評論
登錄會員中心
分分中彩票app 樟树市| 澳门| 永丰县| 海晏县| 乌拉特中旗| 阳朔县| 清远市| 安顺市| 神池县| 丹东市| 延边| 米林县| 枞阳县| 庐江县| 日喀则市| 武夷山市| 南和县| 永城市| 新兴县| 志丹县| 九龙县| 荥阳市| 九龙城区| 安陆市| 甘南县| 定日县| 买车| 克东县| 扎鲁特旗| 屯留县| 体育| 辽宁省| 云龙县| 金堂县| 天峻县| 乌什县| 颍上县| 巴塘县|