7.1 Creating Object Methods
In JavaScript, object methods are functions that are associated with objects and can perform actions on those objects. Methods allow objects to have their own behavior, making them a crucial part of object-oriented programming. Let's take a look at creating and using object methods.
Object methods can be created in several ways. Let's look at the main ones.
1. Object Literal
Methods can be created directly in the object literal using functions.
In this example, the object person has a method greet() that returns a string using the object's name property:
let person = {
name: 'John',
age: 30,
greet: function() {
return `Hello, my name is ${this.name}`;
}
};
console.log(person.greet()); // Outputs: Hello, my name is John
2. Shorthand Method Syntax
With ES6, a shorthand syntax for creating object methods was introduced.
This syntax makes the code more concise and easier to read:
let person = {
name: 'John',
age: 30,
greet() {
return `Hello, my name is ${this.name}`;
}
};
console.log(person.greet()); // Outputs: Hello, my name is John
3. Adding Methods After Object Creation
Methods can be added to an object after it's created.
In this example, the method greet() is added to the person object after its creation:
let person = {
name: 'John',
age: 30
};
person.greet = function() {
return `Hello, my name is ${this.name}`;
};
console.log(person.greet()); // Outputs: Hello, my name is John
4. Using a Constructor Function
A constructor function allows creating methods for all instances of an object.
In this example, the method greet() is created for each instance of an object created with the Person() constructor function:
function Person(name, age) {
this.name = name;
this.age = age;
this.greet = function() {
return `Hello, my name is ${this.name}`;
};
}
let john = new Person('John', 30);
let jane = new Person('Jane', 25);
console.log(john.greet()); // Outputs: Hello, my name is John
console.log(jane.greet()); // Outputs: Hello, my name is Jane
7.2 Using Object Methods
1. Accessing Methods with Dot Notation
Object methods can be called using dot notation:
let person = {
name: 'John',
age: 30,
greet() {
return `Hello, my name is ${this.name}`;
}
};
console.log(person.greet()); // Outputs: Hello, my name is John
2. Accessing Methods with Bracket Notation
Object methods can also be called using bracket notation:
let person = {
name: 'John',
age: 30,
greet() {
return `Hello, my name is ${this.name}`;
}
};
let result = person['greet']();
console.log(result); // Outputs: Hello, my name is John
3. Calling a Method Within Another Method
Object methods can call other methods of the same object.
In this example, the methods sum() and mul() use values set by the setValues() method:
let calculator = {
a: 0,
b: 0,
setValues(a, b) {
this.a = a;
this.b = b;
},
sum() {
return this.a + this.b;
},
mul() {
return this.a * this.b;
}
};
calculator.setValues(2, 3);
console.log(calculator.sum()); // Outputs: 5
console.log(calculator.mul()); // Outputs: 6
4. Using this in Methods
The this keyword in object methods refers to the object itself, allowing access to its properties and other methods:
let car = {
brand: 'Toyota',
model: 'Camry',
getInfo() {
return `Brand: ${this.brand}, Model: ${this.model}`;
}
};
console.log(car.getInfo()); // Outputs: Brand: Toyota, Model: Camry
5. Passing Methods as Callbacks
When object methods are passed as callbacks, it's important to consider the value of this:
let person = {
name: 'John',
age: 30,
greet() {
console.log(`Hello, my name is ${this.name}`);
}
};
setTimeout(person.greet, 1000); // Outputs: Hello, my name is undefined
In this example, the value of this is lost when the greet() method is passed as a callback in setTimeout(). As a result, this inside greet() refers to the global window object. In browsers, the window object has a name property, which by default is an empty string "". So it outputs "Hello, my name is". To maintain the correct value of this, you can use the bind() method, which binds a function to a specific context:
setTimeout(person.greet.bind(person), 1000); // Outputs: Hello, my name is John
Or use an arrow function:
setTimeout(() => person.greet(), 1000); // Outputs: Hello, my name is John
7.3 Sharing Methods
1. Inheriting Methods Through Prototypes
Methods can be added to object prototypes so they are available to all instances:
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.greet = function() {
return `Hello, my name is ${this.name}`;
};
let john = new Person('John', 30);
let jane = new Person('Jane', 25);
console.log(john.greet()); // Outputs: Hello, my name is John
console.log(jane.greet()); // Outputs: Hello, my name is Jane
2. Using Methods from Other Objects
Methods from one object can be called on another object using call() or apply() methods:
let person1 = {
name: 'John',
age: 30,
greet() {
return `Hello, my name is ${this.name}`;
}
};
let person2 = {
name: 'Jane',
age: 25
};
console.log(person1.greet.call(person2)); // Outputs: Hello, my name is Jane
GO TO FULL VERSION