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();

我们已经了解到，可在任何对象的外部，声明变量，或在全局的函数（函数也是变量的一种）也可以，更严格说，它们是全局对象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的范围内（作用域内）"