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 02 Javascript
跟着JQuery API学Jquery 之三 筛选
Apr 09 Javascript
原生js 秒表实现代码
Jul 24 Javascript
ECMAScript6新增值比较函数Object.is
Jun 12 Javascript
基于javascript实现彩票随机数生成(简单版)
Apr 17 Javascript
javascript实现label标签跳出循环操作
Mar 06 Javascript
基于javascript实现文字无缝滚动效果
Mar 22 Javascript
JavaScript弹窗基础篇
Apr 27 Javascript
mint-ui 时间插件使用及获取选择值的方法
Feb 09 Javascript
angular多语言配置详解
May 16 Javascript
微信小程序实现日历签到
Sep 21 Javascript
Node.js 中如何收集和解析命令行参数
Jan 08 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
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
PHP 数据库树的遍历方法
2009/02/06 PHP
php批量上传的实现代码
2013/06/09 PHP
Yii入门教程之Yii安装及hello world
2014/11/25 PHP
php实现用手机关闭计算机(电脑)的方法
2015/04/22 PHP
js基于qrcode.js生成二维码的方法【附demo插件源码下载】
2016/12/28 PHP
PHP中有关长整数的一些操作教程
2019/09/11 PHP
javascript基础的动画教程,直观易懂
2007/01/10 Javascript
pjblog修改技巧汇总
2007/03/12 Javascript
javascript面向对象之Javascript 继承
2010/05/04 Javascript
jquery 弹出层注册页面等(asp.net后台)
2010/06/17 Javascript
JQuery.Ajax之错误调试帮助信息介绍
2013/07/04 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
JS获取元素多层嵌套思路详解
2016/05/16 Javascript
利用Bootstrap实现表格复选框checkbox全选
2016/12/21 Javascript
原生js实现打字动画游戏
2017/02/04 Javascript
详解JS中的立即执行函数
2017/02/24 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
2020/03/28 Javascript
Web安全之XSS攻击与防御小结
2018/12/13 Javascript
9种python web 程序的部署方式小结
2014/06/30 Python
Python实现字典的遍历与排序功能示例
2017/12/23 Python
Python实现的NN神经网络算法完整示例
2018/06/19 Python
win7下python3.6安装配置方法图文教程
2018/07/31 Python
Python设计模式之享元模式原理与用法实例分析
2019/01/11 Python
解决pytorch GPU 计算过程中出现内存耗尽的问题
2019/08/19 Python
使用Python构造hive insert语句说明
2020/06/06 Python
CSS+jQuery实现的在线答题功能
2015/04/25 HTML / CSS
html5服务器推送_动力节点Java学院整理
2017/07/12 HTML / CSS
HTML5拍照和摄像机功能实战详解
2019/01/24 HTML / CSS
英国领先的瓷砖专家:Walls and Floors
2018/04/27 全球购物
工厂门卫岗位职责范本
2014/04/04 职场文书
2014年教育培训工作总结
2014/12/08 职场文书
安全保证书
2015/01/16 职场文书
孟佩杰观后感
2015/06/17 职场文书
Python中json.load()和json.loads()有哪些区别
2021/06/07 Python
Python+Appium自动化测试的实战
2021/06/30 Python