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 相关文章推荐
JS Excel读取和写入操作(模板操作)实现代码
Apr 11 Javascript
JS往数组中添加项性能分析
Feb 25 Javascript
javascript实现的固定位置悬浮窗口实例
Apr 30 Javascript
javascript动态设置样式style实例分析
May 13 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
Apr 08 Javascript
JS读写CSS样式的方法汇总
Aug 16 Javascript
js 中获取制定的cook信息实现方法
Nov 19 Javascript
JQuery实现图片轮播效果
May 08 jQuery
AngularJS常见过滤器用法实例总结
Jul 06 Javascript
浅谈Node.js爬虫之网页请求模块
Jan 11 Javascript
vue路由跳转传参数的方法
May 06 Javascript
Javascript实现打鼓效果
Jan 29 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
计算2000年01月01日起到指定日的天数
2006/10/09 PHP
PHP时间格式控制符对照表分享
2013/07/23 PHP
PHP eval函数使用介绍
2013/12/08 PHP
Yii隐藏URL中index.php的方法
2016/07/12 PHP
php array_udiff_assoc 计算两个数组的差集实例
2016/11/12 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
JavaScript 关键字屏蔽实现函数
2009/08/02 Javascript
jQuery动态添加删除select项(实现代码)
2013/09/03 Javascript
基于jquery的手风琴图片展示效果实现方法
2014/12/16 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
2016/11/07 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
2018/09/20 Javascript
koa源码中promise的解读
2018/11/13 Javascript
微信小程序基于Taro的分享图片功能实践详解
2019/07/12 Javascript
Node配合WebSocket做多文件下载以及进度回传
2019/11/07 Javascript
用js编写留言板
2020/03/17 Javascript
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
[01:14]辉夜杯战队访谈宣传片—NEWBEE.Y
2015/12/26 DOTA
python中使用smtplib和email模块发送邮件实例
2014/04/22 Python
详解Python命令行解析工具Argparse
2016/04/20 Python
Python中强大的命令行库click入门教程
2016/12/26 Python
Python使用回溯法子集树模板解决爬楼梯问题示例
2017/09/08 Python
Python中GIL的使用详解
2018/10/03 Python
Python列表list常用内建函数实例小结
2019/10/22 Python
python3 logging日志封装实例
2020/04/08 Python
CSS3实现多样的边框效果
2018/05/04 HTML / CSS
html5的自定义data-*属性与jquery的data()方法的使用
2014/07/02 HTML / CSS
Vans英国官方网站:美国南加州的原创极限运动潮牌
2017/01/20 全球购物
WebSphere面试题:在WebSphere里面如何部署一个应用
2015/08/02 面试题
微信营销策划方案
2014/02/24 职场文书
技术总监管理岗位职责
2014/03/09 职场文书
关于安全演讲稿
2014/05/09 职场文书
不错的求职信范文
2014/07/20 职场文书
小学优秀学生评语
2014/12/29 职场文书
暑期辅导班宣传单
2015/07/14 职场文书
Oracle 临时表空间SQL语句的实现
2021/09/25 Oracle
nginx之queue的具体使用
2022/06/28 Servers