Java Programmer's JavaScript Learning Note (3--this/call/apply)

plan to complete this note in the following order:

2. Idea.
4. Property replication and inheritance .
6. This/call/apply.
8. Closed Packet/getter/setter.
10. Prototype
12. Object-oriented simulation.
14. The basic mechanism of jquery.
16. jquery selector.
18. jquery Tool method.
20. jquery-extends at the class level.
22. jquery-extends at the "object" level.
24. jquery-extension Selector.
26. JQuery UI.
28. Extend the jquery UI.

This is the 3rd of the notes, a chat about this in JavaScript, and two special ways of calling functions: Call and apply.

This

The this in JavaScript differs greatly from this in Java . Learn about the children's shoes in Java forget everything you know about this.

This in JavaScript is a function-dependent, representing the caller of the function . There are two meanings : First, thisis not the function itself; second, when a function is called, it determines who it refers to.

In the following situations:

Calling global functions

Look at the following code:

<span style= "Background-color:rgb (255, 255, 153); ><span style= "color: #FF0000;" ><strong> Code Snippet 1:</strong></span></span>function UiObject () {console.log (THIS.name | | This.tostring ()); Output: [Object Window] Console.log (This===window); Output: True}uiobject ()

The default is window invocation, this is window.

Call through Object

<span style= "Background-color:rgb (255, 255, 153); ><span style= "color: #FF0000;" ><strong> Code Snippet 2:</strong></span></span>function UiObject () {this.render = function (str) { Console.log (' Render this ', str, ' by ' + this.tostring ()); Console.log (this = = = UiObject);  False<strong>console.log (This = = = UI); True</strong>}}var UI = new UiObject (); Ui.render ();

What if the function is defined in the prototype?

<span style= "Background-color:rgb (255, 255, 153); ><span style= "color: #FF0000;" ><strong> Code Snippet 3:</strong></span></span>function UiObject () {}uiobject.prototype = {render : function (str) {Console.log (' render this ', str, ' by ' + this.tostring ()); Console.log (this = = = UiObject);  False<strong>console.log (This = = = UI);   True</strong>, as a result, who called, this is pointing to who}};var UI = new UiObject (); Ui.render ();

As a result, it is important where the definition is not important and who is calling it. There is milk is Niang, who born not important, good reality ...
Write the section code to make this feature more obvious, as follows:

<span style= "Background-color:rgb (255, 255, 153); ><span style= "color: #FF0000;" ><strong> Code Snippet 4:</strong></span></span>       function Hunt () {console.log (' to ', this.name + ', my dear lord! I'll hunt ', This.target, ' as your wish. '); Console.log (This = = = Hailong); Console.log (this = = = Haichao);} var Hailong = {name: ' Hailong ', target: ' deer '};var Haichao = {name: ' Lord Haichao ', Target: ' Little-japs '};hailo Ng.hunt = hunt;//output: To the Lord Hailong, my dear lord! I'll 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'll hunt little-japs as your wish.//output: false  --  console.log (this = = = Hailong);//output: True   --  Console.log (This = = = Haichao); Haichao.kill ();

There is milk is Niang, who call, this is pointing to WHO.

Called by the event

The events are called in several cases:

1, <div onclick= 'thefunc() '>

2, ODiv.onclick = Thefunc;

In the 1th case, this points to window, and in the 2nd case, this points to odiv.

arguments

Similar to this, when a function is called, Argmuments is assigned the passed-in parameter array.

The number of passed parameters can be obtained by arguments.length, and the value of the passed parameter can be obtained by ARGUMENTS[IDX].

Based on this feature, we need a special method to control the direction of this.

JavaScript provides us with call and apply two methods.
Pager

At the time of the function call, the call method can be used to specify the caller, thus enabling a flexible binding to this. The syntax is as follows:

Func.call (Invokerobject);

Func is a function, and Invokerobject will be designated as the caller of the function. Look at the following example.

<pre name= "Code" class= "JavaScript" ><span style= "Background-color:rgb (255, 255, 153);" ><span style= "color: #FF0000;" ><strong> Code Snippet 5:</strong></span></span>

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);p Rintname.call (Hailong);p Rintname.call (Haichao);

after defining the Printname method, we hope to apply it to hunt, Hailong, Haichao and several objects. Can be achieved by using the call function. This success in the Printname function points to thethe object passed in by the call parameter.

Printname.call (Hailong)

Equivalent to the following statement:

Hailong.printname = Printname;

Hailong.printname ();

Delete Haiong.printname;

Apply

The call method invokes the function and, if there are arguments, is passed in from the second argument of the calling method. The syntax is as follows:

function func (P1,P2,P3) {}

Func.call (TARGETOBJECT,P1,P2,P3)

The Apply method implements the same function as the call method, but when the parameter is passed in, all the arguments are made into an array, passed in as the second parameter of apply, with the following syntax:

Func.apply (TARGETOBJECT,[P1,P2,P3])

When used in conjunction with arguments, the Apply method is more convenient.

Summary

1. Figuring out the meaning of this is the basis of the foundation.
2. The value of this can be flexibly bound by call and apply.
   

Java Programmer's JavaScript Learning Note (3--this/call/apply)