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跑步算法的实现代码
Dec 04 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
Aug 07 Javascript
AngularJS 整理一些优化的小技巧
Aug 18 Javascript
jquery滚动条插件(可以自定义)
Dec 11 Javascript
原生node.js案例--前后台交互
Feb 20 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
Dec 20 Javascript
vue.js的computed,filter,get,set的用法及区别详解
Mar 08 Javascript
js 图片转base64的方式(两种)
Apr 24 Javascript
ng-repeat指令在迭代对象时的去重方法
Oct 02 Javascript
js实现图片跟随鼠标移动效果
Oct 16 Javascript
解决Nuxt使用axios跨域问题
Jul 06 Javascript
解决vue组件销毁之后计时器继续执行的问题
Jul 21 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
一个目录遍历函数
2006/10/09 PHP
杏林同学录(八)
2006/10/09 PHP
PHP常用的文件操作函数经典收藏
2013/04/02 PHP
PHP使用ActiveMQ实现消息队列的方法详解
2019/05/31 PHP
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
2010/06/28 Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
2012/05/14 Javascript
页面回到顶部的三种实现(锚标记,js)
2012/10/01 Javascript
javascript分页代码实例分享(js分页)
2013/12/13 Javascript
js简单抽奖代码
2015/01/16 Javascript
js+html5绘制图片到canvas的方法
2015/06/05 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
2016/11/29 Javascript
AngularJS 防止页面闪烁的方法
2017/03/09 Javascript
浅谈webpack SplitChunksPlugin实用指南
2018/09/17 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
2019/09/06 Javascript
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
python访问mysql数据库的实现方法(2则示例)
2016/01/06 Python
python中Matplotlib实现绘制3D图的示例代码
2017/09/04 Python
Python实现按特定格式对文件进行读写的方法示例
2017/11/30 Python
python DataFrame 修改列的顺序实例
2018/04/10 Python
利用Python代码实现一键抠背景功能
2019/12/29 Python
Python加密模块的hashlib,hmac模块使用解析
2020/01/02 Python
TensorFlow 多元函数的极值实例
2020/02/10 Python
详解anaconda离线安装pytorchGPU版
2020/09/08 Python
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
车间操作工岗位职责
2013/12/19 职场文书
党组织公开承诺书
2014/03/29 职场文书
优质服务演讲稿
2014/05/14 职场文书
优秀教育工作者事迹材料
2014/12/24 职场文书
飞屋环游记观后感
2015/06/08 职场文书
幼儿园小班开学寄语(2016秋季)
2015/12/03 职场文书
2019餐饮行业创业计划书!
2019/06/27 职场文书
导游词之永泰公主墓
2019/12/04 职场文书
Pygame Event事件模块的详细示例
2021/11/17 Python
使用Redis做预定库存缓存功能
2022/04/02 Redis
Spring Boot项目传参校验的最佳实践指南
2022/04/05 Java/Android