關於JS中this作為方法調用？

01-04

在學習JS時遇到了下面這段代碼：
運行結果為後面注釋，百度上告訴我這是this作為方法被調用，但是有一些不解。以下是本人猜想：
①o.sayColor=sayColor;
這行代碼意思是「相當於給o對象新添加一個名為sayColor的屬性，屬性的值為sayColor函數」？
②o.sayColor();

這是把o對象的sayColor屬性當作方法調用的嗎？
為了證實②的猜想，我在想，是不是上面的sayColor();這段代碼也是被當作某個對象的方法來調用的，而毫無疑問，sayColor();的對象是window。
於是，我把sayColor();改為window.sayColor();，得到的結果和sayColor()的結果相同。不知道是不是驗證了②的猜想。
另外，我在搜索關於this的調用方法時，看到一句話：this指的是包含它的函數作為方法被調用時所屬的對象。
結合好幾個例子，我發現這句話的確挺有道理，不知道各位大神怎麼認為？
以上就是我的全部問題，主要是希望有大神幫我驗證。。。

PS:①本人剛接觸JS沒多久，可能提出的問題比較小白，望見諒。
②代碼出自《JS高程3》，P114。
鞠躬，不勝感激！

window.sayColor()的時候this是window

o.sayColor()的時候this是o

在瀏覽器裡面，當你沒有明確指定this是誰的時候，this就是window。

再加上

window.color == "red"

o.color == "blue"

這也沒什麼難以理解的。

實例化的對象中，this指的是對象本身；未實例化中，this指的是實際調用者的對象。

算是一種比較簡便的判斷this含義的思路。

關於你的猜想，現階段的確可以這麼理解。即：o對象執行了一個獲取該對象color屬性值的方法。

如果只針對你說的這兩句話，樓上很多答案都有說過原因了。

對應規範裡面的解釋，正好你這個問題就是我在根治JavaScript中的this-ECMAScript規範解讀 - leon lee的文章 - 知乎專欄文章實戰篇中對應的兩種情況：

foo();
foo.bar();

如果你希望刨根知底，一勞永逸，可以再去看看這篇文章，正如 @魯小夫所說，這篇文章裡面遠不能覆蓋到this的方方面面，但是如果你能學到如何從規範中尋找答案，以後這種問題就都能自己搞定了。

這個案例中，或許用 this 指向中的就近原則來解釋可能會更好一點。

在對象方法中的 this，this 的綁定只受最靠近的成員引用的影響，總結就是就近原則。

舉個非嚴格模式下的栗子：

function sayNmae() { console.log(this.name); } let obj = { aa: { name: "aa", sayNmae: sayNmae, bb: { name: "bb", sayNmae: sayNmae, cc: { name: "cc", sayNmae: sayNmae } } } };

obj.aa.sayNmae(); // aa obj.aa.bb.sayNmae(); // bb obj.aa.bb.cc.sayNmae(); // cc

不知道這麼說題主理解沒有。

剛好最近寫了一篇博客：不愛吃西紅柿的魚的博客

防炸預警。

絕大部分都是來自this - JavaScript | MDN,只做了點微小的工作，謝謝大家。

lz如果能深入了解下JS引擎就能有點理解了

JS代碼在運行時需要設置

1. 全局執行棧(ECStack)用數組表示和全局執行環境(EC)，並將EC壓棧

2. 全局對象GO(主要是系統內置的對象如String,Number等)

GO = {

String: {},

...,

window: this

}

3. 創建於EC關聯的全局變數對象(VO)，它有指針指向GO，同時包含全局變數和函數的定義

注意函數定義時其內部的[[Scope]]屬性指向其定義所在的執行環境

則ECStack = [

EC(G) = {

VO(G):{

GO,

o: {color:true},

sayColor : function sayColor() {...},

sayColor[[Scope]]: this//this為VO(G)

}

]

執行函數sayColor()

1.創建函數執行環境EC(sayColor)並將其壓入ECStack(此時處於棧頂）

2.創建函數sayColor的作用域鏈(prototype鏈)用於查找變數等標識符，初始化為當前函數[[Scope]]所指向對象

3.創建函數活動對象AO(sayColor) 包含函數中變數或函數定義(處理方式同全局方式3)並插入作用域鏈頂端

此時ECStack = [

EC(sayColor) = {

[[Scope]]: VO(G),

AO(sayColor): {

arguments:[],

this:window

scopeChain: &

EC(G): {

...

}

]

可以發現此時this為window對象

對於o.sayColor()注意其this指向o對象本身

總結一條就是this指向函數調用棧的次一級(最低為全局(瀏覽器內是window)對象)

如果改為

function test(fn) {

return fn();

}

test(o.sayColor);//red

lz可以試一下，注意test()在調用結束後會從ECStack刪除

因而在運行o.sayColor()之前調用棧為ECStack = [EC(sayColor), EV(G)]，

其this指向window

其實判斷「this指的是什麼」有四個規則，分別是new Binding、explicit binding、implicit binding和default binding。而這裡用到最後兩種隱式綁定（優先順序第三）和默認綁定（優先順序最低）。

o.sayColor()由於被o調用，所以this指向o。

window.sayColor()同o.sayColor()，this指向window。

這兩個都是隱式綁定，this指向調用該函數的對象。

而sayColor()由於沒有隱式綁定，所以默認綁定規則生效，簡單來說，在非strict模式下這裡this指全局對象，strict模式下為undefined。

隱式綁定有個地方要注意的，就是上面說到o.sayColor()輸出為blue，但是如果是使用var say = o.sayColor; say(); 的話，那輸出就是red了。

此外的Explicit binding則是由call和apply等指定this具體的指代對象。優先順序排第二。有趣的是一旦通過這層綁定，後續再調用this也會指向剛才指定的對象。

而最高的就是new binding了。通過new產生的對象自動綁定this到該對象身上，如果沒有特殊處理的話。

this還有其他很多內容。總之，this非常有趣！

謝邀。

this 是 JS 中最複雜的內容，涉及到函數、函數調用、eval 、call/apply/bind、基本包裝類型、構造函數實例化、嚴格模式等等方方面面，蔚為大觀。

而 ES6 引入的 arrow function 和 class 更是把 this 複雜化了。

昨天我看到 @leon lee 為此寫了一篇專欄，雖然內容很好，但依然沒能覆蓋到關於 this 的方方面面。

根治JavaScript中的this-ECMAScript規範解讀 - leon lee的文章 - 知乎專欄

網上關於 this 的文章也是千千萬萬，其中不乏錯漏之處。

就是開車多年的老司機，也難免在關於 this 的一些邊邊角角上翻車。

所以在這個問題上，我已經不指望能靠教程、科普把初學者掰過來了，我也不推薦任何此類文章。

我的建議就是，先啃完《JavaScript 高級程序設計》（第三版），英文版風味更佳，把 ES3、ES5 中的內容消化掉，再看看 ES6 in depth，這就差不多了。

初學者要想紮實地掌握 JS ，除了看權威和全面一點的書之外，沒有捷徑。

在基礎不紮實的情況下，去看那些水平層次不齊的網文和博客都只會擾亂你的思考，而直接去看規範又是千頭萬緒、細密繁瑣。

只能等《JavaScript 高級程序設計》更新第四版，把 ES 後續的內容補足，可能會有一個全面的梳理。