JavaScript Object methods
JavaScript objects are more like real world objects. Object properties describe the object, where as object methods are more like the behaviour of the object. A method is basically a function of an object. For example:
// creating an object
let spaceship = {};
// adding a method
spaceship.showName = function(){
console.log("Sytech IV");
}
// calling a method
spaceship.showName(); // Sytech IV
In the example we created a function and assigned it to the property spaceship.showName
of the spaceship
object which allowed the spaceship
object to show its name to console.
Another way of adding a method to an object is to add it as an object literal. For example:
let spaceship = {
showName : function(){
console.log("Sytech IV");
}
};
spaceship.showName(); // Sytech IV
Or
let spaceship = {
showName(){
console.log("Sytech IV");
}
};
spaceship.showName(); // Sytech IV
Use of this
in methods
An object can use the this
keyword to access values inside it. Let us show this with the following two examples:
Example 1:
let spaceship = {
name: "Sytech IV",
showName(){
return name;
}
};
console.log(spaceship.showName()); // ReferenceError: name is not defined
Example 2:
let spaceship = {
name: "Sytech IV",
showName(){
return this.name;
}
};
console.log(spaceship.showName()); // Sytech IV
In Example 1, calling spaceship.showName()
produced a reference error on return name
because no variable name is defined inside the showName()
function even though it is defined inside the object. In Example 2, return this.name
instructs the method to return the name
variable property of the object itself.
This basically means using this.property
inside an object is the same as using object.property
from the outside. By the same token, a method can also access the property without using this
reference but using using external reference. For example:
let spaceship = {
name: "Sytech IV",
showName(){
return spaceship.name;
}
};
console.log(spaceship.showName()); // Sytech IV
Now instead of accessing the name
through this.name
, we used spaceship.name
.
Though these two ways might look like we just did the same thing, there are some slight differences:
let spaceship = {
name: "Sytech IV",
showName(){
return this.name;
}
};
// copy spaceship to warship
let warship = spaceship;
// destroy spaceship
spaceship = null;
// you can now access warship name as follows
console.log(warship.showName()); // Sytech IV
let spaceship = {
name: "Sytech IV",
showName(){
return spaceship.name;
}
};
// copy spaceship to warship
let warship = spaceship;
// destroy spaceship
spaceship = null;
// you cant access warship name now
console.log(warship.showName()); // TypeError: Cannot read property 'name' of null
"this" is unbound
Unlike in other programming languages, in JavaScript, this
keyword is unbound. In other programming languages this
is bound to the object from which the method is referencing and no function defined out of an object can have this
.
In JavaScript this
is unbound and doesn’t depend on where the method was declared, but rather on where the object was called. It can be used in any function even outside an object without error. For example:
function greetMe() {
console.log(this.greeting);
}
greetMe(); // undefined
Since the value of this
is evaluated at call time, it can be anything. The same function can have different this
references at different times. For example:
let student = {
greeting: "Hi there"
};
let teacher = {
greeting: "Morning class"
};
function greetMe() {
console.log(this.greeting);
}
student.greet = greetMe;
student.greet(); // Hi there
teacher.greet = greetMe;
teacher.greet(); // Morning class
The example shows the same function that has different "this" when bound to different objects.
An unbound this
gives error in strict mode:
"use strict"
function greetMe() {
console.log(this.greeting);
}
greetMe(); // TypeError: Cannot read property 'greeting' of undefined
But it doesn’t give an error outside strict mode:
function greetMe() {
console.log(this.greeting);
}
greetMe(); // undefined