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 相关文章推荐
jQuery load方法用法集锦
Dec 06 Javascript
jquery仿百度经验滑动切换浏览效果
Apr 14 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
Sep 11 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
Dec 20 Javascript
easyui combobox开启搜索自动完成功能的实例代码
Nov 08 Javascript
基于Angular.js实现的触摸滑动动画实例代码
Feb 19 Javascript
bootstrap IE8 兼容性处理
Mar 22 Javascript
angular2 ng build部署后base文件路径问题详细解答
Jul 15 Javascript
简单实现js拖拽效果
Jul 25 Javascript
layui中table表头样式修改方法
Aug 15 Javascript
详解js获取video任意时间的画面截图
Apr 17 Javascript
React四级菜单的实现
Apr 08 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 验证码制作(网树注释思想)
2009/07/20 PHP
解析thinkphp的左右值无限分类
2013/06/20 PHP
解析yahoo邮件用phpmailer发送的实例
2013/06/24 PHP
php基于websocket搭建简易聊天室实践
2016/10/24 PHP
magento后台无法登录解决办法的两种方法
2016/12/09 PHP
Yii2框架中使用PHPExcel导出Excel文件的示例
2017/08/09 PHP
Laravel模型事件的实现原理详解
2018/03/14 PHP
php集成开发环境详解
2019/09/24 PHP
FormValidate 表单验证功能代码更新并提供下载
2008/08/23 Javascript
一个收集图片的bookmarlet(js 刷新页面中的图片)
2010/05/27 Javascript
利用原生JavaScript获取元素样式只是获取而已
2014/10/08 Javascript
JavaScript设计模式之适配器模式介绍
2014/12/28 Javascript
js无法获取到html标签的属性的解决方法
2016/07/26 Javascript
jquery操作select取值赋值与设置选中实例
2017/02/28 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
2018/09/18 Javascript
layui输入框只允许输入中文且判断长度的例子
2019/09/18 Javascript
vue实现折线图 可按时间查询
2020/08/21 Javascript
浅谈Python Opencv中gamma变换的使用详解
2018/04/02 Python
Python3实现的Mysql数据库操作封装类
2018/06/06 Python
Python3.6中Twisted模块安装的问题与解决
2019/04/15 Python
Python简易版图书管理系统
2019/08/12 Python
python pandas移动窗口函数rolling的用法
2020/02/29 Python
教你如何用python操作摄像头以及对视频流的处理
2020/10/12 Python
selenium框架中driver.close()和driver.quit()关闭浏览器
2020/12/08 Python
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
2021/03/17 Javascript
JAVA招聘远程笔试题
2015/07/23 面试题
店长岗位的工作内容
2013/11/12 职场文书
个人简历中的自我评价怎么写
2014/01/26 职场文书
施工员岗位职责
2014/03/16 职场文书
校庆标语集锦
2014/06/25 职场文书
标准离婚协议书(2014版)
2014/10/05 职场文书
幼儿园小班家长评语
2014/12/30 职场文书
我的法兰西岁月观后感
2015/06/09 职场文书
对PyTorch中inplace字段的全面理解
2021/05/22 Python
PHP中国际化的字符串排序和比较对象详解
2021/08/23 PHP
我家女友可不止可爱呢 公开OP主题曲无字幕动画MV
2022/04/11 日漫