javascript function calling rules_javascript skills

JavaScript function calling rule 1

(1) Global function call:
function makeArray( arg1, arg2 ){
return [this , arg1 , arg2 ];
}
This is the most commonly used way to define functions. I believe that people who learn JavaScript are familiar with its use.
The calling code is as follows:
makeArray('one', 'two');
// => [ window, 'one', 'two' ]

This way can be said It is a global function call.
Why is it said to be a global function?
Because it is a method of the global object window,
We can verify it with the following method:
alert( typeof window.methodThatDoesntExist );
// => undefined

alert( typeof window.makeArray);
// => function

So the method we used to call makeArray is the same as the method called below
window.makeArray('one', 'two') ;
// => [ window, 'one', 'two' ]

JavaScript function calling rule two

(1) Object method calling:
//creating the object
var arrayMaker = {
someProperty: 'some value here',
make: makeArray
};

arrayMaker.make('one', 'two'); // => [ arrayMaker, 'one', 'two' ]
//Or call it using the following method:
arrayMaker['make']('one', 'two') ; // => [ arrayMaker, 'one', 'two' ]

See the difference between this and just now, the value of this becomes the object itself.
You may question: Why The original function definition has not changed, but this has changed?

Excellent, it’s right to have doubts. This involves the way functions are passed in JavaScript.
A function is a standard data type in JavaScript.
To be precise, it is an object. You can pass them or copy them.
It's like the entire function Both the parameter list and the function body are copied, and
is assigned to the property make in arrayMaker. It is like defining an arrayMaker like this:
var arrayMaker = {
someProperty: 'some value here',
make: function (arg1, arg2) {
return [ this, arg1, arg2 ];
}
};

If you don’t understand the second calling rule, then in Various bugs are often encountered in event handling code, for example:





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();
};

Clicking the first button will display "btn1" because it is a method call and this is the object it belongs to (button element).
Clicking the second button will display "window" because buttonClicked is called directly (unlike obj.buttonClicked()).
For this and the third button, the event handler is placed directly in the label. are the same. So the result of clicking the third button is the same as the second one.

So please pay attention:
button1.onclick = buttonClicked;
button2.onclick = function(){
buttonClicked();
};
this points to yes Differentiated.

JavaScript function call rule three

Of course, if you are using the jQuery library, then you don’t have to think so much, it will help rewrite the value of this to ensure it Contains a reference to the current event source element.
//Use jQuery
$('#btn1').click( function() {
alert( this.id ); // jQuery ensures 'this' will be the button
}) ;

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

When the function is used more and more, you will It is found that the this you need is not in the same context, which makes communication extremely difficult.

In Javascript, functions are also objects. Function objects contain some predefined methods, two of which are apply() and call(). We can use them to reset the context of this.






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
};


JavaScript function calling rule four

(1) Constructor
I don’t want to delve into the definition of types in Javascript, but at this moment we need to know that there are no classes in Javascript,
And any custom type requires an initialization function. It’s also a good idea to define your type using a prototype object (as an attribute of the initialization function).
Let’s create a simple type
//Declaration A constructor
function ArrayMaker(arg1, arg2) {
this.someProperty = 'whatever';
this.theArray = [ this, arg1, arg2 ];
}
// Statement Instantiation method
ArrayMaker.prototype = {
someMethod: function () {
alert( 'someMethod called');
},
getArray: function () {
return this .theArray;
}
};

var am = new ArrayMaker( 'one', 'two' );
var other = new ArrayMaker( 'first', 'second' ) ;

am.getArray();
// => [ am, 'one' , 'two' ]
other.getArray();
// => [ other, 'first', 'second' ]

A very important and noteworthy thing is the new operator that appears before the function call. Without that, your function is just like a global function, and the properties we created All 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, if you forget to use the new operator, some of your variables will be assigned undefined.

So it is a good habit to start the constructor function with a capital letter. This can be used as a reminder not to forget the previous new operator when calling.
In this way, the code in the initialization function is as follows Initialization functions you write in other languages ​​are similar. The value of this will be the object you will create