JavaScript的this

周國輝發布于2019-08-20 17:21 / 3295人閱讀

摘要：里，的值隨著一個函數被調用情況的不同而不同。作為構造函數被調用指用關鍵字進行調用生成一個對象實例子的情況，這時候生成的實例對象在我們用調用一個構造函數時，發生了三件事創建了一個新的空對象。在第一步創建的這個空對象作為傳給這個構造函數。

在JavaScript被調用的時候，除了可見的行參被傳入方法體之外，this也被隱形地傳進去了。所以，從這點也再次說明JavaScript的this的值完全取決于函數被調用時候的上下文，而不是像java的this是在聲明的時候確定的。
JavaScript里，this的值隨著一個函數被調用情況的不同而不同。而一個函數有4種被調用的情況，也就是說this的值有4種，那先來看看有哪四種調用函數的方法：

1: 作為方法被調用
當一個函數被賦給一個對象的屬性，并引用該屬性進行調用時，this === the object

var func = function(){
    return this.a;
}
var obj = {
    a: 10,
    name: "hehe",
    fn: func
}
this.a = 20;
obj.fn();//10

當我們執行到func時，在右邊的調試工具欄可以看到this是我們的obj這個對象。

2: 作為一個函數被調用
只最常用的用（）進行調用的情況，這時候this === Window
先來看一段代碼：

var func = function(){
    var a = 10;
    return this.a;
}

var a = 20;
func();//結果是20而不是10

當我們執行到func時，這時候的this是全局對象Window,那this.a自然就是全局變量a(20),而不是定義在func內部的a(10)。
其實第二種情況是第一種情況的特例，這里的對象是全局對象Window,這個方法是在Window上調用的，那this自然也就是Window了。

3: 作為構造函數被調用
指用new關鍵字進行調用生成一個對象實例子的情況，這時候this === 生成的實例對象

function Fruit(){
   this.func = function(){return this}
}
var apple = new Fruit();
var orange = new Fruit();

apple.func() === apple; //true
orange.func() === orange; // ture

在我們用new調用一個構造函數時，發生了三件事：

 1: 創建了一個新的空對象。
 2: 在第一步創建的這個空對象作為this傳給這個構造函數。 (每一個函數被調用時，都隱式地傳入一個this)
 3: 如果沒有顯示的返回值，新創建的這個對象，就會作為構造器函數的返回值進行返回。

第三點解釋了為什么我們可以在apple上調用func這個方法，第二點解釋了為什么appl.func()的執行結果等于apple.

4: 使用apply()和call()方法進行調用

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

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

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

JavaScript深入淺出

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

blair 2019-08-21 18:26 評論0 收藏0
javascript技術難點（三）之this、new、apply和call詳解

摘要：第四點也要著重講下，記住構造函數被操作，要讓正常作用最好不能在構造函數里 4) this、new、call和apply的相關問題講解this指針的原理是個很復雜的問題，如果我們從javascript里this的實現機制來說明this，很多朋友可能會越來越糊涂，因此本篇打算換一個思路從應用的角度來講解this指針，從這個角度理解this指針更加有現實意義。下面我們看看在ja...

ghnor 2019-08-21 10:27 評論0 收藏0
JavaScript進階之’this‘

摘要：所以相同點是，在全局范圍內，全局變量終究是屬于老大的。只生效一次引入了。只生效一次在箭頭函數中，與封閉詞法環境的保持一致。我通常把這些原始函數叫做構造函數。在里面你可以嵌套函數，也就是你可以在函數里面定義函數。 showImg(https://img-blog.csdnimg.cn/20190522000008399.jpg?x-oss-process=image/watermark,...

shenhualong 2019-08-23 18:37 評論0 收藏0
Javascript 深入淺出This

摘要：中函數的調用有以下幾種方式作為對象方法調用，作為函數調用，作為構造函數調用，和使用或調用。作為構造函數調用中的構造函數也很特殊，構造函數，其實就是通過這個函數生成一個新對象，這時候的就會指向這個新對象如果不使用調用，則和普通函數一樣。 this 是 JavaScript 比較特殊的關鍵字，本文將深入淺出的分析其在不同情況下的含義，可以這樣說，正確掌握了 JavaScript 中的 th...

Y3G 2019-08-22 10:48 評論0 收藏0
學習React之前你需要知道的的JavaScript基礎知識

摘要：和類在開始時遇到類組件，只是需要有關類的基礎。畢竟，中的條件呈現僅再次顯示大多數是而不是特定的任何內容。在我的研討會期間，更多的材料是關于JavaScript而不是React。其中大部分歸結為JavaScript ES6以及功能和語法，但也包括三元運算符，語言中的簡寫版本，此對象，JavaScript內置函數（map，reduce，filter）或更常識性的概念，如：可組合性，可重用...

bitkylin 2019-08-02 11:01 評論0 收藏0