Ext学习笔记之作用域

参考文献:http://extjs.com/learn/Tutorial:What_is_that_Scope_all_about
             http://extjs.com/learn/Tutorial:What_is_that_Scope_all_about2

正文：    
1、Windows对象      
     一般情况，定义的函数 function fn() {alert(11);} 
     有两种调用方法window.fn() 和 this.fn()； 这里"this"的作用域实际指向了window对象。
     window 对象总是存在的，你可理解其为一个浏览器窗口对象。它包含了其它所有的对象如document 和所有的全局变量。 

      复杂点，定义两个函数    
           var o1 = {testvar:22, fun:function() { alert('o1: ' + this.testvar); }};
           var o2 = {testvar:33, fun:function() { alert('o2: ' + this.testvar); }};
      如果继续这样的调用
           window.fun();
           this.fun();
      错误！因为 window对象（等价于this）并没有fun的方法。
      正确的调用：o1.fun()；和o2.fun();
      但是问题来了，基于这个原始的函数，如果对象的数量多的话，你必须为每个对象加上这个函数－明显是重复劳动了。这样说吧，o1.fun写得非常清晰的而且为了搞掂它已经占用了我一个星期的开发时间。想象一下代码到处散布着this变量，怎么能不头疼？如果要将调用（执行）的o1.fun方法但this会执行o2,应该怎么实现呢？那就试一试下面的
      o1.fun.call(o2);
      当执行o1的fun方法时你强行将变量this指向到o2这个对象，换句话说，o1.fun的方法在对象o2的作用域下运行。
      当运行一个函数，一个对象的方法时，你可将作用域当作this值的变量。

2、嵌套的函数（作用域链）
     函数的嵌套时，要注意实际上作用域链是发生变化的。例，

var  testvar  =   ' window属性 ' ;
var  o3  =   {
   testvar:'3',
   testvar2:'3**',
   fun:function(){
      alert('o3: '+this.testvar);//'obj3'
      var inner = function(){
         alert('o3-inner: '+this.testvar);//'window属性'
         alert('o3-inner: '+this.testvar2);//undefined（未定义）
      };
      inner();
   }
} ;
o3.fun();

3、变量可见度
      我们已经了解到，可在任何对象的外部，声明变量，或在全局的函数（函数也是变量的一种）也可以，更严格说，它们是全局对象window的属性。 全局变量在任何地方都可见；无论函数的内部还是外部。如果你在某一个函数内修改了一个全局变量，其它函数也会得知这个值是修改过的。 对象可以有它自己的属性（像上面的testvar）,这些属性允许从内部或是外部均是可见的。

i  =   44 ; 
function  fn2()  { 
    var i = 55; 
    alert(i); 
}
fn2();  // 55
alert(i);  // 44

声明在函数fn2的变量 i是一个本地变量（局部变量），和等于44的全局变量 i 44没什么关系。而后面的 alert (i )得到的是44。

4、变量声明
     初始化变量时一定要加上“var”关键字，没有的话这就是一个全局变量。譬如

var  i  =   4 ;
var  j  =   5 ;
var  k  =   7 ;
var  fn  =   function () {
   var i = 6;
   k = 8;//注意前面没有var 所以这句话的意思的把8赋予到变量k中去！
   alert(i);//6
   alert(j);//5
   alert(k+'-1');//8-1
   x = 1;//这句的作用有两种情况，创建全部变量x或覆盖（overwrite）全部变量x
} ;
fn();
alert(k + ' -2 ' ); // 8-2 (注意不是7-2)

5、 在Ext中指定作用域
     调用函数时，你可以把 this想象为每个函数内的一个特殊（躲起来的）参数。无论什么时候，JavaScript都会把 this放到function内部。它是基于一种非常简单的思想：如果函数直接是某个对象的成员，那么 this的值就是这个对象。如果函数不是某个对象的成员那么 this的值便设为某种全局对象（常见有，浏览器中的window对象）。下面的内部函数可以清晰的看出这种思想。
一个函数，若是分配到某个变量的，即不属于任何对象下的一员，那么 this的参数就变为windows对象。下面是一个例子，

var  obj  =   {
    toString:function(){ return 'obj的范围内（作用域内）';}, //重写toString函数，方便执行console.log(this)时的输出
    func: function(){
        // 这里的函数直接从属与对象"object"
        console.log(this); 
        var innerFunc = function(){
            //n这里的函数不是特定对象的直接成员，只是另外一个函数的变量而已
            console.log(this); 
        };
        innerFunc();
    }
} ;
obj.func(); 
//  输出 "obj的范围内（作用域内）"
//  输出 "Window的一些相关内容"

缺省下是这样调用一个参数的-但你也可以人为地改变 this参数，只是语法上稍微不同。将最后一行的"obj.func();" 改为：obj. func. call (window );则全部输出 "Window的一些相关内容..."，前面有提过。

通过这样改变 this指向的作用域，我们可以继续用一个例子来修正innerFunc中的 this参数，——“不正确”的指向：

var  obj  =   {
    toString:function(){ return 'obj的范围内（作用域内）';}, //重写toString函数，方便执行console.log(this)时的输出
    func: function(){
        // 这里的函数直接从属与对象"object"
        console.log(this); 
        var innerFunc = function(){
            //n这里的函数不是特定对象的直接成员，只是另外一个函数的变量而已
            console.log(this); 
        };
        innerFunc.call(this);
    }
} ;
obj.func(); 
//  输出 "obj的范围内（作用域内）"
//  输出 "obj的范围内（作用域内）"

Ext的createDelegate函数
除了内建的call/apply方法，Ext还为我们提供-- 辅助方法 createDelegate。 该函数的基本功能是绑定 this指针但不立刻执行。传入一个参数，createDelegate方法会保证函数是运行在这个参数的作用域中。如：

var  obj  =   {
    toString:function(){ return 'obj的范围内（作用域内）';}, //重写toString函数，方便执行console.log(this)时的输出
    func: function(){
        // 这里的函数直接从属与对象"object"
        console.log(this); 
        var innerFunc = function(){
            //n这里的函数不是特定对象的直接成员，只是另外一个函数的变量而已
            console.log(this); 
        };
        innerFunc = innerFunc.createDelegate(this); // 这里我们用委托的函数覆盖了原函数。
        innerFunc(); // 按照一般的写法调用函数
    }
} ;
obj.func(); 
//  输出 "obj的范围内（作用域内）"
//  输出 "obj的范围内（作用域内）"