LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

javascript 的动态this与动态绑定

admin
2010年8月13日 23:16 本文热度 3632

在 JavaScript 中,函数通常运行在一个特定的上下文中(通常称为“作用域[scope]”)。在函数内部, this 关键字是指向那个作用域的引用。实际上,每个函数都是对象的属性——全局函数是 window 对象的属性——运行时函数的作用域即为函数被调用时函数所属的对象, 更严格的说法是保存了对函数的引用的对象。
javascript是一门动态语言,最明显就是那个dynamic this。它一般都是作为函数调用者存在。在javascript,所有关系都可以作为对象的一个关联数组元素而存在。那么函数就是被掰成两部分储存于对象,一是其函数名(键),一是函数体(值),那么函数中的this一般都指向函数所在的对象。但这是一般而已,在全局调用函数时,我们并没有看到调用者,或者这时就是window。不过,函数声明后,其实并没有绑定到任何对象,因此我们可以用call apply这些方法设置调用者。


一个简单的例子:





提示:你可以先修改部分代码再运行。


这里你不能说run是作为window的一个属性而存在,但它的确是被window属性调用了。实质上大多数暴露在最上层的东西都则window接管了。在它们需要调用时被拷贝到window这个对象上(不过在IE中window并不继承对象),于是有了window['xxx']与 window.xxx性能上的差异。这是内部实现,不深究了。


另一个例子,绑定到一个明确的对象上



提示:你可以先修改部分代码再运行。


答案显然易见,this总是为它的调用者。但如果复杂一点呢?




提示:你可以先修改部分代码再运行。


尽管它是定义在object内部,尽管它是定义run函数内部,但它弹出的既不是object也不是run,因为它既不是object的属性也不是run 的属性。它松散在存在于run的作用域用,不能被前两者调用,就只有被window拯救。window等原生对象浸透于在所有脚本的内部,无孔不入,只要哪里需要到它做贡献的地方,它都义不容辞。但通常我们不需要它来帮倒忙,这就需要奠出call与apply两大利器了。




提示:你可以先修改部分代码再运行。


call与apply的区别在于第一个参数以后的参数的形式,call是一个个,aplly则都放到一个数组上,在参数不明确的情况,我们可以借助 arguments与Array.slice轻松搞定。




提示:你可以先修改部分代码再运行。


由此Prototype开发者搞了一个非常有名的函数出来,bind!以下是它的一个最简单的版本:









2   return function() {






3     return fn.apply(context, arguments);






4   }






5 }



提示:你可以先修改部分代码再运行。


不过为了面对更复杂的情况建议用以下版本。









1 function bind(context,fn) {






2   var args = Array.prototype.slice.call(arguments, 2);






3   return args.length == 0 ? function() {






4     return fn.apply(context, arguments);






5   } : function() {

它还有一个孪生兄弟叫bindAsEventListener ,绑定事件对象,没什么好说的。








1 var bindAsEventListener = function(context, fn) {






2     return function(e) {






3         return fn.call(context, (e|| window.event));






4     }






5 }
Prototype的版本








1 Function.prototype.bind = function() {






2    if (arguments.length < 2 && (typeof arguments[0]==='undefined'))






3      return this;






4    var _slice = Array.prototype.slice






5    var __method = this, args = _slice.call(arguments,0), context = args.shift();






6    return function() {






7      return __method.apply(context, args.concat(_slice.call(arguments,0)));






8    }






9  }



提示:你可以先修改部分代码再运行。


有绑定就有反绑定,或者叫剥离更好!例如原生对象的泛化方法我们是无法通过遍历取出它们的









1 for(var i in Array){






2   alert(i + " : "+ Array[i])






3 }






4 for(var i in Array.prototype){






5   alert(i + " : "+ Array.prototype[i])






6 }

要取出它们就需要这个东西:









1 var _slice = Array.prototype.slice;






2 function unbind(fn) {//第一步取得泛化方法






3   return function(context) {//第二部用对应原生对象去重新调用!






4     return fn.apply(context, _slice.call(arguments, 1));






5   };






6 };

总结:


this 的值取决于 function 被调用的方式,一共有四种,


* 如果一个 function 是一个对象的属性,该 funtion 被调用的时候,this 的值是这个对象。如果 function 调用的表达式包含句点(.)或是 [],this 的值是句点(.)或是 [] 之前的对象。如myObj.func 和myObj["func"] 中,func 被调用时的 this 是myObj。
* 如果一个 function 不是作为一个对象的属性,那么该 function 被调用的时候,this 的值是全局对象。当一个 function 中包含内部 function 的时候,如果不理解 this 的正确含义,很容易造成错误。这是由于内部 function 的 this 值与它外部的 function 的 this 值是不一样的。解决办法是将外部 function 的 this 值保存在一个变量中,在内部 function 中使用它来查找变量。
* 如果在一个 function 之前使用 new 的话,会创建一个新的对象,该 funtion 也会被调用,而 this 的值是新创建的那个对象。如function User(name) {this.name = name}; var user1 = new User(”Alex”); 中,通过调用new User(”Alex”) ,会创建一个新的对象,以user1 来引用,User 这个 function 也会被调用,会在user1 这个对象中设置名为name 的属性,其值是Alex 。
* 可以通过 function 的 apply 和 call 方法来指定它被调用的时候的 this 的值。 apply 和 call 的第一个参数都是要指定的 this 的值。由于它们存在,我们得以创建各种有用的函数。


该文章在 2010/8/13 23:16:49 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved