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操作userdata
Apr 27 Javascript
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
Mar 09 Javascript
JQuery的Alert消息框插件使用介绍
Oct 09 Javascript
JavaScript中函数声明优先于变量声明的实例分析
Mar 01 Javascript
jquery控制display属性为none或block
Mar 31 Javascript
Node.js实现文件上传
Jul 05 Javascript
Javascript中作用域的详细介绍
Oct 06 Javascript
vuex进阶知识点巩固
May 20 Javascript
Node.js中的cluster模块深入解读
Jun 11 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
关于element的表单组件整理笔记
Feb 05 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
地球防卫队:陪着奥特曼打小怪兽的人类力量 那些经典队服
2020/03/08 日漫
php GeoIP的使用教程
2011/03/09 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
javascript 进度条 实现代码
2009/07/30 Javascript
jquery插件开发注意事项小结
2013/06/04 Javascript
Js操作树节点自动折叠展开的几种方法
2014/05/05 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
2015/07/27 Javascript
js实现分割上传大文件
2016/03/09 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
2016/06/06 Javascript
仿百度换肤功能的简单实例代码
2016/07/11 Javascript
JavaScript实现瀑布流图片效果
2017/06/30 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
2017/07/12 jQuery
vue利用better-scroll实现轮播图与页面滚动详解
2017/10/20 Javascript
python之wxPython菜单使用详解
2014/09/28 Python
Python数据结构之Array用法实例
2014/10/09 Python
python关闭windows进程的方法
2015/04/18 Python
在Python操作时间和日期之asctime()方法的使用
2015/05/22 Python
python3实现随机数
2018/06/25 Python
python list转矩阵的实例讲解
2018/08/04 Python
Python 转换RGB颜色值的示例代码
2019/10/13 Python
Python实现图像去噪方式(中值去噪和均值去噪)
2019/12/18 Python
浅谈Pytorch中的自动求导函数backward()所需参数的含义
2020/02/29 Python
HTML5 input新增type属性color颜色拾取器的实例代码
2018/08/27 HTML / CSS
Html5移动端div固定到底部实现底部导航条的几种方式
2021/03/09 HTML / CSS
销售人员个人求职信
2013/09/26 职场文书
实习护士自我鉴定
2013/10/13 职场文书
文明餐桌行动实施方案
2014/02/19 职场文书
社区学习雷锋活动总结
2014/04/25 职场文书
反对四风问题自我剖析材料
2014/09/29 职场文书
热情服务标语
2014/10/07 职场文书
党员三严三实心得体会
2014/10/13 职场文书
群众路线自我剖析范文
2014/11/04 职场文书
学习与创新自我评价
2015/03/09 职场文书
《老人与海鸥》教学反思
2016/02/16 职场文书
详解python网络进程
2021/06/15 Python
javascript实现计算器功能详解流程
2021/11/01 Javascript