JavaScript 中 this 的詳解

cyrils 發布于2019-08-21 15:27 / 2273人閱讀

摘要：作為構造函數調用中沒有類，但是可以從構造器中創建對象，并提供了運算符來進行調用該構造器。構造器的外表跟普通函數一樣，大部分的函數都可以當做構造器使用。如果構造函數顯式的返回一個對象，那么則會指向該對象。

this 的指向

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

1.作為普通函數調用

當函數作為一個普通函數被調用，this 指向全局對象。在瀏覽器里，全局對象就是 window。

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

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

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

2.作為對象的方法調用

當函數作為一個對象里的方法被調用，this 指向該對象

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

obj.getName();              // linxin

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

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

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

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

可以看出，此時的 this 已經跟 obj 沒有任何關系了。這時 fun2 是作為普通函數調用。

3.作為構造函數調用

js中沒有類，但是可以從構造器中創建對象，并提供了 new 運算符來進行調用該構造器。構造器的外表跟普通函數一樣，大部分的函數都可以當做構造器使用。當構造函數被調用時，this 指向了該構造函數實例化出來的對象。

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

如果構造函數顯式的返回一個對象，那么 this 則會指向該對象。

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

如果該函數不用 new 調用，當作普通函數執行，那么 this 依然指向全局對象。

4.call() 或 apply() 調用

通過調用函數的 call() 或 apply() 方法可動態的改變 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

云服務器 GPU云服務器 javascript中this詳解 javascript的this javaScript中的this java中this

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/88193.html

JavaScript深入淺出

摘要：理解的函數基礎要搞好深入淺出原型使用原型模型，雖然這經常被當作缺點提及，但是只要善于運用，其實基于原型的繼承模型比傳統的類繼承還要強大。中文指南基本操作指南二繼續熟悉的幾對方法，包括，，。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。怎樣使用 this 因為本人屬于偽前端，因此文中只看懂了 8 成左右，希望能夠給大家帶來幫助....（據說是阿里的前端妹子寫的） this 的值到底...

blair 2019-08-21 18:26 評論0 收藏0
JavaScript之this對象詳解

摘要：再來看一個小的示例淘寶騰訊淘寶為什么輸出的依然是淘寶呢調用的是對象中的方法，方法里面有一個定時器，而定時器的一個參數是這里的指的就是的對象，然后方法里面有調用了，但是定時器中的指的是對象，所以最終調用的是對象中。 1.看前熱身看一段代碼 var name = javascript; var obj = { name:js, foo:f...

Integ 2019-08-22 13:56 評論0 收藏0
javaScript原型及原型鏈詳解（二）

摘要：當然這還沒完，因為我們還有重要的一步沒完成，沒錯就是上面的第行代碼，如果沒有這行代碼實例中的指針是指向構造函數的，這樣顯然是不對的，因為正常情況下應該指向它的構造函數，因此我們需要手動更改使重新指向對象。第一節內容：javaScript原型及原型鏈詳解（二）第一節中我們介紹了javascript中的原型和原型鏈，這一節我們來講利用原型和原型鏈我們可以做些什么。普通對象的繼承 ...

widuu 2019-08-20 16:37 評論0 收藏0
JavaScript 中 apply 、call 的詳解

摘要：參數和是放在數組中傳入函數，分別對應參數的列表元素。而原函數中的并沒有被改變，依舊指向全局對象。保存原函數保存需要綁定的上下文剩余的參數轉為數組返回一個新函數下一篇介紹閉包中閉包的詳解。 apply 和 call 的區別 ECMAScript 規范給所有函數都定義了 call 與 apply 兩個方法，它們的應用非常廣泛，它們的作用也是一模一樣，只是傳參的形式有區別而已。 apply(...

Meils 2019-08-21 15:27 評論0 收藏0
JavaScript隊列數據結構詳解

　　今天我們講講JavaScript隊列數據結構詳解。什么是隊列？　　隊列是一種先進先出的數據結構，隊列有兩種操作：插入和刪除；入隊和出隊。簡單來說就是允許插入的一端稱為隊尾、允許刪除的一端稱為隊頭；　　如下圖展示了棧這個數據結構：　　JavaScript中的隊列　　要知道JavaScript中沒有有關隊列的數據模型，因此我們需要通過數組進行模擬，當數組中提供的push()和shift()選...

3403771864 2022-09-21 22:28 評論0 收藏0