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数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
May 15 Javascript
微博@符号的用户名提示效果。(想@到谁?)
Nov 05 Javascript
script标签的 charset 属性使用说明
Dec 04 Javascript
AngularJS 表达式详细讲解及实例代码
Jul 26 Javascript
jquery设置css样式的多种方法(总结)
Feb 21 Javascript
jQuery实用密码强度检测
Mar 02 Javascript
详解使用VueJS开发项目中的兼容问题
Aug 02 Javascript
教你完全理解ReentrantLock重入锁
Jun 03 Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 Javascript
JavaScript实现秒杀时钟倒计时
Sep 29 Javascript
JS中比较两个Object数组是否相等方法实例
Nov 11 Javascript
JavaScript正则表达式验证登录实例
Mar 18 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
ThinkPHP模板输出display用法分析
2014/11/26 PHP
PHP cURL初始化和执行方法入门级代码
2015/05/28 PHP
利用Fix Rss Feeds插件修复WordPress的Feed显示错误
2015/12/19 PHP
如何离线执行php任务
2017/02/21 PHP
PHP实现文件上传功能实例代码
2017/05/18 PHP
基于laravel Request的所有方法详解
2019/09/29 PHP
High Performance JavaScript(高性能JavaScript)读书笔记分析
2011/05/05 Javascript
jquery实现动态画圆
2014/12/04 Javascript
jquery实现用户信息修改验证输入方法汇总
2015/07/18 Javascript
基于Javascript实现倒计时功能
2016/02/22 Javascript
Vue过滤器的用法和自定义过滤器使用
2017/02/08 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
2017/11/15 Javascript
解决使用vue.js路由后失效的问题
2018/03/17 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
2019/03/29 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
2020/07/31 Javascript
[40:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs TNC
2018/04/01 DOTA
[01:28:24]NAVI vs VG Supermajor 败者组 BO3 第三场 6.5
2018/06/06 DOTA
python使用clear方法清除字典内全部数据实例
2015/07/11 Python
python socket网络编程之粘包问题详解
2018/04/28 Python
Python学习_几种存取xls/xlsx文件的方法总结
2018/05/03 Python
python GUI库图形界面开发之PyQt5线程类QThread详细使用方法
2020/02/26 Python
python3 使用traceback定位异常实例
2020/03/09 Python
Python面向对象程序设计之私有变量,私有方法原理与用法分析
2020/03/23 Python
在Python中字典按值排序的实现方法
2020/11/12 Python
详解HTML5中的标签
2015/06/19 HTML / CSS
Speedo美国:澳大利亚顶尖泳衣制造商
2016/08/03 全球购物
海蓝之谜(LA MER)澳大利亚官方商城:全球高端奢华护肤品牌
2017/10/27 全球购物
优秀毕业生推荐信
2013/11/02 职场文书
仓管员岗位责任制
2014/02/19 职场文书
授权委托书样本
2014/04/03 职场文书
教书育人演讲稿
2014/09/11 职场文书
学习党的群众路线剖析材料
2014/10/09 职场文书
岳庙导游词
2015/02/04 职场文书
2015年政府采购工作总结
2015/05/21 职场文书
基于Python绘制子图及子图刻度的变换等的问题
2021/05/23 Python
Python爬虫入门案例之爬取二手房源数据
2021/10/16 Python