PPK 谈 JavaScript 的 this 关键字

(事件处理)中用它，再接着是讲 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 |

| ----------------------- | |

| | |

| ----------------------- | |

| ----------------------- | | |

| | | | |

| ----------------------- | |

| |copy of doSomething()| <-- copy function |

| ----------------------- |

| |

----------------------------------------------------------

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

指向(referring)

要是用行内事件注册呢？

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

doSomething();

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

------------ window --------------------------------------

| / \ |

| | |

| this |

| ---------------- | |

| | HTML element | <-- this ----------------- |

| ---------------- | | 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 元素。

但是如果这么做：

alert(element.onclick)

得到的是

function onclick()

{

doSomething()

}

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

例子-拷贝

在下面示例中，this 写入 onclick 方法中：

element.onclick = function () {doSomething()}

element.attachEvent('onclick',doSomething)

例子-指向

在下面示例中，this 指向 window：

element.onclick = function () {doSomething()}

element.attachEvent('onclick',doSomething)

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

结合

使用行内事件注册时，也可以把 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';

}

PPK 谈 JavaScript 的 this 关键字相关推荐

[译]PPK 谈 JavaScript 的 this 关键字
原文:JavaScript - The this keyword 在 JavaScript 中 this 是最重要的关键字之一.这篇贴文就是要告诉你如何用好 this. 下面我先讲如何在event h ...
读PPK谈javascript
第5章核心 1.调用对象未定义的属性没问题,返回undefined;但如果调用对象未定义的方法,则会引起浏览器错误提示. 2.对象属性和方法的调用方式: 例:var obj = {a:10, b ...
浅谈javascript中原型（prototype）、构造函数、对象实例及三者之间的关系
转自:http://www.cnblogs.com/zhangwei412827/archive/2012/12/14/2816263.html 浅谈javascript中原型(prototype). ...
浅谈JavaScript作用域，关于Java的学习路线资料
javascript是目前web领域中使用非常广泛的语言,不管是在前端还是在后端都能看到它的影子,可以说web从业者不论怎样都绕不开它.在前端领域,各种框架层出不穷.在后端领域,nodejs可谓如火如 ...
浅谈 JavaScript 编程语言的编码规范--转载
原文:http://www.ibm.com/developerworks/cn/web/1008_wangdd_jscodingrule/ 对于熟悉 C/C++ 或 Java 语言的工程师来说,Jav ...
JavaScript 中的 require / exports、import / export、浅谈JavaScript、ES5、ES6
Node.js 的基础教学之 exports 和 module.exports:https://zhuanlan.zhihu.com/p/82057593 浅谈 JavaScript.ES5.ES6 ...
浅谈 JavaScript 编程语言的编码规范
转自:http://www.ibm.com/developerworks/cn/web/1008_wangdd_jscodingrule/?ca=drs-tp4608 developerWorks 中 ...
ppk on JavaScript第二章：背景（完结篇）
无障碍规则尽管无法预见可能损害一个有脚本网站的可用性的所有情形,但我已经总结出一些可以帮助您在基础上不犯错的规则.不要把它们当作JavaScript和无障碍的终极规则,这只是能防止一些常见低级错误的 ...
深入解析Javascript中this关键字的使用
深入解析Javascript中面向对象编程中的this关键字在Javascript中this关键字代表函数运行时,自动生成的一个内部对象,只能在函数内部使用.比如: function TestFun ...

PPK 谈 JavaScript 的 this 关键字

PPK 谈 JavaScript 的 this 关键字相关推荐

最新文章

热门文章