Objects and methods of JavaScript function calls

If you really understand how JavaScript Functions are called, you can avoid bugs;
First, let's create a simple function, which will be used in the following section. This function only returns the current value of this and two provided parameters. CopyCode The Code is as follows: function makearray (arg1, arg2 ){
Return [This, arg1, arg2];
}

It is very simple to call this function. All we need to do is:

Copy code The Code is as follows: makearray ('one', 'two ');

Return Value: => [window, 'one', 'two']
When the problem arises, how does the value of this change to window? The following is a simple analysis:
In JavaScript, there is a global object. Every line of code that appears to be scattered in your script is actually written in the context of a global object. in our example, the makearray function is not a loose global function, but a method of a Global Object. Let's look at the browser, in this environment, its global object is mapped to the window object. let's prove that:Copy codeThe Code is as follows: Alert (typeof window. makearray );

Return Value: => Function

All of this means that the method we used to call makearray is the same as the method called below,Copy codeThe Code is as follows: window. makearray ('one', 'two ');

Return Value: => [window, 'one', 'two']

JavaScript function call Rule 1: In a function that is not directly called by specifying the owner object, such as myfunction (), the value of this becomes the default object (window in the browser ).

Create a simple object and use the makearray function as its method. We will use the JSON method to declare an object. We will also call this method:

Copy code Code: var arraymaker = {
Someproperty: 'Some value here ',
Make: makearray
};
Arraymaker. Make ('one', 'two ');
// Return: => [arraymaker, 'one', 'two']
Arraymaker ['make'] ('one', 'two ');
// Return: => [arraymaker, 'one', 'two']

The value of this is changed to the arraymaker object itself. you may wonder why the original function definition has not changed. Why is it not a window. A function is an object. You can pass them or copy them. as if the list of function associated parameters and function bodies are copied and assigned to the Make attribute in arraymaker, it is like defining an arraymaker as follows:Copy codeCode: var arraymaker = {
Someproperty: 'Some value here ',
Make: function (arg1, arg2) {return [This, arg1, arg2];}
};

JavaScript function call Rule 2: In a method call syntax, such as obj. myfunction () or OBJ ['myfunction'] (), the value of this is obj.

This is the main source of bugs in event processing code. Let's take a look at the following example:

Copy code The Code is as follows: <input type = "button" value = "button 1" id = "btn1"/>
<Input type = "button" value = "button 2" id = "btn2"/>
<Input type = "button" value = "button 3" id = "btn3" onclick = "buttonclicked ();"/>
<SCRIPT type = "text/JavaScript">
Function buttonclicked (){
VaR text = (this = Window )? 'Window': This. ID;
Alert (text );
}
VaR button1 = Document. getelementbyid ('tn1 ');
VaR button2 = Document. getelementbyid ('btn2 ');
Button1.onclick = buttonclicked;
// Return value: => btn1, which is a method call. This is the object to which this belongs (Button element)
Button2.onclick = function () {buttonclicked ();};
// Return value: => window, because buttonclicked () is directly called (unlike obj. buttonclicked ().) this is the same as our third button, which places the event handler function directly in the tag. therefore, the result of clicking the third button is the same as that of the second one, all of which are windows.
</SCRIPT>

We know that there are no classes in Javascript, and any custom type requires an initialization function, using a prototype object (as an attribute of the initialization function) to define your type, let's create a simple type

Copy code The Code is as follows: function arraymaker (arg1, arg2 ){
This. someproperty = 'whatever ';
This. thearray = [This, arg1, arg2];
}
// Declare the instantiation Method
Arraymaker. Prototype = {
Somemethod: function (){
Alert ('memethod called ');
},
Getarray: function (){
Return this. thearray;
}
};
VaR AM = new arraymaker ('one', 'two ');
VaR Other = new arraymaker ('first', 'second ');
Am. getarray ();
// Return value: => [Am, 'one', 'two']

It is worth noting that the new operator appeared before the function call. Without it, the function is like a global function, and all the attributes we created will be created on the Global Object (window), and you don't want to do that. Another topic is that there is no return value in your constructor, so if you forget to use the new operator, some of your variables will be assigned undefined. for this reason, the constructor function is a good habit of starting with an uppercase letter, which serves as a reminder so that you do not forget the new operator before calling it.

JavaScript function call Rule 3: When you use a function as the initialization function, for example, myfunction (), the Javascript runtime will specify the value of this as the new object.