JavaScript function call
May 06, 2021 JavaScript
Table of contents
1. The JavaScript function calls
3. Call the JavaScript function
6. The function is called as a method
9.. Call the function using a constructor
The JavaScript function calls
JavaScript functions are called in four ways.
The difference in each approach is the initialization of this.
This keyword
In general, in Javascript, this points to the current object at the time the function was executed.
|
Note that this is a reserved keyword and you cannot modify the value of this. |
|---|
Tip: You can learn more about JavaScript this keyword in the This Keywords section of this site's Deep Understanding JavaScript!
Call the JavaScript function
We've learned how to create functions in previous chapters.
The code in the function is executed after the function is called.
Called as a function
return a * b;
}
myFunction(10, 2); m yFunction (10, 2) returns 20
Try it out . . .
The above functions do not belong to any objects. However, in JavaScript it is always the default global object.
The default global object in HTML is the HTML page itself, so the function belongs to the HTML page.
The page object in the browser is the window object. The above function automatically becomes a function of the window object.
myFunction() and window.myFunction() are the same:
return a * b;
}
window.myFunction(10, 2); w indow.myFunction (10, 2) returns 20
Try it out . . .
|
This is a common method for calling JavaScript functions, but it is not a good programming habit
Global variables, methods, or functions are prone to bugs that cause naming conflicts. |
|---|
The global object
When a function is not called by its own object, the value of this becomes a global object.
The global object in the web browser is the window object.
The value of this returned by the instance is the window object:
|
The function is called as a global object,
making the
value of this a global object.
Using a window object as a variable can easily cause a program to crash. |
|---|
The function is called as a method
In JavaScript, you can define functions as methods for objects.
The following example creates an object (myObject) with two properties (firstName and lastName) and a method (fullName). ):
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
myObject.fullName(); R eturn to "John Doe"
Try it out . . .
The fullName method is a function. T he function belongs to the object. myObject is the owner of the function.
This object, with JavaScript code. T he value of this in the instance is the myObject object.
Test it! Modify the fullName method and return the this value:
firstName:"John",
lastName: "Doe",
fullName: function () {
return this;
}
}
myObject.fullName(); B ack to object Object (owner object)
Try it out . . .
|
The function is called as an object method, making the value of this the object itself. |
|---|
Call the function using a constructor
If the new keyword is used before the function is called, the constructor is called.
This looks like a new function is created, but in fact the JavaScript function is a recreated object:
function myFunction(arg1, arg2) {
this.firstName = arg1;
this.lastName = arg2;
}
This creates a new object
var x = new myFunction("John","Doe");
x.firstName; B ack to "John"
Try it out . . .
The call to the constructor creates a new object. T he new object inherits the constructor's properties and methods.
|
The this keyword in
the constructor
does not have any values.
The value of this is created when the function is called to instantiate the object (new object). |
|---|
The function is called as a function method
In JavaScript, the function is an object. JavaScript functions have their properties and methods.
Call() and apply() are predefined function methods. T wo methods can be used to call functions, and the first argument of both methods must be the object itself.
return a * b;
}
myFunction.call(myObject, 10, 2); R eturn 20
return a * b;
}
myArray = [10,2];
myFunction.apply(myObject, myArray); R eturn 20
Both methods use the object itself as the first argument. T he difference between the two is the second argument: apply is passed in is an array of parameters, that is, multiple parameters are combined into an array, and call is passed in as a call parameter (starting with the second argument).
In JavaScript strict mode, the first argument becomes the value of this when the function is called, even if the argument is not an object.
In JavaScript non-strict mode, if the value of the first argument is null or undefined, it will be replaced with a global object.
|
The call() or apply() method allows you to set the value of this and call it as a new method for an existing object. |
|---|