JavaScript之this釋疑，javascript釋疑

JavaScript之this釋疑，javascript釋疑

最近進修JavaScript，看了“You Don't Know JS”這本書，覺得是本JavaScript內功上乘心法，有一定JavaScript基礎朋友一定要看看(不推薦入門小朋友看，怕走火入魔)。作者知識淵博，理解透徹，行文流暢，案例經典，絕對的大神級人物。

本文將對書中關於JavaScript中this的講述做一個小結，也會加入一些自己的理解。算是拋磚，以期引玉。

JavaScript裡面this到底是什嗎？

this是一個標誌符，指向某一個對象或者undefined。

JavaScript是什嗎？一門程式設計語言；程式設計語言幹嘛的？編寫代碼；為啥編寫代碼？執行代碼，命令電腦處理事情。好了，寫好的JavaScript代碼是用來執行的，並且JavaScript Engine會指定一個執行環境(Execution Environment)。執行環境很複雜，簡單來說，可以理解為一個執行資料容器(JavaScript裡面可以叫作對象)。JavaScript的代碼(一系列的語句)會在兩個地方執行，全域地區，以及函數(Function)內部。

this就是執行環境裡面的一個屬性(Property)，指向執行所針對的某一個對象。

為了描述清楚this和執行環境的關係，簡單來說，可以表述如下:

Executor_Environment = {invoke_stack:[statck1, statck2, ...],params: [param1, param2, ...],scope_chain:[scop1, scope2, ...],this: execute_ object,...}

繼續追問下去。this指向的對象又是什嗎？函數調用的時候，this指向的對象是函數執行的上下文，一個目標對象，是運行時由JavaScript Engine動態綁定的。

函數裡面this的4種情境

函數裡面this的綁定情況有4種，下面將逐一介紹。原書作者強調某些情境下四種情況可能會有某兩個或者三個都適用，需要排列效用的強度大小，這一點，我不太贊同，我覺得還是都可以歸併到某一種情境的。

new關鍵字

JavaScript裡面new關鍵字後接一個Function調用，會新建立一個對象，執行Function的時候，JavaScript Engine會把新建立的對象賦值給this，即此時this指向新建立的對象。下面給出兩個例子:

new例子1:

function Func1(){this.a = 3;}var a1 = new Func1();console.log(a1.a); // 3

new例子2:

function Func2(){this.a = 3;return {};}var a2 = new Func2();console.log(a2.a); // undefined

後面的例子是想說，如果Function裡面有return語句，那麼new語句新建立的對象會被丟棄!

call和apply

call和apply的作用就是強行指定Function裡面this所應該指向的對象。

call的一個小例子:

function sayHi(){console.log("Hi,"+ this.name);}var p = {name:"Kevin", age: 26};sayHi.call(p);

作為對象的屬性調用

這裡有兩層意思，Function是對象的一個屬性，通過對象來訪問Function並立即調用。這種情況下，Function裡面的this指向該對象。

例子:

function sayHi(){console.log("Hi,"+ this.name);}var p = {name:"Kevin", age: 26, hi: sayHi};p.hi();

直接調用Function

通過Function的名字，直接調用Function，通常JavaScript Engine會把Global綁定給this。瀏覽器裡面Global是window。不過據說"use strict"情況下，this指向undefined(嚴格來說undefined在JavaScript裡面不是對象)。

Function直接調用的小例子:

function sayHi(){console.log("Hi,"+ this.name);console.log(this);}var name = "Just Joke";sayHi(); // output：Hi, Just Joke// followed global object, which contain name, sayHi。

全域地區裡面的this代表什麼

說實話，我只是猜測。全域地區的語句也需要一個執行環境，該執行環境也有一個this標誌符，指向Global對象。瀏覽器裡面就是window。這一點“You Don't Know JS”原書中沒有提及。

全域地區輸入以下代碼試試:

var name = "James";console.log("I am "+ this.name); // I am James

參考連結

You Don't Know JS

教解釋一個對於javascript中this的函數

“通俗易懂些”說說我的理解。
js函數是一種對象。
new關鍵字可以將一個函數對象執行個體化為一個新的對象。
被執行個體化後，來源物件內的this將指向這個新的對象，否則如沒有用new執行個體化則this指向預設的頂層對象window。
如Test()和new Test()兩者的區別：前者僅僅執行一次，this指向window，後者不僅執行一次而且返回一個新的對象，執行個體化進行時其this指向一個空的對象（在記憶體中），還沒給在個this所指對象添加aa屬性時alert(this.aa)是undefined。this.aa = 22; 給了這個對象增加了aa屬性，所以第二個alert(this.aa); 彈出22；
函數內var aa=33; 這個aa!=this.aa，而且aa!=window.aa, 所以alert(aa) 彈出33；
最後alert(new Test().aa); (new Test())這個匿名對象已經有了aa屬性，值為22，所以最後彈出22
 
javascript中的this到底指什？

JavaScript：this是什嗎？

定義：this是包含它的函數作為方法被調用時所屬的對象。
說明：這句話有點咬嘴，但一個多餘的字也沒有，定義非常準確，我們可以分3部分來理解它！
1、包含它的函數。2、作為方法被調用時。3、所屬的對象。
看例子：
function to_green(){
this.style.color="green";
}
to_green();
上面函數中的this指的是誰？
分析：包含this的函數是，to_green
該函數作為方法被調用了
該函數所屬的對象是。。？我們知道預設情況下，都是window對象。
OK，this就是指的window對象了，to_green中執行語句也就變為，window.style.color="green"
這讓window很上火，因為它並沒有style這麼個屬性，所以該語句也就沒什麼作用。
我們在改一下。

window.load=function(){
var example=document.getElementById("example");
example.onclick=to_green;
}
這時this又是什麼呢？
我們知道通過賦值操作，example對象的onclick得到to_green的方法，那麼包含this的函數就是onclick嘍，
那麼this就是example引用的html對象嘍。
this的環境可以隨著函數被賦值給不同的對象而改變！
下面是完整的例子：

<script type="text/javascript">
function to_green(){
this.style.color="green";
}
function init_page(){
var example=document.getElementById("example");
example.onclick=to_green;
}
window.onload=init_page;
</script>
<a href="#" id="example">點擊變綠</a>
參考資料：hi.baidu.com/...0.html