If you really understand how JavaScript functions invoke work, then you can avoid the occurrence of some bugs;
Let's start by creating a simple function that will be used in the following article, which returns only the current value of this and two supplied arguments.
Copy Code code as follows:
function Makearray (arg1, arg2) {
return [This, arg1, arg2];
}
Calling this function is very simple, and all we need to do is just:
Copy Code code as follows:
Makearray (' One ', ' two ');
return value:=> [window, ' One ', ' two ']
The problem arises, how does this value become window? Here's a simple analysis:
In JavaScript, there is a global object, and every line of code that seems to be scattered in your script is actually written in the context of a global object. In our case, the Makearray function can be said to be not a loose global function, but a method of a global object. , let's go back and look at the browser, where its global objects are mapped to window objects. Let's prove it:
Copy Code code as follows:
Alert (typeof Window.makearray);
return value:=> function
All of this means that the way we call Makearray before is the same as the method that is called below,
Copy Code code as follows:
Window.makearray (' One ', ' two ');
return value:=> [window, ' One ', ' two ']
JavaScript function call Rule 1: A function that is called directly without an explicit owner object, such as MyFunction (), will cause the value of this to become the default object (window in the browser).
To create a simple object, use the Makearray function as one of its methods, we'll use JSON to declare an object, and we'll call this method:
Copy Code code as follows:
var arraymaker = {
Someproperty: ' Some value here ',
Make:makearray
};
Arraymaker.make (' One ', ' two ');
Return to:=> [Arraymaker, ' One ', ' two ']
arraymaker[' make '] (' One ', ' two ');
Return to:=> [Arraymaker, ' One ', ' two ']
The value of this becomes the object Arraymaker itself. You may be wondering why the original function definition did not change, and why it is not window. A function is an object that you can pass or copy. It's like the whole function. The list of parameters and function bodies are copied, and is assigned to the attribute make in Arraymaker, it's like defining a arraymaker like this:
Copy Code code as follows:
var arraymaker = {
Someproperty: ' Some value here ',
Make:function (Arg1, arg2) {return [this, arg1, arg2];}
};
JavaScript function call Rule 2: In one use method invocation syntax, like obj.myfunction () or obj[' MyFunction '] (), at which point the value of this is obj.
This is the main source of bugs in the event handling code, and look at the following example:
Copy Code code 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 (' btn1 ');
var button2 = document.getElementById (' btn2 ');
Button1.onclick = buttonclicked;
return value:=> btn1, which is a method call, this is the object that belongs to (button element)
Button2.onclick = function () {buttonclicked ();};
The return Value:=> window because buttonclicked () is called directly (unlike obj.buttonclicked ().) This and our third button, Putting an event handler directly in the label is the same. So clicking on the third button results in the same window as the second one.
</script>
We know that there are no classes in JavaScript, and that 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 code as follows:
function Arraymaker (arg1, arg2) {
This.someproperty = ' whatever ';
This.thearray = [This, arg1, arg2];
}
Declaring the instantiation method
Arraymaker.prototype = {
Somemethod:function () {
Alert (' SomeMethod called ');
},
Getarray:function () {
return this.thearray;
}
};
var am = new Arraymaker (' One ', ' two ');
var other = new Arraymaker (' A ', ' second ');
Am.getarray ();
return value:=> [am, ' one ', ' two ']
It is noteworthy that the new operator appears in front of the function call, without it, the function is like a global function, and the attributes we create are created on the Global Object (window), and you don't want that, and the other topic is, because there is no return value in your constructor, So if you forget to use the new operator, it will cause some of your variables to be assigned to undefined. For this reason, constructor functions begin with uppercase letters as a good habit, which can be used as a reminder that you should not forget the new operator before you call.
JavaScript function call Rule 3: When you use a function as an initialization function, like MyFunction (), the runtime of JavaScript assigns the value of this to the newly created object.
