JavaScript function call 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 those who learn JavaScript are no strangers to its calls.
The call code is as follows:
makeArray('one', 'two');
// => [ window, 'one', 'two' ]
This method can be said to be a global function call.
Why is it a global function?
Because it is a method of the global object window,
We can verify it using the following methods:
alert( typeof );
// => undefined
alert( typeof );
// => function
So the method we called makeArray before was the same as the method called below.
('one', 'two');
// => [ window, 'one', 'two' ]
JavaScript function call rule 2
(1) Object method call:
//creating the object
var arrayMaker = {
someProperty: 'some value here',
make: makeArray
};
('one', 'two'); // => [ arrayMaker, 'one', 'two' ]
//Or call with the following method:
arrayMaker['make']('one', 'two'); // => [ arrayMaker, 'one', 'two' ]
I saw this difference from what I just said, the value of this has become the object itself.
You may question: Why did the original function definition not change, but this change?
Very good, it is correct to have doubts. This involves the way functions are passed in JavaScript.
Functions are a standard data type in JavaScript.
To be exact, an object. You can pass them or copy them.
It's like the entire function and the parameter list and function body are copied.
And it is assigned to the property make in arrayMaker, so 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 call rule 2, you will often encounter various bugs in the event processing code. For example:
<input type="button" value="Button 1" />
<input type="button" value="Button 2" />
<input type="button" value="Button 3" onclick="buttonClicked();"/>
< script type="text/javascript">
function buttonClicked(){
var text = (this === window) ? 'window' : ;
alert( text );
}
var button1 = ('btn1');
var button2 = ('btn2');
= buttonClicked;
= function(){
buttonClicked();
};
< /script>
Clicking the first button will display "btn1" because it is a method call, this is the object to which it belongs (button element).
Clicking the second button will display "window" because buttonClicked is called directly (unlike () ),
This is the same as the third button, which puts the event handling function directly in the label. So the result of clicking the third button is the same as the second one.
So please note:
= buttonClicked;
= function(){
buttonClicked();
};
There is a difference in this pointing.
JavaScript function call rules three
Of course, if you are using the jQuery library, you don't have to think about it so much, it will help override this value to ensure it contains references to the current event source element.
//Use jQuery
$('#btn1').click( function() {
alert( ); // jQuery ensures 'this' will be the button
});
So how does jQuery overload the value of this?
The answers are: call() and apply();
As functions are used more and more, you will find 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 this context.
<input type="button" value="Button 1" />
<input type="button" value="Button 2" />
<input type="button" value="Button 3" onclick="buttonClicked();"/>
< script type="text/javascript">
function buttonClicked(){
var text = (this === window) ? 'window' : ;
alert( text );
}
var button1 = ('btn1');
var button2 = ('btn2');
= buttonClicked;
= function(){
(this); // btn2
};
< /script>
JavaScript function call rules four
(1) Constructor
I don't want to dig into the definition of types in Javascript, but at this moment we need to know that there is no class in Javascript,
Moreover, any custom type requires an initialization function. It is also a good idea to define your type using a prototype object (as a property of the initialization function).
Let's create a simple type
//Declare a constructor
function ArrayMaker(arg1, arg2) {
= 'whatever';
= [ this, arg1, arg2 ];
}
// Declare instantiation method
= {
someMethod: function () {
alert( 'someMethod called');
},
getArray: function () {
return ;
}
};
var am = new ArrayMaker( 'one', 'two' );
var other = new ArrayMaker( 'first', 'second' );
();
// => [ am, 'one' , 'two' ]
();
// => [ other, 'first', 'second' ]
One very important and noteworthy is that the new operator that appears in front of a function call. Without that, your function is like a global function, and the properties we create will be created on a global object (window), and you don't want to do that.
Another point is that since there is no return value in your constructor, if you forget to use the new operator, some of your variables will be assigned undefined.
Therefore, it is a good habit to start with capital letters. This can be used as a reminder to not forget the previous new operator when calling.
In this way, the code in the initialization function is similar to the initialization function you wrote in other languages. The value of this will be the object you will create.
Summarize
I hope that through these, you can understand the differences in various function calls.
Keep your JavaScript code away from bugs.
Knowing the value of this is your first step to avoid bugs.
Original text: /blogs/sergio_pereira/archive/2009/02/09/
Chinese translation: /articles/view/69184/30270
(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 those who learn JavaScript are no strangers to its calls.
The call code is as follows:
makeArray('one', 'two');
// => [ window, 'one', 'two' ]
This method can be said to be a global function call.
Why is it a global function?
Because it is a method of the global object window,
We can verify it using the following methods:
alert( typeof );
// => undefined
alert( typeof );
// => function
So the method we called makeArray before was the same as the method called below.
('one', 'two');
// => [ window, 'one', 'two' ]
JavaScript function call rule 2
(1) Object method call:
//creating the object
var arrayMaker = {
someProperty: 'some value here',
make: makeArray
};
('one', 'two'); // => [ arrayMaker, 'one', 'two' ]
//Or call with the following method:
arrayMaker['make']('one', 'two'); // => [ arrayMaker, 'one', 'two' ]
I saw this difference from what I just said, the value of this has become the object itself.
You may question: Why did the original function definition not change, but this change?
Very good, it is correct to have doubts. This involves the way functions are passed in JavaScript.
Functions are a standard data type in JavaScript.
To be exact, an object. You can pass them or copy them.
It's like the entire function and the parameter list and function body are copied.
And it is assigned to the property make in arrayMaker, so 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 call rule 2, you will often encounter various bugs in the event processing code. For example:
<input type="button" value="Button 1" />
<input type="button" value="Button 2" />
<input type="button" value="Button 3" onclick="buttonClicked();"/>
< script type="text/javascript">
function buttonClicked(){
var text = (this === window) ? 'window' : ;
alert( text );
}
var button1 = ('btn1');
var button2 = ('btn2');
= buttonClicked;
= function(){
buttonClicked();
};
< /script>
Clicking the first button will display "btn1" because it is a method call, this is the object to which it belongs (button element).
Clicking the second button will display "window" because buttonClicked is called directly (unlike () ),
This is the same as the third button, which puts the event handling function directly in the label. So the result of clicking the third button is the same as the second one.
So please note:
= buttonClicked;
= function(){
buttonClicked();
};
There is a difference in this pointing.
JavaScript function call rules three
Of course, if you are using the jQuery library, you don't have to think about it so much, it will help override this value to ensure it contains references to the current event source element.
//Use jQuery
$('#btn1').click( function() {
alert( ); // jQuery ensures 'this' will be the button
});
So how does jQuery overload the value of this?
The answers are: call() and apply();
As functions are used more and more, you will find 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 this context.
<input type="button" value="Button 1" />
<input type="button" value="Button 2" />
<input type="button" value="Button 3" onclick="buttonClicked();"/>
< script type="text/javascript">
function buttonClicked(){
var text = (this === window) ? 'window' : ;
alert( text );
}
var button1 = ('btn1');
var button2 = ('btn2');
= buttonClicked;
= function(){
(this); // btn2
};
< /script>
JavaScript function call rules four
(1) Constructor
I don't want to dig into the definition of types in Javascript, but at this moment we need to know that there is no class in Javascript,
Moreover, any custom type requires an initialization function. It is also a good idea to define your type using a prototype object (as a property of the initialization function).
Let's create a simple type
//Declare a constructor
function ArrayMaker(arg1, arg2) {
= 'whatever';
= [ this, arg1, arg2 ];
}
// Declare instantiation method
= {
someMethod: function () {
alert( 'someMethod called');
},
getArray: function () {
return ;
}
};
var am = new ArrayMaker( 'one', 'two' );
var other = new ArrayMaker( 'first', 'second' );
();
// => [ am, 'one' , 'two' ]
();
// => [ other, 'first', 'second' ]
One very important and noteworthy is that the new operator that appears in front of a function call. Without that, your function is like a global function, and the properties we create will be created on a global object (window), and you don't want to do that.
Another point is that since there is no return value in your constructor, if you forget to use the new operator, some of your variables will be assigned undefined.
Therefore, it is a good habit to start with capital letters. This can be used as a reminder to not forget the previous new operator when calling.
In this way, the code in the initialization function is similar to the initialization function you wrote in other languages. The value of this will be the object you will create.
Summarize
I hope that through these, you can understand the differences in various function calls.
Keep your JavaScript code away from bugs.
Knowing the value of this is your first step to avoid bugs.
Original text: /blogs/sergio_pereira/archive/2009/02/09/
Chinese translation: /articles/view/69184/30270