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 getComputedStyle获取和设置style的原理
Oct 10 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
Nov 14 Javascript
js的touch事件的实际引用
Oct 13 Javascript
jquery操作select元素和option的实例代码
Feb 03 Javascript
AngularJS基础 ng-repeat 指令简单示例
Aug 03 Javascript
微信公众号 客服接口的开发实例详解
Sep 28 Javascript
ES6新特性八:async函数用法实例详解
Apr 21 Javascript
Angularjs 事件指令详细整理
Jul 27 Javascript
微信小程序自定义组件
Aug 16 Javascript
webpack3+React 的配置全解
Aug 21 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
Aug 03 Javascript
react 路由Link配置详解
Nov 11 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
Cannot modify header information错误解决方法
2008/10/08 PHP
APACHE的AcceptPathInfo指令使用介绍
2013/01/18 PHP
在Ubuntu 18.04上安装PHP 7.3 7.2和7.0的方法
2019/04/09 PHP
php给数组赋值的实例方法
2019/09/26 PHP
Gambit vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
javascript中的array数组使用技巧
2010/01/31 Javascript
js 设置选中行的样式的实现代码
2010/05/24 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
2013/06/24 Javascript
jQuery让控件左右移动的三种实现方法
2013/09/08 Javascript
利用原生JavaScript获取元素样式只是获取而已
2014/10/08 Javascript
javascript实现滑动解锁功能
2014/12/31 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
JS获取鼠标坐标位置实例分析
2016/01/20 Javascript
几种tab切换详解
2017/02/03 Javascript
简单实现js菜单栏切换效果
2017/03/04 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
2017/03/21 Javascript
基于JavaScript实现前端数据多条件筛选功能
2020/08/19 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
2017/10/16 Javascript
浅谈React Native Flexbox布局(小结)
2018/01/08 Javascript
微信小程序实现流程进度的图样式功能
2018/01/16 Javascript
使用百度地图实现地图网格的示例
2018/02/06 Javascript
基于element-ui组件手动实现单选和上传功能
2018/12/06 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
2019/06/18 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
2020/07/13 Javascript
vue组件开发之slider组件使用详解
2020/08/21 Javascript
html中创建并调用vue组件的几种方法汇总
2020/11/17 Javascript
vue二选一tab栏切换新做法实现
2021/01/19 Vue.js
Python使用ConfigParser模块操作配置文件的方法
2018/06/29 Python
Python 跨.py文件调用自定义函数说明
2020/06/01 Python
集体婚礼证婚词
2014/01/13 职场文书
运动会获奖感言
2014/02/11 职场文书
《中国的气候》教学反思
2014/02/23 职场文书
关于安全的广播稿
2014/10/23 职场文书
党性修养心得体会2016
2016/01/21 职场文书
Python 如何将integer转化为罗马数(3999以内)
2021/06/05 Python
Python可视化神器pyecharts绘制地理图表
2022/07/07 Python