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 绑定键盘鼠标事件示例代码
Feb 12 Javascript
Javascript中Date类型和Math类型详解
Feb 27 Javascript
javascript实现延时显示提示框特效代码
Apr 27 Javascript
AngularJs concepts详解及示例代码
Sep 01 Javascript
canvas实现手机端用来上传用户头像的代码
Oct 20 Javascript
JavaScript中日常收集常见的10种错误(推荐)
Jan 08 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
Jul 19 Javascript
详解vue mixins和extends的巧妙用法
Dec 20 Javascript
微信小程序三级联动选择器使用方法
May 19 Javascript
vue如何将v-for中的表格导出来
May 07 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
Jul 18 Javascript
Vue.js 无限滚动列表性能优化方案
Dec 02 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实现的漂亮分页方法
2014/04/17 PHP
PHP入门教程之PHP操作MySQL的方法分析
2016/09/11 PHP
php 伪造HTTP_REFERER页面URL来源的三种方法
2016/09/22 PHP
PHP使用Nginx实现反向代理
2017/09/20 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
JS去除字符串的空格增强版(可以去除中间的空格)
2009/08/26 Javascript
JavaScript是否可实现多线程  深入理解JavaScript定时机制
2009/12/22 Javascript
Javascript 静态页面实现随机显示广告的办法
2010/11/17 Javascript
学习javascript,实现插入排序实现代码
2011/07/31 Javascript
Js如何判断客户端是PC还是手持设备简单分析
2012/11/22 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2013/10/24 Javascript
JavaScript SetInterval与setTimeout使用方法详解
2013/11/15 Javascript
快速掌握Node.js模块封装及使用
2016/03/21 Javascript
JS获取checkbox的个数简单实例
2016/08/19 Javascript
jquery获取点击控件的绝对位置简单实例
2016/10/13 Javascript
js以及jquery实现手风琴效果
2020/04/17 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
2017/10/19 jQuery
微信小程序radio组件使用详解
2018/01/31 Javascript
如何在vue中使用ts的示例代码
2018/02/28 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
2020/10/09 Javascript
在Python下尝试多线程编程
2015/04/28 Python
python清除字符串里非数字字符的方法
2015/07/02 Python
利用ctypes提高Python的执行速度
2016/09/09 Python
Python实现统计代码行的方法分析
2017/07/12 Python
Python使用pymongo库操作MongoDB数据库的方法实例
2019/02/22 Python
Python代码覆盖率统计工具coverage.py用法详解
2020/11/25 Python
python日志通过不同的等级打印不同的颜色(示例代码)
2021/01/13 Python
英国简约舒适女装品牌:Great Plains
2018/07/27 全球购物
override和overload的区别
2016/03/09 面试题
实习自我评价怎么写
2013/12/02 职场文书
药店促销活动策划方案
2014/08/24 职场文书
乡镇党委书记第三阶段个人整改措施
2014/09/16 职场文书
教育局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
文言文辞职信
2015/02/28 职场文书
Java Dubbo框架知识点梳理
2021/06/26 Java/Android
对讲机知识
2022/04/07 无线电