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 相关文章推荐
ext jquery 简单比较
Apr 07 Javascript
JavaScript编写推箱子游戏
Jul 07 Javascript
jquery实现全选、反选、获得所有选中的checkbox
Sep 13 Javascript
AngularJS实用开发技巧(推荐)
Jul 13 Javascript
全面了解函数声明与函数表达式、变量提升
Aug 09 Javascript
Node.js的环境安装配置(使用nvm方式)
Oct 11 Javascript
探索Javascript中this的奥秘
Dec 11 Javascript
JS实现含有中文字符串的友好截取功能分析
Mar 13 Javascript
Vue.js 事件修饰符的使用教程
Nov 01 Javascript
js防抖和节流的深入讲解
Dec 06 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
vue学习笔记之过滤器的基本使用方法实例分析
Feb 01 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扩展图文教程
2008/12/12 PHP
PHP 文件上传功能实现代码
2009/06/24 PHP
php实现递归抓取网页类实例
2015/04/03 PHP
ThinkPHP简单使用memcache缓存的方法
2016/11/15 PHP
javascript URL编码和解码使用说明
2010/04/12 Javascript
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
javascript数组的使用
2013/03/28 Javascript
jQuery extend 的简单实例
2013/09/18 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
2014/06/23 Javascript
jQuery实现无限往下滚动效果代码
2016/04/16 Javascript
输入框点击时边框变色效果的实现方法
2016/12/26 Javascript
基于JQuery及AJAX实现名人名言随机生成器
2017/02/10 Javascript
p5.js入门教程之小球动画示例代码
2018/03/15 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
2018/05/07 Javascript
Vue项目引进ElementUI组件的方法
2018/11/11 Javascript
jQuery实现网页拼图游戏
2020/04/22 jQuery
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
利用Angular7开发一个Radio组件的全过程
2019/07/11 Javascript
vue组件系列之TagsInput详解
2020/05/14 Javascript
vue+axios 拦截器实现统一token的案例
2020/09/11 Javascript
vue实现可移动的悬浮按钮
2021/03/04 Vue.js
Linux下用Python脚本监控目录变化代码分享
2015/05/21 Python
python数据结构之图的实现方法
2015/07/08 Python
pytorch加载自定义网络权重的实现
2020/01/07 Python
python实现可下载音乐的音乐播放器
2020/02/25 Python
python 写一个文件分发小程序
2020/12/05 Python
Java如何调用外部Exe程序
2015/07/04 面试题
教师实习自我鉴定
2013/12/11 职场文书
高考备战决心书
2014/03/11 职场文书
师范类求职信
2014/06/21 职场文书
幼儿教师暑期培训方案
2014/08/27 职场文书
2015出纳试用期工作总结
2014/12/12 职场文书
年度考核个人总结
2015/03/06 职场文书
MySQL 使用SQL语句修改表名的实现
2021/04/07 MySQL
Python中json.load()和json.loads()有哪些区别
2021/06/07 Python
Linux中Nginx的防盗链和优化的实现代码
2021/06/20 Servers