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操作文本框readOnly
May 15 Javascript
详解js跨域原理以及2种解决方案
Dec 09 Javascript
Bootstrap开关(switch)控件学习笔记分享
May 30 Javascript
15个非常实用的JavaScript代码片段
Dec 18 Javascript
详解jQuery事件
Jan 13 Javascript
使用bootstrap插件实现模态框效果
May 10 Javascript
微信小程序动态添加分享数据
Jun 14 Javascript
vue项目中的webpack-dev-sever配置方法
Dec 14 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
May 15 Javascript
JS canvas绘制五子棋的棋盘
May 28 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
Vue中computed和watch有哪些区别
Dec 19 Vue.js
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
Windows下的PHP5.0详解
2006/11/18 PHP
php实现两表合并成新表并且有序排列的方法
2014/12/05 PHP
PHP提高编程效率的20个要点
2015/09/23 PHP
php获取当前月与上个月月初及月末时间戳的方法
2016/12/05 PHP
javascript Onunload与Onbeforeunload使用小结
2009/12/31 Javascript
js和php如何获取当前url的内容
2013/09/22 Javascript
Javascript加载速度慢的解决方案
2014/03/11 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
js如何判断输入字符串长度
2015/12/16 Javascript
jquery.validate 自定义验证方法及validate相关参数
2016/01/18 Javascript
js验证真实姓名与身份证号,手机号的简单实例
2016/07/18 Javascript
基于Marquee.js插件实现的跑马灯效果示例
2017/01/25 Javascript
jQuery实现ajax无刷新分页页码控件
2017/02/28 Javascript
微信小程序module.exports模块化操作实例浅析
2018/12/20 Javascript
windows上安装Anaconda和python的教程详解
2017/03/28 Python
Python实现发送QQ邮件的封装
2017/07/14 Python
python爬虫爬取某站上海租房图片
2018/02/04 Python
python dataframe astype 字段类型转换方法
2018/04/11 Python
Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)
2018/04/18 Python
python调用百度语音识别实现大音频文件语音识别功能
2018/08/30 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
在Python中使用MySQL--PyMySQL的基本使用方法
2019/11/19 Python
python自动化实现登录获取图片验证码功能
2019/11/20 Python
Pytorch中膨胀卷积的用法详解
2020/01/07 Python
Python实现动态给类和对象添加属性和方法操作示例
2020/02/29 Python
Django QuerySet查询集原理及代码实例
2020/06/13 Python
Python常用类型转换实现代码实例
2020/07/28 Python
Jupyter notebook命令和编辑模式常用快捷键汇总
2020/11/17 Python
味多美官网:蛋糕订购,100%使用天然奶油
2017/11/10 全球购物
财务会计实习报告体会
2013/12/20 职场文书
知名企业招聘广告词大全
2014/03/18 职场文书
建筑工程专业大学生求职信
2014/04/23 职场文书
最美家庭活动方案
2014/08/31 职场文书
基层党支部整改方案
2014/10/25 职场文书
办公室卫生管理制度
2015/08/04 职场文书
mysql下的max_allowed_packet参数设置详解
2022/02/12 MySQL