Method Reuse
With the call() method, you can write a method that can be used on different objects.
All Functions are Methods
In JavaScript all functions are object methods.
If a function is not a method of a JavaScript object, it is a function of the global object (see previous chapter).
The example below creates an object with 3 properties, firstName, lastName, fullName.
Example
const person = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
// This will return "John Doe":
person.fullName();
Try it Yourself »
In the example above, this refers to the person object.
this.firstName means the firstName property of this.
Same as:
this.firstName means the firstName property of person.
What is this?
In JavaScript, the this keyword refers to an object.
Which object depends on how this is being invoked (used or called).
The this keyword refers to different objects depending on how it is used:
In an object method, this refers to the object. |
Alone, this refers to the global object. |
In a function, this refers to the global object. |
In a function, in strict mode, this is undefined. |
In an event, this refers to the element that received the event. |
Methods like call(), apply(), and bind() can refer this to any object. |
The JavaScript call() Method
The call() method is a predefined JavaScript method.
It can be used to invoke (call) a method with an owner object as an argument (parameter).
With call(), an object can use a method belonging to another object.
This example calls the fullName method of person, using it on person1:
Example
const person = {
fullName:
function() {
return this.firstName + " " + this.lastName;
}
}
const person1 = {
firstName:"John",
lastName: "Doe"
}
const person2 = {
firstName:"Mary",
lastName: "Doe"
}
// This will return "John Doe":
person.fullName.call(person1);
Try it Yourself »
This example calls the fullName method of person, using it on person2:
Example
const person = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
const person1 = {
firstName:"John",
lastName: "Doe"
}
const person2 = {
firstName:"Mary",
lastName: "Doe"
}
//
This will return "Mary Doe"
person.fullName.call(person2);
Try it Yourself »
The call() Method with Arguments
The call() method can accept arguments:
Example
const person = {
fullName: function(city, country) {
return this.firstName + " " + this.lastName + "," + city + "," +
country;
}
}
const person1 = {
firstName:"John",
lastName: "Doe"
}
person.fullName.call(person1, "Oslo", "Norway");
Try it Yourself »
Definitely avoid using eval to do something like this, or you will open yourself to XSS (Cross-Site Scripting) vulnerabilities.
For example, if you were to use the eval solutions proposed here, a nefarious user could send a link to their victim that looked like this:
//yoursite.com/foo.html?func=function(){alert('Im%20In%20Teh%20Codez');}
And their javascript, not yours, would get executed. This code could do something far worse than just pop up an alert of course; it could steal cookies, send requests to your application, etc.
So, make sure you never eval untrusted code that comes in from user input (and anything on the query string id considered user input). You could take user input as a key that will point to your function, but make sure that you don't execute anything if the string given doesn't match a key in your object. For example:
// set up the possible functions: var myFuncs = { func1: function () { alert('Function 1'); }, func2: function () { alert('Function 2'); }, func3: function () { alert('Function 3'); }, func4: function () { alert('Function 4'); }, func5: function () { alert('Function 5'); } }; // execute the one specified in the 'funcToRun' variable: myFuncs[funcToRun]();This will fail if the funcToRun variable doesn't point to anything in the myFuncs object, but it won't execute any code.