javascript中的this关键字用法

JavaScript中this关键字解析

最新推荐文章于 2025-11-30 09:20:25 发布

转载最新推荐文章于 2025-11-30 09:20:25 发布 · 371 阅读

文章标签：

#javascript #function #html #object #go

本文详细解释了JavaScript中this关键字的用法及含义，重点介绍了this如何根据函数调用方式的不同而指向不同的对象，包括传统事件注册和内联事件注册等场景。

In JavaScript this always refers to the “owner” of the function we're executing, or rather, to the object that a function is a method of.

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

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

1. Copy---------------Traditional event registration--------------the element

element.onclick = doSomething;

The function is copied in its entirety to the onclick property (which now becomes a method). So if the event handler is executed this refers to the HTML element and its color is changed.

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

表示元素的例子包括：

element.onclick = doSomething
element.addEventListener('click',doSomething,false)
element.onclick = function () {this.style.color = '#cc0000';}
<element οnclick="this.style.color = '#cc0000';">

2.Reference--------------- inline event registration--------------this指向全局变量window

doSomething();

So it says “Go to doSomething() and execute it.” When we arrive atdoSomething() the this keyword once again refers to the global window object and the function returns error messages.

this 表示window对象的例子

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

from: http://www.quirksmode.org/js/this.html