javascript this用法小结


Posted in Javascript onDecember 19, 2008

this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象。但是在javascript中,由于 javascript的动态性(解释执行,当然也有简单的预编译过程),this的指向在运行时才确定。这个特性在给我们带来迷惑的同时也带来了编程上的 自由和灵活,结合apply(call)方法,可以使JS变得异常强大。
2.变化的this
在JavaScript中,this通常指向的是我们正在执行的函数本身,或者是指向该函数所属的对象(运行时)。当我们在页面中定义了函数 doSomething()的时候,它的owner是页面,或者是JavaScript中的window对象(或 global对象)。对于一个onclick属性,它为它所属的HTML元素所拥有,this应该指向该HTML元素。
2.1在几种常见场景中this的变化
函数示例
function doSomething ()
{
alert(this.navigator); //appCodeName
this.value = "I am from the Object constructor";
this.style.backgroundColor = "# 000000";
}
1. (A)作为普通函数直接调用时,this指向window对象.
2. (B)作为控件事件触发时
1) inline event registration 内联事件注册 .将事件直接写在HTML代码中(<element
onclick=”doSomething()”>), 此时this指向 window对象 。
2) Traditional event registration 传统事件注册 (DHTML方式).
形如 element.onclick = doSomething; 此时this指向 element对象
3) <element onclick=”doSomething(this)”>作为参数传递可以指向element
3. (C)作为对象使用时this指向当前对象。形如:new doSomething();
4. (D)使用apply 或者call方法时,this指向所传递的对象。
形如:var obj={}; doSomething.apply(obj,new Array(”nothing”); //thisàobj

下面我来阐述如何在事件处理中来使用this,之后我会附加一些this相关的例子。
Owner
接下来文章中我们将要讨论的问题是:在函数doSomething()中this所指的是什么?
Javascript代码
function doSomething() {
this.style.color = '#cc0000';
}
function doSomething() {
this.style.color = '#cc0000';
}
在JavaScript中,this通常指向的是我们正在执行的函数本身(译者注:用owner代表this所指向的内容),或者是,指向该函数所属的对象。当我们在页面中定义了函数doSomething()的时候,它的owner是页面,或者是JavaScript中的window对象(或 global对象)。对于一个onclick属性,它为它所属的HTML元素所拥有,this应该指向该HTML元素。
这种“所有权”就是JavaScript中面向对象的一种方式。在Objects as associative arrays中可以查看一些更多的信息。
javascript this用法小结 
如果我们在没有任何更多准备情况下执行doSomething(),this关键字会指向window,并且该函数试图改变window的 style.color。因为window并没有style对象,这个函数将非常不幸的运行失败,并产生JavaScript错误。
Copying
因此如果我们想充分利用this,我们不得不注意使用this的函数应该被正确的HTML元素所拥有。换句话说,我们应该复制这个函数到我们的onclick属性。Traditional event registration会关心它。
Javascript代码
element.onclick = doSomething;
element.onclick = doSomething;
这个函数被完整复制到onclick属性(现在成为了函数)。因此如果这个event handler被执行,this将指向HTML元素,并且该元素的颜色得以改变。
javascript this用法小结 
这种方法使得我们能够复制这个函数到多个event handler。每次this都将指向正确的HTML元素:
javascript this用法小结 
这样你就可以最大限度使用this。每当执行该函数,this所指向的HTML元素都正确响应事件,这些HTML元素拥有doSomething()的一个拷贝。
Referring
然而,如果你使用inline event registration(内联事件注册)
Javascript代码
<element onclick="doSomething()">
<element onclick="doSomething()">
你将不能拷贝该函数!反而这种差异是非常关键的。onclick属性并不包含实际的函数,仅仅是一个函数调用。
Javascript代码
doSomething();
doSomething();
因此,它将声明“转到doSomething()并且执行它”。当我们到达doSomething(),this关键字又重新指向了全局的window对象,函数返回错误信息。
javascript this用法小结 
The difference
如果你想使用this来指向HTML元素响应的事件,你必须确保this关键字被写在onclick属性里。只有在这种情况下它才指向event handler所注册的HTML元素。
Javascript代码
element.onclick = doSomething;
alert(element.onclick)
element.onclick = doSomething;
alert(element.onclick)
你将得到
Javascript代码
function doSomething() {
this.style.color = '#cc0000';
}
function doSomething() {
this.style.color = '#cc0000';
}
正如你所见,this关键字被展现在onclick函数中,因此它指向HTML元素。
但是如果执行
Javascript代码
<element onclick="doSomething()">
alert(element.onclick)
<element onclick="doSomething()">
alert(element.onclick)
你将得到
Javascript代码
function onclick() {
doSomething()
}
function onclick() {
doSomething()
}
这仅仅是到doSomething()函数的一个引用。this关键字并没有出现在onclick函数中,因此它不指向HTML元素。
例子--拷贝
下面的例子中,this被写入onclick函数里:
Javascript代码
element.onclick = doSomething
element.addEventListener('click', doSomething, false)
element.onclick = function() {this.style.color = '#cc0000';}
<element onclick="this.sytle.color = '#cc0000';">
element.onclick = doSomething
element.addEventListener('click', doSomething, false)
element.onclick = function() {this.style.color = '#cc0000';}
<element onclick="this.sytle.color = '#cc0000';">
例子--引用
下述情况中,this指向window:
Javascript代码
element.onclick = function() {doSomething()}
element.attachEvent('onclick', doSomething)
<element onclick="doSomething()">
element.onclick = function() {doSomething()}
element.attachEvent('onclick', doSomething)
<element onclick="doSomething()">
注意attachEvent()的出现。Microsoft event registration model最主要的弊端是attachEvent()创建了一个指向函数的引用,而不是复制它。因此有时不可能知道哪个HTML正在处理该事件。
组合使用
当使用内联事件注册时,你可以将this发送到函数以至于可以正常使用:
Javascript代码
<element onclick="doSomething(this)">
function doSomething(obj) {
//this出现在event handler中并被发送到函数
//obj指向HTML元素,因此可以这样:
obj.style.color = '#cc0000';
}

Javascript 相关文章推荐
JS获取scrollHeight问题想到的标准问题
May 27 Javascript
初识JQuery 实例一(first)
Mar 16 Javascript
基于jquery的多功能软键盘插件
Jul 25 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
Nov 04 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
May 24 Javascript
JS实现点击事件统计的简单实例
Jul 10 Javascript
Vuejs第十二篇之动态组件全面解析
Sep 09 Javascript
vue-router实现组件间的跳转(参数传递)
Nov 07 Javascript
浅析node应用的timing-attack安全漏洞
Feb 28 Javascript
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
Vue实现类似Spring官网图片滑动效果方法
Mar 01 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
Jun 10 Javascript
js 提交和设置表单的值
Dec 19 #Javascript
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
Dec 19 #Javascript
简单通用的JS滑动门代码
Dec 19 #Javascript
比较全的JS checkbox全选、取消全选、删除功能代码
Dec 19 #Javascript
Javascript 获取LI里的内容
Dec 17 #Javascript
FLASH 广告之外的链接
Dec 16 #Javascript
用tip解决Ext列宽度不够的问题
Dec 13 #Javascript
You might like
WAR3重制版DOTA 5V5初体验
2020/04/09 DOTA
source.php查看源文件
2006/12/09 PHP
PHP操作Memcache实例介绍
2013/06/14 PHP
启用Csrf后POST数据时出现的400错误
2015/07/05 PHP
php 使用curl模拟登录人人(校内)网的简单实例
2016/06/06 PHP
ThinkPHP框架实现数据增删改
2017/05/07 PHP
php+javascript实现的动态显示服务器运行程序进度条功能示例
2017/08/07 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
javascript之dhDataGrid Ver2.0.0代码
2007/07/01 Javascript
编写兼容IE和FireFox的脚本
2009/05/18 Javascript
js猜数字小游戏的简单实现代码
2013/07/02 Javascript
node.js中的fs.open方法使用说明
2014/12/17 Javascript
jqueryUI里拖拽排序示例分析
2015/02/26 Javascript
任意Json转成无序列表的方法示例
2016/12/09 Javascript
纯js实现动态时间显示
2020/09/07 Javascript
javascript中call,apply,bind的区别详解
2020/12/11 Javascript
[01:19]DOTA2城市挑战赛报名开始 开启你的城市传奇
2018/03/23 DOTA
Python实现获取网站PR及百度权重
2015/01/21 Python
Python入门之三角函数全解【收藏】
2017/11/08 Python
解决pycharm无法调用pip安装的包问题
2018/05/18 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
详解Python列表赋值复制深拷贝及5种浅拷贝
2019/05/15 Python
使用Python为中秋节绘制一块美味的月饼
2019/09/11 Python
使用Matplotlib 绘制精美的数学图形例子
2019/12/13 Python
Python面向对象之继承原理与用法案例分析
2019/12/31 Python
解决使用python print打印函数返回值多一个None的问题
2020/04/09 Python
Python利用Xpath选择器爬取京东网商品信息
2020/06/01 Python
python regex库实例用法总结
2021/01/03 Python
CSS3 text shadow字体阴影效果
2016/01/08 HTML / CSS
美国在线宠物用品商店:Entirely Pets
2017/01/01 全球购物
简单的JAVA编程面试题
2013/03/19 面试题
行政专员的岗位职责
2014/03/10 职场文书
股份合作协议书范本
2014/04/14 职场文书
青奥会口号
2014/06/12 职场文书
员工试用期自我鉴定范文
2014/09/15 职场文书
四年级语文教学反思
2016/03/03 职场文书