javascript下动态this与动态绑定实例代码_javascript技巧

那么函数就是被掰成两部分储存于对象,一是其函数名(键),一是函数体(值),那么函数中的this一般都指向函数所在的对象。但这是一般而已,在全局调用函数时,我们并没有看到调用者,或者这时就是window。不过,函数声明后,其实并没有绑定到任何对象,因此我们可以用call apply这些方法设置调用者。

一个简单的例子:
[script]
<script>
window.name = "window";
var run = function() {
alert("My name is " + this.name);
}
run();
</script>
[/html]
这里你不能说run是作为window的一个属性而存在,但它的确是被window属性调用了。实质上大多数暴露在最上层的东西都则window接管了。在它们需要调用时被拷贝到window这个对象上(不过在IE中window并不继承对象),于是有了window['xxx']与window.xxx性能上的差异。这是内部实现,不深究了。
另一个例子,绑定到一个明确的对象上

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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

复制代码 代码如下:

var bind = function(context, fn) {
return function() {
return fn.apply(context, arguments);
}
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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

复制代码 代码如下:

function bind(context,fn) {
var args = Array.prototype.slice.call(arguments, 2);
return args.length == 0 ? function() {
return fn.apply(context, arguments);
} : function() {
return fn.apply(context, args.concat.apply(args, arguments));
};
};

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

复制代码 代码如下:

var bindAsEventListener = function(context, fn) {
return function(e) {
return fn.call(context, (e|| window.event));
}
}

Prototype的版本

复制代码 代码如下:

Function.prototype.bind = function() {
if (arguments.length < 2 && (typeof arguments[0]==='undefined'))
return this;
var _slice = Array.prototype.slice
var __method = this, args = _slice.call(arguments,0), context = args.shift();
return function() {
return __method.apply(context, args.concat(_slice.call(arguments,0)));
}
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

bind函数是如此有用,google早早已把它加入到Function的原型中了(此外还有inherits,mixin与partial)。

复制代码 代码如下:

//在chrome中
var a = function(){};
alert(a.bind)

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

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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

复制代码 代码如下:

var _slice = Array.prototype.slice;
function unbind(fn) {//第一步取得泛化方法
return function(context) {//第二部用对应原生对象去重新调用!
return fn.apply(context, _slice.call(arguments, 1));
};
};

示例以前也给过了,请见文章
总结:
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 的值。由于它们存在,我们得以创建各种有用的函数。

时间: 2024-10-29 22:03:49

javascript下动态this与动态绑定实例代码_javascript技巧的相关文章

Javascript实现动态菜单添加的实例代码_javascript技巧

先来看看效果: Html源码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <

纯JavaScript 实现flappy bird小游戏实例代码_javascript技巧

前言: <flappy bird>是一款由来自越南的独立游戏开发者Dong Nguyen所开发的作品,游戏于2013年5月24日上线,并在2014年2月突然暴红.2014年2月,<Flappy Bird>被开发者本人从苹果及谷歌应用商店撤下.2014年8月份正式回归APP STORE,正式加入Flappy迷们期待已久的多人对战模式.游戏中玩家必须控制一只小鸟,跨越由各种不同长度水管所组成的障碍. 正文: 接下来就是一步一步来实现它 步骤1:页面布局,这儿就不多说了,页面内容如下:

javascript实现checkbox复选框实例代码_javascript技巧

本文实例介绍了javascript实现checkbox复选框实例代码以及对checkbox复选框进行美化操作,分享给大家供大家参考,具体内容如下 1.checkbox复选框进行美化操作 复选框默认外表的美观度差强人意,能够满足美观度要求不高的页面,但是如果对于页面要求较为精致,那可能就过于勉强了,下面就一段对复选框进行美化的代码实例,希望能够给大家带来一定的帮助. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charse

Javascript简单实现面向对象编程继承实例代码_javascript技巧

本文讲述了Javascript简单实现面向对象编程继承实例代码.分享给大家供大家参考,具体如下: 面向对象的语言必须具备四个基本特征: 1.封装能力(即允许将基本数据类型的变量或函数放到一个类里,形成类的成员或方法) 2.聚合能力(即允许类里面再包含类,这样可以应付足够复杂的设计) 3.支持继承(父类可以派生出子类,子类拥有父母的属性或方法) 4.支持多态(允许同样的方法名,根据方法签名[即函数的参数]不同,有各自独立的处理方法) 这四个基本属性,javascript都可以支持,所以javasc

JavaScript Ajax Json实现上下级下拉框联动效果实例代码_javascript技巧

最近尝试做出一个部门和人员的下拉框联动功能,部门和人员的对应关系是1:N 复制代码 代码如下: <div class="forntName">部门</div> <div class="inpBox"> <select  name="department" id="department"  onchange="change();" style="width:

JavaScript页面实时显示当前时间实例代码_javascript技巧

前言 这次认认真真又重新看了相关内容,现把需要注意的地方总结如下: 1.通过getDay()得到的星期数是从0开始,0表示星期天,之后从1~6依次表示星期一到星期六: 2.得到日期需使用getDate()而不是getDay() ,因为可能习惯性地认为日期就是天数,可能会使用getDay() ,但其实getDay()是用于得到星期数的: 3.通过getMonth()得到月份,从0开始计数,所以需要再加1. 实例代码如下: <html> <head> <title><

jsp+javascript打造级连菜单的实例代码_javascript技巧

  复制代码 代码如下:   <%@ page import="java.util.Date,yava.fileapp.*,java.sql.*;"         contentType="text/html;charset=GB2312" pageEncoding="GB2312"  %>  <style>  .f9{ font-size:9pt; }  .bgc{ background-color:#AECAF9;

JavaScript 解析读取XML文档 实例代码_javascript技巧

JavaScript解析读取XML文件,主要就是加载并解析XML文件,然后就可以测试解析的XML文件的内容,打印输出来. 在线演示:http://demo.jb51.net/js/2012/readxml/注:测试的时候需要在网站中测试,iis或apache中,注意不要本地双击运行测试index.htm 复制代码 代码如下: <html> <head> <title></title> <script type="text/javascript

javascript:文字不间断向左移动的实例代码_javascript技巧

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="t