Javascript中的this绑定介绍


Posted in Javascript onSeptember 22, 2011

而this的具体值则取决于其调用模式。
* 方法调用模式:this被绑定到该对象。
* 函数调用模式:this被绑定到全局对象,网页的情况下绑定到window
* 构造器调用模式:this被绑定到新生成的对象。
* 事件处理调用模式分两种情况:参照
* this被绑定到全局对象

<script type="text/javascript"> 
function click_handler() { 
alert(this); // alerts the window object 
} 
</script> 
... 
<button id='thebutton' onclick='click_handler()'>Click me!</button>

* this被绑定到DOM对象
<script type="text/javascript"> 
function click_handler() { 
alert(this); // alerts the button DOM node 
} 
function addhandler() { 
document.getElementById('thebutton').onclick = click_handler; 
} 
window.onload = addhandler; 
</script> 
... 
<button id='thebutton'>Click me!</button>

由于函数调用的上下文的变化导致了this的不确定性。为了更好的明确this上下文,可以使用call和apply两个方法来明确化this绑定的值。
call和apply的区别仅仅在于参数上的区别:call接受任意参数列表,apply接受一个参数数组对象。这也使得apply可以接受arguments作为其第二参数。
func.call(obj1,var1,var2,var3) 
func.apply(obj1, [var1,var2,var3]) 
func.apply(obj1, arguments)

但是call和apply方式都是立即执行的,如果需要后来使用的话,就不能满足条件,如下例,其中13行和14行无论是否使用call都无法得到我们需要的值(42)。
<script type="text/javascript"> 
function BigComputer(answer) { 
this.the_answer = answer; 
this.ask_question = function () { 
alert(this.the_answer); 
} 
} 
function addhandler() { 
var deep_thought = new BigComputer(42), 
the_button = document.getElementById('thebutton'); 
//the_button.onclick = deep_thought.ask_question; 
the_button.onclick = deep_thought.ask_question.call(deep_thought); 
} 
window.onload = addhandler; 
</script>

这个时候就是bind方法大显身手的时候(该方法已经在ECMA-262第五版已经加入),最早出现在Prototype框架中(未确认过)。bind和call,apply一样,也是变更函数执行的上下文,也即函数执行时this的值。不同的在于,它返回一个函数引用以供后续使用,其简单实现如下:
Function.prototype.bind = function(object) { 
var method = this; 
return function() { 
method.apply(object, arguments); 
} 
}

具体实现上利用闭包特性,返回来的函数引用在执行的时候,可以访问创建该函数引用时的method和object两个参数,而不是使用this,this在执行的时候会重新被绑定,而不是原来的method这个值。
Javascript 相关文章推荐
在JavaScript中获取请求的URL参数[正则]
Dec 25 Javascript
js使用eval解析json(js中使用json)
Jan 17 Javascript
ECMAScript5(ES5)中bind方法使用小结
May 07 Javascript
JavaScript实现自动变换表格边框颜色
May 08 Javascript
js简单网速测试方法完整实例
Dec 15 Javascript
JavaScript解八皇后问题的方法总结
Jun 12 Javascript
jQuery快速实现商品数量加减的方法
Feb 06 Javascript
JS高仿抛物线加入购物车特效实现代码
Feb 20 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
Angular CLI在Angular项目中如何使用scss详解
Apr 10 Javascript
vue3修改link标签默认icon无效问题详解
Oct 09 Javascript
vue实现评论列表功能
Oct 25 Javascript
StringTemplate遇见jQuery冲突的解决方法
Sep 22 #Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
Sep 22 #Javascript
javascript代码编写需要注意的7个小细节小结
Sep 21 #Javascript
extjs 初始化checkboxgroup值的代码
Sep 21 #Javascript
基于jquery的一个拖拽到指定区域内的效果
Sep 21 #Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
Sep 21 #Javascript
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
Sep 21 #Javascript
You might like
PHP设计模式之解释器模式的深入解析
2013/06/13 PHP
php结合安卓客户端实现查询交互实例
2015/05/05 PHP
PHP 中 DOMDocument保存xml时中文出现乱码问题的解决方案
2016/09/19 PHP
PHP中的使用curl发送请求(GET请求和POST请求)
2017/02/08 PHP
php mysql数据库操作类(实例讲解)
2017/08/06 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
Chrome中JSON.parse的特殊实现
2011/01/12 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
2013/05/07 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
2013/07/09 Javascript
js实现文本框中焦点在最后位置
2014/03/04 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
jquery uploadify 在FF下无效的解决办法
2014/09/26 Javascript
JavaScript参数个数可变的函数举例说明
2014/10/10 Javascript
jQuery的内容过滤选择器学习教程
2016/04/18 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
2016/05/16 Javascript
实例分析nodejs模块xml2js解析xml过程中遇到的坑
2017/03/18 NodeJs
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
2018/02/08 Javascript
vue router 通过路由来实现切换头部标题功能
2019/04/24 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
2019/10/11 Javascript
Angular value与ngValue区别详解
2019/11/27 Javascript
聊聊vue 中的v-on参数问题
2021/01/29 Vue.js
Python实现邮件的批量发送的示例代码
2018/01/23 Python
Python Opencv任意形状目标检测并绘制框图
2019/07/23 Python
使用Python为中秋节绘制一块美味的月饼
2019/09/11 Python
wxpython绘制音频效果
2019/11/18 Python
Mac 使用python3的matplot画图不显示的解决
2019/11/23 Python
Pytorch实现神经网络的分类方式
2020/01/08 Python
python模拟点击在ios中实现的实例讲解
2020/11/26 Python
专科毕业生学习生活的自我评价
2013/10/26 职场文书
成龙霸王洗发水广告词
2014/03/14 职场文书
2015年志愿者服务工作总结
2015/04/20 职场文书
2016年春季运动会加油稿
2015/07/22 职场文书
2015初中团委工作总结
2015/07/28 职场文书
2015年物业公司保洁工作总结
2015/10/22 职场文书
Redis中一个String类型引发的惨案
2021/07/25 Redis