JavaScript 中 this 的詳解

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

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

this 的指向

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

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

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

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

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

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

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

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

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

obj.getName();              // linxin

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

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

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

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

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

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

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

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

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

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 依然指向全局對(duì)象。

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

通過(guò)調(diào)用函數(shù)的 call() 或 apply() 方法可動(dòng)態(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

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

更多文章：lin-xin/blog