The 'this' keyword
来源:互联网 发布:网易云网络连接失败 编辑:程序博客网 时间:2024/05/01 23:34
The this keyword
See sections 5H and 7F of the book.
This page has been translated intoFrench,Russian,and Chinese.
One of the most powerful JavaScript keywords is this
. Unfortunatelyit is hard to use if you don't exactly know how it works.
Below I explain how to use it inevent handling.Later on I'll add some information about other uses of this
.
Owner
The question that we'll discuss for the remainder of the pageis: What does this
refer to in the function doSomething()
?
function doSomething() { this.style.color = '#cc0000';}
In JavaScript this
always refers to the “owner” of the functionwe're executing, or rather, to the object that a function is a method of.When we define our faithful function doSomething()
in a page, its owneris the page, or rather, the window
object (or global object) of JavaScript. An onclick
property, though, is owned by the HTML element it belongs to.
This "ownership" is the result of JavaScript's object oriented approach. See theObjects as associative arrays page for some moreinformation.
------------ window --------------------------------------| / \ || | || this || ---------------- | || | HTML element | <-- this ----------------- || ---------------- | | doSomething() | || | | ----------------- || -------------------- || | onclick property | || -------------------- || |----------------------------------------------------------
If we execute doSomething()
without any more preparation the this
keyword refers to the window and the function tries to change the style.color
of the window. Since thewindow doesn't have a style
object the function fails miserably and produces JavaScript errors.
Copying
So if we want to use this
to its full extent we have to take care that the function that uses itis "owned" by the correct HTML element. In other words, we have tocopy the function to our onclick property.Traditional event registration takes care of it.
element.onclick = doSomething;
The function is copied in its entirety to the onclick
property (which now becomesa method). So if the event handler is executed this
refers to the HTML element and itscolor
is changed.
------------ window --------------------------------------| || || || ---------------- || | HTML element | <-- this ----------------- || ---------------- | | doSomething() | || | | ----------------- || ----------------------- | || |copy of doSomething()| <-- copy function || ----------------------- || |----------------------------------------------------------
The trick is of course that we can copy the function to several event handlers. Each time this
will refer to the correct HTML element:
------------ window --------------------------------------| || || || ---------------- || | HTML element | <-- this ----------------- || ---------------- | | doSomething() | || | | ----------------- || ----------------------- | || |copy of doSomething()| <-- copy function || ----------------------- | || | || ----------------------- | || | another HTML element| <-- this | || ----------------------- | | || | | | || ----------------------- | || |copy of doSomething()| <-- copy function || ----------------------- || |----------------------------------------------------------
Thus you use this
to the fullest extent. Each time the function is called,this
refers to the HTML element that is currently handling the event, the HTMLelement that "owns" the copy of doSomething()
.
Referring
However, if you useinline event registration
<element onclick="doSomething()">
you do not copy the function! Instead, you refer to it, and the difference is crucial.The onclick
property does not contain the actual function, butmerely a function call:
doSomething();
So it says “Go to doSomething() and execute it.” Whenwe arrive at doSomething()
the this
keyword once again refers to the globalwindow object and the function returns error messages.
------------ window --------------------------------------| / \ || | || this || ---------------- | || | HTML element | <-- this ----------------- || ---------------- | | doSomething() | || | | ----------------- || ----------------------- / \ || | go to doSomething() | | || | and execute it | ---- reference to || ----------------------- function || |----------------------------------------------------------
The difference
If you want to use this
for accessing the HTML element that is handling the event,you must make sure that the this
keyword is actually written into the onclick
property.Only in that case does it refer to the HTML element the event handler is registeredto. So if you do
element.onclick = doSomething;alert(element.onclick)
you get
function doSomething(){this.style.color = '#cc0000';}
As you can see, the this
keyword is present in the onclick
method.Therefore it refers to the HTML element.
But if you do
<element onclick="doSomething()">alert(element.onclick)
you get
function onclick(){doSomething()}
This is merely a reference to function doSomething()
. The this
keyword is not present in the onclick
method so it doesn't refer to the HTML element.
Examples - copying
this
is written into the onclick
method in the following cases:
element.onclick = doSomethingelement.addEventListener('click',doSomething,false)element.onclick = function () {this.style.color = '#cc0000';}<element onclick="this.style.color = '#cc0000';">
Examples - referring
In the following cases this
refers to the window:
element.onclick = function () {doSomething()}element.attachEvent('onclick',doSomething)<element onclick="doSomething()">
Note the presence of attachEvent()
. The main drawback of theMicrosoft event registration modelis that attachEvent()
creates a reference to the function anddoes not copy it. Therefore it is sometimes impossible to know which HTML currently handlesthe event.
Combination
When using inline event registration you can also send this
to the functionso that you can still use it:
<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 doobj.style.color = '#cc0000';}
- The 'this' keyword
- the this keyword in javascript
- Day14-47.The this keyword
- js this keyword
- Understanding JavaScript this keyword
- JavaScript’s ‘this’ Keyword
- The explicit Keyword
- About the keyword Synchronized
- The const keyword
- The Java synchronized keyword
- The instanceof Keyword
- The instance of keyword
- The coproc keyword
- The cregister Keyword
- native, The Keyword Of Java
- Using the C "volatile" Keyword
- the usage of keyword const
- The volatile keyword in Java
- 一切都好起来
- excel中统计一列中相同内容的个数
- poj 1434 --Fill the Cisterns!(计算几何,二分)
- 会计本年利润结转
- kthread_run
- The 'this' keyword
- libtool 使用
- android下view的画布和Bitmap及叠加覆盖
- spring aop 日志记录
- 2个1000微法的电容串联是多少微法
- prim和dikjstra复习时。。。
- JAVA使用FTPClient类读写FTP
- 製作 Root Filesystem 映像檔(Image File)
- Jsp页面显示XML