EXTjs作用域是什么(What is that Scope all about )

简介: Contents[hide] 1 事前准备 2 定义 3 正式开始 4 window对象 5 理解作用域 6 变量的可见度 事前准备 学习本教程的最佳方法是随手准备好Firefox中的工具Firebug。

Contents

[hide]

img_d05563fa34a9855c9c94ef41225fc3ec.png 事前准备

学习本教程的最佳方法是随手准备好Firefox中的工具Firebug。这样使得您可以即刻测试教程的例子。

如果机子上还没有FireFox和FireBug,就应该尽快安装一套来用。

img_d05563fa34a9855c9c94ef41225fc3ec.png 定义

作用域scope
1.(名词)某样事物执行、操作、拥有控制权的那么一个区域 [1]
2. (名词) 编写程序时,程序之中变量的可见度;例如,一个函数能否使用另外一个函数所创建的变量。[2]

可是这能够说明什么问题呢? 每当有人在说“这是作用域的问题”或“作用域搞错了”的时候,那就是说某个函数运行起来的时候,找不到正确变量的位置。这样我们便知道应该从哪一方面入手,查找出问题所在。

img_d05563fa34a9855c9c94ef41225fc3ec.png 正式开始

实际上每一个你定义的函数都是某个对象的方法。甚至是这样的写法:

 fn 
    ;

老兄你不是故弄玄虚吧~。做一个这样的演示可真得是简单得要命。没错!本例不需要任何Javascript文件,服务器或html。你只要打开firefox,弹出firebug,点击console tab。在Firefox状态栏上面看到有>>>提示的地方就可以输入了。

输入:

 fn  ; ;

然后回车。一切安然...你刚才做的实际上是定义了一个函数fn。接着试试:

fn;

然后回车。得到11的警告窗口?还不错吧?接着试试:

window.;
.;

得到一样的结果吧?这是因为函数fn是window对象的一个方法,在第二行的"this"的作用域实际指向了window对象。不过多数情况中你不需要像这样window.myFunction(...)地调用函数,这样太麻烦了,程序员工作起来会很不方便。

img_d05563fa34a9855c9c94ef41225fc3ec.png window对象

window 对象总是存在的,你可理解其为一个浏览器窗口对象。它包含了其它所有的对象如document 和所有的全局变量。

你可以打开Firebug,切换到 Script 页面并在Firebug右侧的New watch expression... 里面输入 window。观察window对象究竟有什么在里面。

接着,尝试找出我们之前定义过的fn函数。

另外,每个frame或iframe拥有其自身的window对象,其自身的全局空间。

img_d05563fa34a9855c9c94ef41225fc3ec.png 理解作用域

接下的内容开始有点复杂了。切换到Firebug Console标签页然后输入:

 o1 = testvar:, fun:   + .; ;
 o2 = testvar:, fun:   + .; ;

结果是什么?你声明了o1o2两个对象,分别都有一些属性和方法,但值不同。


接着试试:

fun;
window.;
.;

出错了,是吧?因为window对象(等价于this)并没有fun的方法。试一试下面的:

o1.;
o2.;

22和33出来了?非常好!

接下来这部分的内容最复杂啦。基于这个原始的函数,如果对象的数量多的话,你必须为每个对象加上这个函数-明显是重复劳动了。这样说吧,o1.fun写得非常清晰的而且为了搞掂它已经占用了我一个星期的开发时间。想象一下代码到处散布着this变量,怎么能不头疼?如果要将调用(执行)的o1.fun方法但this会执行o2,应该怎么实现呢?试一试下面的:

o1..o2;

明白了吗?当执行o1的fun方法时你强行将变量this指向到o2这个对象,换句话说,更加严谨地说:o1.fun的方法在对象o2的作用域下运行。

当运行一个函数,一个对象的方法时,你可将作用域当作this值的变量

img_d05563fa34a9855c9c94ef41225fc3ec.png 变量的可见度

变量的可见度和作用域的关系非常密切。我们已经了解到,可在任何对象的外部,声明变量,或在全局的函数(函数也是变量的一种)也可以,更严格说,它们是全局对象window的属性。 全局变量在任何地方都可见;无论函数的内部还是外部。如果你在某一个函数内修改了一个全局变量,其它函数也会得知这个值是修改过的。

对象可以有它自己的属性(像上面的testvar),这些属性允许从内部或是外部均是可见的。试:

o1.; 

从内部访问的演示可在两个测试对象的fun方法找到。

用关键字var在内部声明,相当于声明局部变量(局部声明也是在一条链上,即Scope Chain 作用域链上,Frank注):

i = ; 
 fn2  
     i = ; 
    i; 

fn2;

将得到什么?对了,55。声明在函数fn2的变量i是一个本地变量(局部变量),和等于44的全局变量i 44没什么关系。 But:

i;

这会访问全局变量i,显示44。

希望本文能帮助读者彻底理解作用域变量可见性的含义。

延伸阅读:

Retrieved from " http://extjs.com/learn/Tutorial:What_is_that_Scope_all_about_%28Chinese%29"

Contents

[hide]

img_d05563fa34a9855c9c94ef41225fc3ec.png 引言

就像前文所述那样,firebug依然是配合本文验证概念的最方便工具。

img_d05563fa34a9855c9c94ef41225fc3ec.png 嵌套的函数(作用域链)

当你进行函数的嵌套时,要注意实际上作用域链是发生变化的,这点可能看起来不太直观。你可把下面的代码置入firebug监视值的变化。

 testvar = ;
 o1 = testvar:, fun:+.+;;
 o2 = testvar:, fun:+.;;
o1.;
o2.;
o1..o2;

这是本文的首个例子。

 testvar = ;
 o3 = 
   testvar:,
   testvar2:,
   fun:
      +.;
       inner = 
         +.;
         +.;
      ;
      inner;
   
;
o3.;

这里我们换了别的函数,这个函数与原先的函数几乎相似但区别是内部函数的写法。要注意的是内部函数运行时所在的作用域,和外部函数的作用域是不一样的。Ext可让你调用函数时指定函数的作用域,避免作用域的问题。

img_d05563fa34a9855c9c94ef41225fc3ec.png 变量的声明

初始化变量时一定要加上“var”关键字,没有的话这就是一个全局变量。譬如,在下面的例子中,会有一个变量写在函数内部,然而你打算仅仅是声明局部的变量,但实际也可能出现覆盖全局变量的值的情形。在FIREBUG "DOM"的标签页中,你可通过检测“window”看到所有的全局变量。如果你发现有“k”或“x”变量那证明你把这个变量分配在一个不合适的作用域里面。见下例:

 i = ;
 j = ;
 k = ;
 fn = 
    i = ;
   k = ;
   i;
   j;
   k+;
   x = ;
;
fn;
k+;

与前面例子变化不大,另外注意的是函数内的k前面是没有var关键字的,所以这里不是声明局部变量,而是将某个值再次分配到k这个全局变量中。另外要注意的是,alert方法执行期间,参数i是当前能找到的局部变量,它的值是6,但参数j在当前作用域找不到,就沿着作用域链(scope chain)向上查找,一直找到全局变量的那个j为止。

img_d05563fa34a9855c9c94ef41225fc3ec.png 在Ext中指定作用域

前面已提及,当调用函数时Ext能灵活处理作用域的问题。部分内容来自dj的帖子。

调用函数时,你可以把this想象为每个函数内的一个特殊(躲起来的)参数。无论什么时候,JavaScript都会把this放到function内部。它是基于一种非常简单的思想:如果函数直接是某个对象的成员,那么this的值就是这个对象。如果函数不是某个对象的成员那么this的值便设为某种全局对象(常见有,浏览器中的window对象)。下面的内部函数可以清晰的看出这种思想。

一个函数,若是分配到某个变量的,即不属于任何对象下的一员,那么this的参数就变为windows对象。下面是一个例子,可直接粘贴到Firebug的console:

 obj = 
	toString:  ;, 
	func: 
		
		console.; 
		 innerFunc = 
			
			console.; 
		;
		innerFunc;
	
;
obj.; 

缺省下是这样调用一个参数的-但你也可以人为地改变this参数,只是语法上稍微不同。将最后一行的"obj.func();" 改为:

obj..window;

从上面的例子中可以发现,call实际上是另外一个函数(方法)。call 属于系统为obj.func内建的方法(根据JavaScript之特点可得知,函数是一种对象。)。

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

 obj = 
	toString:  ;, 
	func: 
		
		console.; 
		 innerFunc = 
			
			console.; 
		;
		innerFunc.;
	
;
obj.; 

img_d05563fa34a9855c9c94ef41225fc3ec.png Ext的作用域配置

可以看到,没有分配作用域的函数,它的this"指向的是浏览器的window对象(如事件句柄event handler等等),——除非我们改变this的指针。Ext的很多类中 scope是一个配置项(configuration)能够进行指针的绑定。相关的例子参考Ajax.request

img_d05563fa34a9855c9c94ef41225fc3ec.png Ext的createDelegate函数

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

 obj = 
	toString:  ;, 
	func: 
		
		console.; 
		 innerFunc = 
			
			console.; 
		;
		innerFunc = innerFunc.; 
		innerFunc; 
	
;
obj.; 

这是一个小小的例子,其原理是非常基本基础的,希望能够好好消化。尽管如此,在现实工作中,我们还是容易感到迷惑,但基本上,如果能按照上面的理论知识去分析来龙去脉,万变还是不离其中的。

另外还有一样东西,看看下面的例子:

varsDs.callback: records
  col_length = varsDs.;
  
    x = ; x < col_length; x++
  
  colarrayx = varsDs.x.;
  
;

不过可以写得更清晰:

 obj = 
   callback: records
      col_length = varsDs.;
      
      
   
;
varsDs.obj;

现在函数callback直接挂在obj上,因此this指针等于obj。

但是注意: 这样做没用的。为什么?因为你不知obj.callback最终执行时发生什么情形。试想一下Ext.data.Store的load方法(仿造的实现):

...
	 : config 
		 o = ;
		o. = config.;
 
		  
 
		o.;
	
...

这个仿造的实现中,回调函数的作用域是私有变量“o”。 因为通常你无法得知函数是如何被调用的,如果不声明作用域,你很可能无法在回调函数中使用this参数。

img_d05563fa34a9855c9c94ef41225fc3ec.png Further reading:

目录
相关文章
|
22天前
|
JavaScript
作用域和作用域链(js的问题)
作用域和作用域链(js的问题)
|
JavaScript
VUE element-ui 之slot-scope=“scope“常见报错解决方法
VUE element-ui 之slot-scope=“scope“常见报错解决方法
992 0
VUE element-ui 之slot-scope=“scope“常见报错解决方法
|
1月前
|
JavaScript 前端开发
JS作用域与作用域链
JS作用域与作用域链
|
7月前
|
JavaScript 前端开发 开发者
|
7月前
|
JavaScript
js- 作用域和作用域链
js- 作用域和作用域链
|
8月前
|
自然语言处理 JavaScript 前端开发
js中作用域的理解?
js中作用域的理解?
32 0
|
8月前
|
JavaScript 前端开发 数据可视化
|
设计模式 自然语言处理 JavaScript
带你走进JS作用域(Scope)的世界
概念介绍 最少访问原则 JS中的作用域 全局作用域 局部作用域 块级声明 上下文(Context) 执行上下文(Execution Context) 词法作用域(Lexical Scope) 闭包 公共作用域和私有作用域 通过.call(), .apply() and .bind()修改上下文
|
JSON JavaScript 数据格式
js作用域详解
js作用域详解
125 0
js作用域详解
|
自然语言处理 JavaScript Java
玩转JS基础——作用域和作用域链
作用域是在运行时代码中的某些特定部分中变量,函数和对象的可访问性。
114 0