PPK 谈 JavaScript 的 this 关键字 [翻译]


Posted in Javascript onSeptember 29, 2009

下面先讲如何在event handling(事件处理)中用它,再接着是讲 this 的其他用法。

自己本身

先来看看函数 doSomething() 里的 this 到底是指向(refer to)了什么?

function doSomething() {
  this.style.color = '#cc0000';
}

JavaScript的 this 总指向所运行的函数“自己本身”。也就是说,它是一种指向函数对象的方法。在页面中定义 doSomething() 函数,自己本身是指页面。也就是说,是指 JavaScript 的 window 对象(全局对象)。而 onclick 属性它自己本身是属 HTML 元素所有。

这个“所有权”是 JavaScript 的 OO(面向对象)特性的后果。在 把对象作关联数组 页面中有更多信息。

------------ window --------------------------------------
|                     / \      |
|                      |      |
|                     this     |
|  ----------------            |      |
|  | HTML element | <-- this     ----------------- |
|  ----------------   |      | doSomething() | |
|        |     |      ----------------- |
|     --------------------             |
|     | onclick property |             |
|     --------------------             |
|                            |
----------------------------------------------------------

如果 doSomething() 运行时没有任何与之预留相关的话,关键字 this 指向 window(窗口) ,该函数将会改动 window 的 style.color。而 window 没有 style 这样的对象,所以该函数会引发 JavaScript 的错误。

拷贝(copying)

因此,用好 this 有些难度。像在函数中使用的上面例子的这种情况,它应该指向 HTML 元素“自己本身”。换个说法是,有个函数拷贝指向 onclick 属性。 我们来看看在传统事件注册中的情况。

element.onclick = doSomething;

因为函数拷贝全指向了 onclick 属性(现在变成了方法),所以在事件处理执行时,this 指向 HTML 元素并将 color 改动。

------------ window --------------------------------------
|                            |
|                            |
|                            |
|  ----------------                   |
|  | HTML element | <-- this     ----------------- |
|  ----------------   |      | doSomething() | |
|        |     |      ----------------- |
|     -----------------------     |      |
|     |copy of doSomething()| <-- copy function  |
|     -----------------------            |
|                            |
----------------------------------------------------------

这可以让我们为多个事件处理给它函数拷贝。每次 this 将指向正确的 HTML 元素:

------------ window --------------------------------------
|                            |
|                            |
|                            |
|  ----------------                   |
|  | HTML element | <-- this     ----------------- |
|  ----------------   |      | doSomething() | |
|        |     |      ----------------- |
|     -----------------------     |      |
|     |copy of doSomething()| <-- copy function  |
|     -----------------------     |      |
|                      |      |
|  -----------------------         |      |
|  | another HTML element| <-- this    |      |
|  -----------------------   |      |      |
|        |        |      |      |
|     -----------------------     |      |
|     |copy of doSomething()| <-- copy function  |
|     -----------------------            |
|                            |
----------------------------------------------------------

每次函数被调用,this 指向当前所处理的事件的那个 HTML 元素(“自己本身” doSomething() 的拷贝)。

指向(referring)

要是用 行内事件注册呢?

<element onclick="doSomething()">

这里没有拷贝函数,而是指向它,有什么不一样呢? 这个 onclick 属性没有包含实际函数,而只是一个函数调用。

doSomething();

上面的意思是:“到 doSomething() 那里去执行它”。在doSomething()里面,this 关键字再次指向全局 window 对象,那么函数会返回错误的消息。

------------ window --------------------------------------
|                     / \      |
|                      |      |
|                     this     |
|  ----------------            |      |
|  | HTML element | <-- this     ----------------- |
|  ----------------   |      | doSomething() | |
|        |     |      ----------------- |
|     -----------------------     / \      |
|     | go to doSomething() |     |      |
|     | and execute it   | ---- reference to   |
|     -----------------------    function    |
|                            |
----------------------------------------------------------

不一样?

如果是用 this 去访问 HTML 元素来处理事件的话,那么必须肯定它实际是写入了 onclick 属性中。而它指向 HTML 元素的事件处理就算已注册。如果这么做:

element.onclick = doSomething;
alert(element.onclick)

得到的是

function doSomething()
{
	this.style.color = '#cc0000';
}

可以看到,this 关键字在 onclick 方法中。它指向 HTML 元素。

但是如果这么做:

<element onclick="doSomething()">
alert(element.onclick)

得到的是

function onclick()
{
	doSomething()
}

这里只是指向函数 doSomething()。this 关键字不在 onclick 方法中。它没有指向 HTML 元素。

例子-拷贝

在下面示例中,this 写入 onclick 方法中:

element.onclick = function () {doSomething()}
element.attachEvent('onclick',doSomething)
<element onclick="doSomething()">

例子-指向

在下面示例中,this 指向 window:

element.onclick = function () {doSomething()}
element.attachEvent('onclick',doSomething)
<element onclick="doSomething()">

要注意上面的 attachEvent。它的缺点是微软事件注册模型,它创建了指向该函数,而且没有拷贝它。所以有时不可能弄清楚 HTML 当前的处理事件是哪个。

结合

使用行内事件注册时,也可以把 this 发送到函数。所以可以这么用:

<element onclick="doSomething(this)">
 
function doSomething(obj) {
	// this is present in the event handler and is sent to the function
	// obj now refers to the HTML element, so we can do
	obj.style.color = '#cc0000';
}
Javascript 相关文章推荐
jquery中show()、hide()和toggle()用法实例
Jan 15 Javascript
JavaScript实现获取dom中class的方法
Feb 09 Javascript
基于jQuery实现网页进度显示插件
Mar 04 Javascript
javascript弹出带文字信息的提示框效果
Jul 19 Javascript
Angular路由简单学习
Dec 26 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
Jan 23 Javascript
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
JS实现字符串中去除指定子字符串方法分析
May 17 Javascript
微信小程序中使用wxss加载图片并实现动画效果
Aug 13 Javascript
vue实现购物车小案例
Sep 27 Javascript
对vue中的事件穿透与禁止穿透实例详解
Oct 28 Javascript
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
一个JS小玩意 几个属性相加不能超过一个特定值.
Sep 29 #Javascript
IE FF OPERA都可用的弹出层实现代码
Sep 29 #Javascript
javascript 表单验证常见正则
Sep 28 #Javascript
javascript 页面划词搜索JS
Sep 28 #Javascript
jquery 模式对话框终极版实现代码
Sep 28 #Javascript
javascript的onchange事件与jQuery的change()方法比较
Sep 28 #Javascript
支持ie与FireFox的剪切板操作代码
Sep 28 #Javascript
You might like
如何取得中文字符串中出现次数最多的子串
2013/08/08 PHP
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
PHP随机生成唯一HASH值自定义函数
2015/04/20 PHP
php实现往pdf中加数字签名操作示例【附源码下载】
2018/08/07 PHP
JavaScript Konami Code 实现代码
2009/07/29 Javascript
js的延迟执行问题分析
2014/06/23 Javascript
基于canvas实现的绚丽圆圈效果完整实例
2016/01/26 Javascript
jQuery EasyUI中DataGird动态生成列的方法
2016/04/05 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
2016/10/31 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
2016/11/22 Javascript
nodejs实例解析(输出hello world)
2017/01/03 NodeJs
AngularJS 单选框及多选框的双向动态绑定
2017/04/20 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
2018/10/19 Javascript
Electron中实现大文件上传和断点续传功能
2018/10/28 Javascript
JS实现li标签的删除
2019/04/12 Javascript
[01:32]DOTA2次级联赛——首支职业女子战队选拔赛全记录
2014/10/23 DOTA
[28:57]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/16 DOTA
浅谈python正则的常用方法 覆盖范围70%以上
2018/03/14 Python
Python 普通最小二乘法(OLS)进行多项式拟合的方法
2018/12/29 Python
pycharm 将python文件打包为exe格式的方法
2019/01/16 Python
详解Python列表赋值复制深拷贝及5种浅拷贝
2019/05/15 Python
解决Pyinstaller 打包exe文件 取消dos窗口(黑框框)的问题
2019/06/21 Python
Python urllib.request对象案例解析
2020/05/11 Python
python中re模块知识点总结
2021/01/17 Python
CSS3 三维变形实现立体方块特效源码
2016/12/15 HTML / CSS
html5的websockets全双工通信详解学习示例
2014/02/26 HTML / CSS
Ryderwear美国官网:澳大利亚高端健身训练装备品牌
2018/04/24 全球购物
经典安踏广告词
2014/03/21 职场文书
教师拔河比赛广播稿
2014/10/14 职场文书
会议欢迎词范文
2015/01/27 职场文书
公司出差管理制度范本
2015/08/05 职场文书
纯CSS实现hover图片pop-out弹出效果的实例代码
2021/04/16 HTML / CSS
Python 快速验证代理IP是否有效的方法实现
2021/07/15 Python
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技
Win10 Anaconda安装python-pcl
2022/04/29 Servers