JavaScript 中 this 的詳解

cyrils 發(fā)布于2019-08-21 15:27 / 2267人閱讀

摘要：作為構(gòu)造函數(shù)調(diào)用中沒有類，但是可以從構(gòu)造器中創(chuàng)建對象，并提供了運算符來進(jìn)行調(diào)用該構(gòu)造器。構(gòu)造器的外表跟普通函數(shù)一樣，大部分的函數(shù)都可以當(dāng)做構(gòu)造器使用。如果構(gòu)造函數(shù)顯式的返回一個對象，那么則會指向該對象。

this 的指向

this 是 js 中定義的關(guān)鍵字，它自動定義于每一個函數(shù)域內(nèi)，但是它的指向卻讓人很迷惑。在實際應(yīng)用中，this 的指向大致可以分為以下四種情況。

1.作為普通函數(shù)調(diào)用

當(dāng)函數(shù)作為一個普通函數(shù)被調(diào)用，this 指向全局對象。在瀏覽器里，全局對象就是 window。

window.name = "linxin";
function getName(){
    console.log(this.name);
}
getName();                   // linxin

可以看出，此時 this 指向了全局對象 window。
在ECMAScript5的嚴(yán)格模式下，這種情況 this 已經(jīng)被規(guī)定不會指向全局對象了，而是 undefined。

"use strict";
function fun(){
    console.log(this);
}
fun();                      // undefined

2.作為對象的方法調(diào)用

當(dāng)函數(shù)作為一個對象里的方法被調(diào)用，this 指向該對象

var obj = {
    name : "linxin",
    getName : function(){
        console.log(this.name);
    }
}

obj.getName();              // linxin

如果把對象的方法賦值給一個變量，再調(diào)用這個變量：

var obj = {
    fun1 : function(){
        console.log(this);
    }
}
var fun2 = obj.fun1;
fun2();                     // window

此時調(diào)用 fun2 方法輸出了 window 對象，說明此時 this 指向了全局對象。給 fun2 賦值，其實是相當(dāng)于：

var fun2 = function(){
    console.log(this);
}

可以看出，此時的 this 已經(jīng)跟 obj 沒有任何關(guān)系了。這時 fun2 是作為普通函數(shù)調(diào)用。

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

js中沒有類，但是可以從構(gòu)造器中創(chuàng)建對象，并提供了 new 運算符來進(jìn)行調(diào)用該構(gòu)造器。構(gòu)造器的外表跟普通函數(shù)一樣，大部分的函數(shù)都可以當(dāng)做構(gòu)造器使用。當(dāng)構(gòu)造函數(shù)被調(diào)用時，this 指向了該構(gòu)造函數(shù)實例化出來的對象。

var Person = function(){
    this.name = "linxin";
}
var obj = new Person();
console.log(obj.name);      // linxin

如果構(gòu)造函數(shù)顯式的返回一個對象，那么 this 則會指向該對象。

var Person = function(){
    this.name = "linxin";
    return {
        name : "linshuai"
    }
}
var obj = new Person();
console.log(obj.name);      // linshuai

如果該函數(shù)不用 new 調(diào)用，當(dāng)作普通函數(shù)執(zhí)行，那么 this 依然指向全局對象。

4.call() 或 apply() 調(diào)用

通過調(diào)用函數(shù)的 call() 或 apply() 方法可動態(tài)的改變 this 的指向。

var obj1 = {
    name : "linxin",
    getName : function(){
        console.log(this.name);
    }
}
var obj2 = {
    name : "linshuai"
}

obj1.getName();             // linxin
obj1.getName.call(obj2);    // linshuai
obj1.getName.apply(obj2);   // linshuai

這兩個方法在js中都是非常常用的方法，可以閱讀下一篇：javascript 中 apply 、call 的詳解。

更多文章：lin-xin/blog