Home > Web Front-end > JS Tutorial > Three ways to change the this pointer pointed to inside a javascript function_js object-oriented

Three ways to change the this pointer pointed to inside a javascript function_js object-oriented

WBOY
Release: 2016-05-16 18:28:53
Original
1643 people have browsed it

After checking a lot of information, I summarized the following three rules. These three rules can already solve all the problems I have encountered so far.
Rule 0: The function itself is a special type, most time, can be considered as a variable.

Copy code The code is as follows:

function a()
{
alert(this);
}

or
var a = function()
{
alert(this);
}

It can be thought of as creating a variable, and the value of this variable is a function.

Rule 1: If a function is the key value of an object, then this points to this object.
This rule is easy to understand:

Copy the code The code is as follows:

var a = function(obj)
{
alert(this == obj);
}

var o = {};
o.afun = a;
o.afun(o); //true


The function is a variable, but it can be bound to an object, and this will point to the o object.
It must be noted here that if there is no bound object, this will point to the window object by default.
A few examples:
Copy code The code is as follows:

function a()
{
//this == window
}

function a()
{
//this == window
function b()
{
//this == window
}
}

It must also be noted that binding is not transitive, such as the nested function above, a binding to the o object, then it affects the a function,
and b still points to the window.

Rule 2: If the function new is called, an object will be created, and this points to the newly created object.


var o = new a();
At this time, o is no longer a function, but in fact, it can be considered as such a process.
Create an object var o = {};
Then point this to o and initialize o through this.

Rule 3: You can change the pointer of this through apply

The binding of this apply is more flexible. In fact, the function of apply is similar to the following function .
Copy code The code is as follows:

var a = function (obj)
{
alert(this == obj);
};
obj.fun = a;
obj.fun(obj);//true

Simple, ok a.apply(obj, [obj]); // true

javascript's this can be simply considered as late binding. When there is no place to bind, window is bound by default.

Comprehensive example:
There is a very commonly used function each in jquery, which can bind the looped object elements to this for easy operation.
Here is just a simple demonstration:

Code
Copy the code The code is as follows:

function each(tagName, callback)
{
var lists = document.getElementsByTagName(tagName);
for (var i = 0; i < lists.length; i )
{
callback.apply(lists[i]);
}
}
each("a",
function ()
{
this.style. color = "red";
}
);

You can see that all the links in my header navigation have turned red.
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template