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 相关文章推荐
基础的prototype.js常用函数及其用法
Mar 10 Javascript
JavaScript的public、private和privileged模式
Dec 28 Javascript
匹配任意字符的正则表达式写法
Apr 29 Javascript
jquery下onpropertychange事件的绑定方法
Aug 01 Javascript
JavaScript禁止页面操作的示例代码
Dec 17 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
May 17 Javascript
jQuery UI插件实现百度提词器效果
Nov 21 Javascript
js实现HTML中Select二级联动的实例
Jan 05 Javascript
vue.js响应式原理解析与实现
Jun 22 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
May 14 Javascript
100行代码实现vue表单校验功能(小白自编)
Nov 19 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笔记之:数据类型与常量的使用分析
2013/05/14 PHP
改写ThinkPHP的U方法使其路由下分页正常
2014/07/02 PHP
PHPStrom中实用的功能和快捷键大全
2015/09/23 PHP
玩转jQuery按钮 请告诉我你最喜欢哪些?
2012/01/08 Javascript
js replace正则表达式应用案例讲解
2013/01/17 Javascript
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
JS数字抽奖游戏实现方法
2015/05/04 Javascript
详解JS中遍历语法的比较
2017/04/07 Javascript
easyUI下拉列表点击事件使用方法
2017/05/18 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
2017/06/04 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
2017/11/03 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
2018/09/27 Javascript
vue动态删除从数据库倒入列表的某一条方法
2018/09/29 Javascript
layui使用表格渲染获取行数据的例子
2019/09/13 Javascript
如何基于javascript实现贪吃蛇游戏
2020/02/09 Javascript
Element Dialog对话框的使用示例
2020/07/26 Javascript
JS绘图Flot如何实现动态可刷新曲线图
2020/10/16 Javascript
[01:21]DOTA2新纪元-7.0新版本即将开启!
2016/12/11 DOTA
[52:10]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第二场 6.3
2018/06/04 DOTA
Python实现字符串的逆序 C++字符串逆序算法
2020/05/28 Python
jupyter notebook 写代码自动补全的实现
2020/11/02 Python
Clos19英国:高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
Bloomingdale’s阿联酋:选购奢华时尚、美容及更多
2020/09/22 全球购物
现在输入n个数字,以逗号,分开;然后可选择升或者降序排序;按提交键就在另一页面显示按什么排序,结果为,提供reset
2012/11/09 面试题
WSDL的操作类型主要有几种
2013/07/19 面试题
学前教育教师求职自荐信
2013/09/22 职场文书
文员个人的求职信范文
2013/09/26 职场文书
大学生求职信范文应怎么写
2014/01/01 职场文书
大学毕业生自荐书怎么写?
2014/01/06 职场文书
安全生产目标管理责任书
2014/07/25 职场文书
合作意向书
2014/07/30 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
六一儿童节开幕词
2015/01/29 职场文书
高中运动会广播稿
2015/08/19 职场文书
vue首次渲染全过程
2021/04/21 Vue.js