Javascript Variable, Property, and Parameter

其實這篇筆記要紀錄的是我對 function context  最後的一塊拼圖，就是 function call object，快速的從頭說起...

在 top-level 可以宣告變數（variable）與屬性（property），就是存在 function 以外的變數。

var globalVariable = 'Global variable';
this.globalProperty = 'Global property';
window.windowProperty = 'Window property';
function a() {...};

在 top-level，this 就是指 window，特別的是，變數與屬性可以混用，下面三種用法都是指同一個變數。

neil.log(globalVariable); // global variable 與 property 互通
neil.log(this.globalVariable);  // 這個用法得在 top-level 才有效
neil.log(window.globalVariable); 

那進到 function 之後呢？

var globalVariable = 'Global variable';
this.globalProperty = 'Global property';
window.windowProperty = 'Window property';
$(function(){
var aObj = new aObject();
neil.log(globalVariable); // global variable 與 property 互通
neil.log(window.globalVariable);
neil.log(window.windowProperty);
neil.log(this.globalProperty); // context 為 document，所以讀不到
neil.log(aObj.eFunc.call(window)); // 這樣才可以讀到
neil.log(aObj.objectProperty);
neil.log(aObj.localVariable);  // undefined，變數與屬性不能混用
neil.log(aObj.aFunc());
neil.log(aObj.bFunc());
neil.log(aObj.cFunc());
neil.log(aObj.dFunc('Parameter'));
});
var aObject = function(){
var localVariable = 'Local variable';
this.objectProperty = 'Object property';
this.aFunc = function() {
return this.objectProperty;
};
this.bFunc = function() {
return localVariable;
};
this.cFunc = function() {
var localVariable = 'Local variable @ function';
return localVariable;
};
this.dFunc = function(name) {
return name;
};
this.eFunc = function() {
return this.globalProperty;
};
};

除了變數與屬性，多了參數（Parameter），而且在物件裡的變數與屬性是不能像 window 那樣混用。

Scope Chain 上場

Javascript 用 Scope Chain 來處理、屬性與參數的判讀，先來看看所謂的「載體」，第一層載體為 window，上面放了變數、屬性與 top-level function。

window

接下來進到 top-level function，呼叫 top-level function 時，Javascript 新增一個叫做「call object」的載體，先放上參數，再放上變數，就這樣，因為參數早於變數，所以同名時，變數會覆蓋參數，甚至覆蓋第一層載體 window 的變數或屬性，那 top-level function 的屬性呢？不是在這，是放到 function context 裡，一般就是 window。

window -> top-level function call object

退出 top-level function 再進到 Object 裡，Object 其實就是多了 nested function 的 top-level function，而且要用 new 才會出現；進到 Object 後，Javascript 一樣新增一個叫做「call object」的載體，放上參數與變數，另外建立一個 context 放上屬性與 nested function，call object 代表的是物件這個 function，而 context 才是代表物件，這就是不能從 Object 存取變數的原因。

window -> Object context and call object

當呼叫 Object 的 nested function 時，作法類似 top-level function，新增一個「call object」放上參數與變數，而屬性則是放到上一層載體，也就是 Object context 上。

window -> Object context and call object -> aFunc call object

瞭解了 Call object 之後，終於解開我對 local 變數與屬性的歸屬疑問了。

• function 裡的參數與 local 變數屬於該 function 的 call object
• function 裡的屬性屬於該 function 的 context，可能是 window 或某個物件
• window 的變數與屬性可以混用，Object 的不行，因為分屬 call object 與 context