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 removeChild 障眼法 可能出现的错误
Oct 06 Javascript
jquery获取tr中控件值并操作tr实现思路
Mar 27 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
Apr 23 Javascript
使用AngularJS实现表单向导的方法
Jun 19 Javascript
webpack打包node.js后端项目的方法
Mar 10 Javascript
Vue+mui实现图片的本地缓存示例代码
May 24 Javascript
微信小程序如何使用globalData的方法
Jun 06 Javascript
微信小程序中如何使用flyio封装网络请求
Jul 03 Javascript
vue 实现强制类型转换 数字类型转为字符串
Nov 07 Javascript
JavaScript Reflect Metadata实现详解
Dec 12 Javascript
JavaScript Window浏览器对象模型原理解析
May 30 Javascript
Vue之封装公用变量以及实现方式
Jul 31 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
模仿OSO的论坛(五)
2006/10/09 PHP
?算你??的 PHP 程式大小
2006/12/06 PHP
Yii不依赖Model的表单生成器用法实例
2014/12/04 PHP
PHP中预定义的6种接口介绍
2015/05/12 PHP
基于JQuery的模拟苹果桌面Dock效果(稳定版)
2012/10/15 Javascript
javascript感应鼠标图片透明度显示的方法
2015/02/24 Javascript
JavaScript观察者模式(经典)
2015/12/09 Javascript
JavaScript组件开发完整示例
2015/12/15 Javascript
js数字舍入误差以及解决方法(必看篇)
2017/02/28 Javascript
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
jQuery插件imgAreaSelect基础讲解
2017/05/26 jQuery
Angular 4.X开发实践中的踩坑小结
2017/07/04 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
2017/09/30 Javascript
常用的 JS 排序算法 整理版
2018/04/05 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
2019/01/25 Javascript
用原生 JS 实现 innerHTML 功能实例详解
2019/04/03 Javascript
深入理解webpack process.env.NODE_ENV配置
2020/02/23 Javascript
Vue组件间数据传递的方式(3种)
2020/07/13 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
2020/08/12 Javascript
angular *Ngif else用法详解
2020/12/15 Javascript
使用Typescript开发微信小程序的步骤详解
2021/01/12 Javascript
Python中MySQLdb和torndb模块对MySQL的断连问题处理
2015/11/09 Python
Python的math模块中的常用数学函数整理
2016/02/04 Python
Python中import导入上一级目录模块及循环import问题的解决
2016/06/04 Python
Python 打印中文字符的三种方法
2018/08/14 Python
详解Python静态网页爬取获取高清壁纸
2019/04/23 Python
Pandas之DataFrame对象的列和索引之间的转化
2019/06/25 Python
python selenium xpath定位操作
2020/09/01 Python
机械专业应届生求职信
2013/09/21 职场文书
前台文员我鉴定
2014/01/12 职场文书
护士求职信范文
2014/05/24 职场文书
机电系毕业生求职信
2014/07/11 职场文书
个人授权委托书范本格式
2014/10/12 职场文书
青少年法制教育心得体会
2016/01/14 职场文书
2016年社会主义核心价值观心得体会
2016/01/21 职场文书
http通过StreamingHttpResponse完成连续的数据传输长链接方式
2022/02/12 Python