JavaScript function call rules _javascript tips

JavaScript function call rule one

(1) Global function call:
function Makearray (arg1, arg2) {
return [This, arg1, arg2];
}
This is one of the most common ways to define functions. People who believe in learning JavaScript are not unfamiliar with its invocation.
The calling code is as follows:
Makearray (' One ', ' two ');
=> [window, ' One ', ' two ']

This approach can be said to be a global function call.
Why is the global function?
Because it is a method of the Global object window,
We can use the following methods to verify:
Alert (typeof window.methodthatdoesntexist);
=> undefined

Alert (typeof Window.makearray);
=> function

So the way we call Makearray before is the same as the method that is called here
Window.makearray (' One ', ' two ');
=> [window, ' One ', ' two ']

JavaScript function call rule two

(1) Object method invocation:
Creating the Object
var arraymaker = {
Someproperty: ' Some value here ',
Make:makearray
};

Arraymaker.make (' One ', ' two '); => [Arraymaker, ' One ', ' two ']
or call it in the following way:
arraymaker[' make '] (' One ', ' two '); => [Arraymaker, ' One ', ' two ']

See the difference between here and now, this value becomes the object itself.
You may question why the original definition of the function has not changed, and this has changed?

Very well, and there is the right question. This involves the way functions are passed in JavaScript,
A function is a standard data type in JavaScript,
Exactly an object. You can pass them on or copy them.
It's like the whole function, the list of parameters and the body of the function are copied,
and is assigned to the attribute make in Arraymaker, it's like defining a arraymaker like this:
var arraymaker = {
Someproperty: ' Some value here ',
Make:function (Arg1, arg2) {
return [This, arg1, arg2];
}
};

If you do not make the call rule two clear, you will often encounter a variety of bugs in the event-handling code, for example:
<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;
Button2.onclick = function () {
ButtonClicked ();
};
</script>
Clicking on the first button will show "BTN1" because it is a method call, this is the object (button element) that belongs to.
Clicking on the second button will show "window" because buttonclicked is called directly (unlike obj.buttonclicked ()),
This and the third button, the event handler is placed directly in the label is the same. So click on the third button and the result is the same as the second one.

So please note:
Button1.onclick = buttonclicked;
Button2.onclick = function () {
ButtonClicked ();
};
This point is different.

JavaScript function call rule three

Of course, if you're using a jquery library, then you don't have to think so much that it will help rewrite the value of this to make sure it contains references to the current event source element.
Using jquery
$ (' #btn1 '). Click (function () {
alert (this.id); JQuery ensures ' this ' would be the button
});

So how does jquery overload the value of this?
The answer is: Call () and apply ();

As the function is used more and more, you will find that this is not in the same context as it is, which makes it extremely difficult to communicate.

Functions are also objects in JavaScript, and function objects contain predefined methods, two of which are apply () and call (), which we can use to reset the context.

<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;
Button2.onclick = function () {
Buttonclicked.call (this); Btn2
};
</script>

JavaScript function call Rule Four

(1) constructor
I don't want to delve into the definition of types in JavaScript, but at the moment we need to know that there are no classes in JavaScript,
And any custom type requires an initialization function, and it's a good idea to define your type using a prototype object (as an attribute of the initialization function).
Let's create a simple type
Declaring a constructor
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 ();
=> [AM, ' one ', ' two ']
Other.getarray ();
=> [Other, ' A ', ' second ']

A very important and noteworthy thing is the new operator that appears in front of the function call, and without that, your function is like a global function, and the attributes we create will be created on the Global Object (window), and you don't want that.
Another point, because there is no return value in your constructor, so if you forget to use the new operator, some of your variables will be assigned to undefined.

So constructor functions start with uppercase letters as a good habit, which can serve as a reminder that you should not forget the new operator before you call.
The code in the initialization function is similar to the initialization function you write in other languages. This value will be the object you will create