Javascript中的作用域（scope）

applayout.js

/**

*ApplicationLayout

*byJozefSakalos,akaSaki

*
'target='_blank'>http://extjs.com/learn/Tutorial:Application_Layout_for_Beginners_(Chinese)
*/
//填充图片的本地引用
Ext.BLANK_IMAGE_URL='../extjs/resources/images/default/s.gif';
//创建命名空间
Ext.namespace('myNameSpace');
//创建应用程序
myNameSpace.app=function(){
//元素还没创建,未能访问
//私有变量
//私有函数
//公共空间
return{
//公共的属性,如,要转换的字符串
//公共方法
init:function(){
alert('应用程序初始化成功。');
}
};
}();//程序底部
//文件底部

文件最开始的几行是注释，说明该文件的主要内容，作者，作者相关的资讯。没有任何注释的程序也可以正常的运行，－但请记住：每次写的程序要容易给人看得懂的Alwayswriteyourapplicationasifyouwouldwriteitforanother.当你回头看你几个月前写的代码，发现你根本不记得自己写过什么的时候，就会明白这个道理，并养成编码的好习惯。接着是要指向你服务器的填充图片，如不指定则默认extjs.com。每次运行程序的时候都访问extjs.com，不推荐这样，应该先修改这个常量值指向到本地。

现在自定义命名空间。将所有变量和方法都划分到一个全局对象下管理，这样的好处是避免了变量名冲突和由不同函数干扰了全局变量的值。名字（namespace）可按自己的方案选择。

整段代码的重点是，我们创建了myNameSpace对象的属性app，其值是一个函数立刻运行之后的返回值。

如果运行我们的代码：

varo=function(){
return{p1:11,p2:22};
}();

实际上我们创建了一个匿名函数（没有名字的函数），经过解释（预编译？）之后让它立刻运行（注意函数后面的()）。最后将函数返回的对象（注意此时是一个object变量）分配到变量o。我们的程序便是这种思路去写的。

你可以把私有变量和私有函数直接定义在function和return这两个声明之间，但是请切记：此时不能访问任何html页面中的元素，那会导致错误，因为这段代码在加载时页面的head中就运行了，而这时候html页面中的其它元素还没有被加载进来。

另外一方面，函数init,是由匿名函数返回的对象的一个方法而已。它会在文档全部加载后才运行。换言之整个DOM树已经是可用的了。

一切都还好吧～如果能正确运行http://yourserver.com/applayout/applayout.html，不出现什么错误的话将出现一个警告。

接下来是利用这个空白的模板，讨论本文的重点。

公开Public、私有Private、特权的Privileged？
让我们加入一些有趣内容到程序中去吧。在页面applayout.html的body标签中加入：

<divid="btn1-ct"></div>

空白的div会当作按钮的容器来使用。然后在applayout.js加入下来代码：

/**
*ApplicationLayout
*byJozefSakalos,akaSaki
*
'target='_blank'>http://extjs.com/learn/Tutorial:Application_Layout_for_Beginners_(Chinese)
*/
//填充图片的本地引用
Ext.BLANK_IMAGE_URL='../extjs/resources/images/default/s.gif';
//创建命名空间
Ext.namespace('myNameSpace');
//创建应用程序
myNameSpace.app=function(){
//元素还没创建,未能访问
//私有变量
varbtn1;
varprivVar1=11;
//私有函数
varbtn1Handler=function(button,event){
alert('privVar1='+privVar1);
alert('this.btn1Text='+this.btn1Text);
};
//公共空间
return{
//公共的属性,如,要转译的字符串
btn1Text:'Button1'
//公共方法
,init:function(){
btn1=newExt.Button('btn1-ct',{
text:this.btn1Text
,handler:btn1Handler
});
}
};
}();//程序底部
//文件底部

变量btn1和privVar1是私有的。那意味着在程序外部他们是不能够被访问的，而且也不可见。私有函数btn1Handler也是同样道理。

另外一个方面，btn1Text是公共变量所以可以被程序外部访问或者是修改（我们稍后将会演示）。

函数init是特权的，即是私有变量和公共变量两者都可以被它访问到。在本例中，公共变量this.btn1Text和私有函数btn1Handler都能够被特权函数init所访问。同时，相对外界来说，它也属于公共成员的一种。

Ok,运行看看。能看到左上角的按钮吗？很好，点击它。得到一个privVar1=11的警告。这说明私有函数能访问私有变量。

但是在第二个警告中遇到了this.btn1Text=undefined的问题，这好像不应该这样。个中原因是因为位于事件句柄(eventhandler)中的变量this没有正确指向到我们的程序。你需要用scope:this指明这个作用域（这里的this关键字所指示的scope应该是btn1变量）：

btn1=newExt.Button('btn1-ct',{
text:this.btn1Text
,handler:btn1Handler
,scope:this
});

刷新一下，可以了吧？

重写公共变量
在applayout.js底部加入下列代码：

Ext.apply(myNameSpace.app,{
btn1Text:'Taste1'
});
//文件底部

这代码是用来干什么的呢？首先它创建了我们的程序对象然后改变（重写）公共变量btn1Text的值。运行后将看到按钮上文字的变化。

把文本都放到公共变量，以便于以后的国际化翻译工作，而不需要修改程序的内部代码。

当然你也可以将其它的值例如尺寸、样式、等等的总之是可自定义的选项都放到公共变量中。免于在数千行代码之中为查找某个颜色而费劲。

重写（Overriding）公共函数
接着更改一下代码，让它读起来是这样的：

Ext.apply(myNameSpace.app,{
btn1Text:'Taste1'
,init:function(){
try{
btn1=newExt.Button('btn1-ct',{
text:this.btn1Text
,handler:btn1Handler
,scope:this
});
}
catch(e){
alert('错误:"'+e.message+'"发生在行：'+e.lineNumber);
}
}
});
//endoffile

我们这里将init重写了一篇，主要是在原来代码的基础上加入异常控制，以便能够捕获异常。试运行一下看还有没有其它的变化？

嗯是的，出现了btn1Handler未定义的错误。这是因为新的函数虽然尝试访问私有变量但它实际是不允许的。正如所见，原init是特权函数可访问私有空间，但新的init却不能。之所以不能访问私有空间，是因为：禁止外部代码Nocodefromoutside，哪怕是尝试重写特权方法。