Java programmer's JavaScript learning notes (3 -- this/call/apply)

Java programmer's JavaScript learning notes (3 -- this/call/apply)
We plan to complete this note in the following order:

Concept. Copy and inherit attributes. This/call/apply. Closure/getter/setter. Prototype. Object-Oriented Simulation. JQuery basic mechanism. JQuery selector. JQuery tool method. JQuery-extension at the class level. JQuery-extensions at the "object" level. JQuery-extension selector. JQuery UI. Extend the jQuery UI.

This is Part 1 of the notes. There are two special methods to call functions in JavaScript: call and apply.

This

This in JavaScript is significantly different from this in Java. If you have learned Java, please forget everything you know about this.

This in JavaScript depends on functions,Indicates the caller of the function.. There are two meanings: first, this is not the function itself; second, when the function is called, it determines who this points.

It can be divided into the following situations:

Call global functions

See the following code:

Code Segment 1:Function UiObject () {console. log (this. name | this. toString (); // output: [object Window] console. log (this = window); // output: true} UiObject ()

The default value is window, and this is window.

Call through an object

Code Segment 2:Function UiObject () {this. render = function (str) {console. log ('Render this ', str, 'by' + this. toString (); console. log (this = UiObject); // falseConsole. log (this = ui); // true} Var ui = new UiObject (); ui. render ();

What if the function is defined in the prototype?

Code Segment 3:Function UiObject () {} UiObject. prototype = {render: function (str) {console. log ('Render this ', str, 'by' + this. toString (); console. log (this = UiObject); // falseConsole. log (this = ui); // true, The result is the same, who calls this, who points to this}; var ui = new UiObject (); ui. render ();

The results are the same. Where is the definition not important? Who calls it is important. The girl who has milk is the mother. It doesn't matter who has it. It's a reality...
Write a code segment to make this feature more obvious, as shown below:

Code segment 4:Function hunt () {console. log ('to', this. name + ', my dear lord! I will hunt ', this.tar get,' as your wish. '); console. log (this = hailong); console. log (this = haichao);} var hailong = {name: 'Lord hailong', target: 'deer'}; var haichao = {name: 'Lord haichao ', target: 'Little-Japs '}; hailong. hunt = hunt; // output: To Lord Hailong, my dear lord! I will hunt deer as your wish. // output: true -- console. log (this = hailong); // output: false -- console. log (this = haichao); hailong. hunt (); haichao. kill = hunt; // output: To Lord Haichao, my dear lord! I will hunt Little-Japs as your wish. // output: false -- console. log (this = hailong); // output: true -- console. log (this = haichao); haichao. kill ();

If milk is the mother, whoever calls this will point to whom.

Called by event


The event is called in the following situations:

1,

2. oDiv. onclick = theFunc;

In 1st, this points to window, in 2nd, and this points to oDiv.




Arguments

Similar to this, when a function is called, argmuments is assigned an input parameter array.


You can use arguments. length to obtain the number of input parameters, and you can use arguments [idx] to obtain the value of the input parameter.




Based on this feature, we need special methods to flexibly control the point of this.

JavaScript provides two methods: call and apply.
Call

When calling a function, you can use the call method to specify the caller, thus implementing flexible binding to this. Syntax:

Func. call (invokerObject );

Func is a function, and invokerObject will be designated as the caller of the function. Let's look at the example below.

Code segment 5:
Function hunt () {} var hailong = {name: 'Lord hailong', target: 'deer'}; var haichao = {name: 'Lord haichao', target: 'Little-Japs '}; function printName () {console. log ('name: ', this. name);} printName. call (hunt); printName. call (hailong); printName. call (haichao );
After the printName method is defined, you want to apply the printName method to several objects such as hunt, hailong, and haichao. You can use the call function. This in the printName function successfully points to the object passed in through the call parameter.
PrintName. call (hailong)
Equivalent to the following statement:
Hailong. printName = printName;
Hailong. printName ();
Delete haiong. printName;

Apply
Call a function through the call method. If there is a parameter, it is passed in from the second parameter of the call method. Syntax:
Function func (p1, p2, p3 ){}
Func. call (targetObject, p1, p2, p3)
The apply method and the call Method Implement the same functions. The difference is that when a parameter is passed in, all parameters form an array and are passed as the second parameter of apply. The syntax is as follows:
Func. apply (targetObject, [p1, p2, p3])
The apply method is more convenient when used with arguments.

Understanding the meaning of this is the foundation. Call and apply can be used to flexibly bind the value of this.