JS Tutorial
JS Version
JS Objects
JS Function
JS Classes
JS Async
JS HTML DOM
JS Browser BOM
JS Web API
JS AJAX
JS JSON
JS vs JQUERY
JS Graphics
Function Invocation
The code within a JavaScript function executes when “something” invokes it.
Invoking a JavaScript Function
The code within a function is not executed, when the function is specified.
The code within a function is executed, when the function is invoked.
Generally, the term “call a function” is used instead of “invoke a function”.
It is common to say “call upon a function”, “start a function”, or “execute a function”.
Invoking a Function as a Function
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>The global function (myFunction) returns the product of the arguments (a ,b):</p>
<p id=”demo”></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById(“demo”).innerHTML = myFunction(10, 2);
</script>
</body>
</html>
Output
JavaScript Functions
The global function (myFunction) returns the product of the arguments (a ,b):
The Global Object
When a function is called without an owner object, the value of this becomes the global object.
In a web browser, the global object is the browser window.
This example returns the window object as the value of this:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>In HTML the value of <b>this</b>, in a global function, is the window object.</p>
<p id=”demo”></p>
<script>
let x = myFunction();
function myFunction() {
return this;
}
document.getElementById(“demo”).innerHTML = x;
</script>
</body>
</html>
Output
JavaScript Functions
In HTML the value of this, in a global function, is the window object.
[object Window]
Invoking a Function as a Method
In JavaScript, functions are defined as object methods.
The following example creates an object (myObject), which consists of two properties (firstName and lastName), and a method (fullName).
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>myObject.fullName() will return John Doe:</p>
<p id=”demo”></p>
<script>
const myObject = {
firstName:”John”,
lastName: “Doe”,
fullName: function() {
return this.firstName + ” ” + this.lastName;
}
}
document.getElementById(“demo”).innerHTML = myObject.fullName();
</script>
</body>
</html>
Output
JavaScript Functions
myObject.fullName() will return John Doe:
John Doe
The fullName method is a function. The function belongs to the object. myObject is the owner of the function.
The thing known as this is the object that “owns” the JavaScript code. In this case, the value of this is myObject.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>The value of <b>this</b>, in an object method, is the owner object.</p>
<p id=”demo”></p>
<script>
const myObject = {
firstName:”John”,
lastName: “Doe”,
fullName: function() {
return this;
}
}
document.getElementById(“demo”).innerHTML = myObject.fullName();
</script>
</body>
</html>
Output
JavaScript Functions
The value of this, in an object method, is the owner object.
[object Object]
Invoking a Function with a Function Constructor
If a function invocation that is preceded using the new keyword, it is a constructor invocation.
Since JavaScript functions are objects you create a new object.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>In this example, myFunction is a function constructor:</p>
<p id=”demo”></p>
<script>
function myFunction(arg1, arg2) {
this.firstName = arg1;
this.lastName = arg2;
}
const myObj = new myFunction(“John”,”Doe”)
document.getElementById(“demo”).innerHTML = myObj.firstName;
</script>
</body>
</html>
Output
JavaScript Functions
In this example, myFunction is a function constructor:
John