javascript中的this关键字用法_js中用this关键字为什么一定不了父元素-优快云博客

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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