2012-07-09

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

沒有留言:

張貼留言