javascript 嵌套的函数(作用域链)


Posted in Javascript onMarch 15, 2010

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

var testvar = 'window属性'; 
var o1 = {testvar:'1', fun:function(){alert('o1: '+this.testvar+'<<');}}; 
var o2 = {testvar:'2', fun:function(){alert('o2: '+this.testvar);}}; 
o1.fun();'1' 
o2.fun();'2' 
o1.fun.call(o2);'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();

这里我们换了别的函数,这个函数与原先的函数几乎相似但区别是内部函数的写法。要注意的是内部函数运行时所在的作用域,和外部函数的作用域是不一样的。Ext可让你调用函数时指定函数的作用域,避免作用域的问题。
变量的声明
初始化变量时一定要加上“var”关键字,没有的话这就是一个全局变量。譬如,在下面的例子中,会有一个变量写在函数内部,然而你打算仅仅是声明局部的变量,但实际也可能出现覆盖全局变量的值的情形。在FIREBUG "DOM"的标签页中,你可通过检测“window”看到所有的全局变量。如果你发现有“k”或“x”变量那证明你把这个变量分配在一个不合适的作用域里面。见下例:
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)

与前面例子变化不大,另外注意的是函数内的k前面是没有var关键字的,所以这里不是声明局部变量,而是将某个值再次分配到k这个全局变量中。另外要注意的是,alert方法执行期间,参数i是当前能找到的局部变量,它的值是6,但参数j在当前作用域找不到,就沿着作用域链(scope chain)向上查找,一直找到全局变量的那个j为止。
在Ext中指定作用域
前面已提及,当调用函数时Ext能灵活处理作用域的问题。部分内容来自dj的帖子。
调用函数时,你可以把this想象为每个函数内的一个特殊(躲起来的)参数。无论什么时候,JavaScript都会把this放到function内部。它是基于一种非常简单的思想:如果函数直接是某个对象的成员,那么this的值就是这个对象。如果函数不是某个对象的成员那么this的值便设为某种全局对象(常见有,浏览器中的window对象)。下面的内部函数可以清晰的看出这种思想。
一个函数,若是分配到某个变量的,即不属于任何对象下的一员,那么this的参数就变为windows对象。下面是一个例子,可直接粘贴到Firebug的console:
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的一些相关内容..." 
// 输出 "Window的一些相关内容..."

从上面的例子中可以发现,call实际上是另外一个函数(方法)。call 属于系统为obj.func内建的方法(根据JavaScript之特点可得知,函数是一种对象。)。
通过这样改变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的作用域配置
可以看到,没有分配作用域的函数,它的this"指向的是浏览器的window对象(如事件句柄event handler等等),——除非我们改变this的指针。Ext的很多类中 scope是一个配置项(configuration)能够进行指针的绑定。相关的例子参考Ajax.request。
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的范围内(作用域内)"

这是一个小小的例子,其原理是非常基本基础的,希望能够好好消化。尽管如此,在现实工作中,我们还是容易感到迷惑,但基本上,如果能按照上面的理论知识去分析来龙去脉,万变还是不离其中的。
另外还有一样东西,看看下面的例子:
varsDs.load({callback: function(records){ 
col_length = varsDs.getCount();//这里的varDs离开了作用域? 
//col_length = this.getCount();//这个this等于store吗? 
for (var x = 0; x < col_length; x++) 
{ 
colarray[x] = varsDs.getAt(x).get('hex'); 
} 
}});不过可以写得更清晰: 
var obj = { 
callback: function(records){ 
col_length = varsDs.getCount();//这里的varDs离开了作用域? 
//col_length = this.getCount();//这个this等于store吗? 
// ... 
} 
};

varsDs.load(obj);现在函数callback直接挂在obj上,因此this指针等于obj。
但是注意: 这样做没用的。为什么?因为你不知obj.callback最终执行时发生什么情形。试想一下Ext.data.Store的load方法(仿造的实现):
... 
    load : function(config) { 
        var o = {}; 
        o.callback = config.callback; 
         //进行加载 
        o.callback(); 
    } 
...

这个仿造的实现中,回调函数的作用域是私有变量“o”。 因为通常你无法得知函数是如何被调用的,如果不声明作用域,你很可能无法在回调函数中使用this参数。
Javascript 相关文章推荐
让你的网站可编辑的实现js代码
Oct 19 Javascript
jQuery EasyUI 的EasyLoader功能介绍
Sep 12 Javascript
js常用代码段整理
Nov 30 Javascript
js借助ActiveXObject实现创建文件
Sep 29 Javascript
BootStrap和jQuery相结合实现可编辑表格
Apr 21 Javascript
node-http-proxy修改响应结果实例代码
Jun 06 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
Aug 31 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
Oct 04 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
Mar 09 Javascript
12个非常有用的JavaScript技巧
May 17 Javascript
浅谈vue后台管理系统权限控制思考与实践
Dec 19 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
Feb 07 Javascript
JavaScript 嵌套函数指向this对象错误的解决方法
Mar 15 #Javascript
JQuery 常用操作代码
Mar 14 #Javascript
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
Mar 14 #Javascript
Jquery cookie操作代码
Mar 14 #Javascript
javascript 解决表单仍然提交即使监听处理函数返回false
Mar 14 #Javascript
jQuery第三课 修改元素属性及内容的代码
Mar 14 #Javascript
jQuery 第二课 操作包装集元素代码
Mar 14 #Javascript
You might like
PHP 正则表达式小结
2015/02/12 PHP
PHP分页初探 一个最简单的PHP分页代码的简单实现
2016/06/21 PHP
Yii安装与使用Excel扩展的方法
2016/07/13 PHP
一个对于Array的简单扩展
2006/10/03 Javascript
使用apply方法处理数组的三个技巧[译]
2012/09/20 Javascript
拖动table标题实现改变td的大小(css+js代码)
2013/04/16 Javascript
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
2013/04/23 Javascript
jQuery实现的背景动态变化导航菜单效果
2015/08/24 Javascript
jQuery Validate初步体验(一)
2015/12/12 Javascript
AngularJS指令与指令之间的交互功能示例
2016/12/14 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
2017/02/05 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
微信小程序实现YDUI的ScrollNav组件
2018/02/02 Javascript
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
jQuery实现的回车触发按钮事件功能示例
2018/03/25 jQuery
vue实现微信获取用户信息的方法
2019/03/21 Javascript
vue移动端下拉刷新和上滑加载
2020/10/27 Javascript
[54:02]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 IG vs VGJ.T
2018/04/03 DOTA
[51:36]EG vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
[01:07:46]完美世界DOTA2联赛循环赛 Magma vs IO BO2第二场 11.01
2020/11/02 DOTA
如何解决django配置settings时遇到Could not import settings 'conf.local'
2014/11/18 Python
给Python初学者的一些编程技巧
2015/04/03 Python
以windows service方式运行Python程序的方法
2015/06/03 Python
python调用java的jar包方法
2018/12/15 Python
Django如何实现上传图片功能
2019/08/16 Python
如何提高python 中for循环的效率
2020/04/15 Python
安装python依赖包psycopg2来调用postgresql的操作
2021/01/01 Python
Bogner美国官网:滑雪服中的”Dior”
2018/01/30 全球购物
建筑设计学生的自我评价
2014/01/16 职场文书
代领报检证委托书范本
2014/10/11 职场文书
教师党员个人自我评价
2015/03/04 职场文书
学校重阳节活动总结
2015/03/24 职场文书
2015年教研工作总结
2015/05/23 职场文书
2015年药品销售工作总结范文
2015/05/25 职场文书
python爬取网页版QQ空间,生成各类图表
2021/06/02 Python
Mysql中where与on的区别及何时使用详析
2021/08/04 MySQL