7.1 創建對象的方法
JavaScript中的對象方法是與對象相關的函數，可以對這些對象執行操作。方法允許對象具有自己的行為，這使得它們成為面向對象編程的重要組成部分。下面我們將討論創建和使用對象的方法。
對象的方法可以用多種方式創建。我們來看看主要的幾種方法。
1. 對象字面量
可以在對象字面量中直接使用函數創建方法。
在這個例子中，對象person有一個方法greet()，它使用對象的屬性name返回一個字符串：
let person = {
name: 'John',
age: 30,
greet: function() {
return `Hello, my name is ${this.name}`;
}
};
console.log(person.greet()); // 輸出: Hello, my name is John
2. 方法的簡寫語法
在ES6中，出現了一種創建對象方法的簡寫語法。
這種語法使代碼更簡潔易讀：
let person = {
name: 'John',
age: 30,
greet() {
return `Hello, my name is ${this.name}`;
}
};
console.log(person.greet()); // 輸出: Hello, my name is John
3. 創建對象後添加方法
可以在創建對象之後為其添加方法。
在這個例子中，方法greet()在創建對象person後被添加進去：
let person = {
name: 'John',
age: 30
};
person.greet = function() {
return `Hello, my name is ${this.name}`;
};
console.log(person.greet()); // 輸出: Hello, my name is John
4. 使用構造函數
構造函數允許為所有對象實例創建方法。
在這個例子中，方法greet()為使用構造函數Person()創建的每個對象實例創建：
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()); // 輸出: Hello, my name is John
console.log(jane.greet()); // 輸出: Hello, my name is Jane
7.2 使用對象的方法
1. 用點符號訪問方法
可以使用點符號調用對象的方法：
let person = {
name: 'John',
age: 30,
greet() {
return `Hello, my name is ${this.name}`;
}
};
console.log(person.greet()); // 輸出: Hello, my name is John
2. 用方括號訪問方法
也可以使用方括號調用對象的方法：
let person = {
name: 'John',
age: 30,
greet() {
return `Hello, my name is ${this.name}`;
}
};
let result = person['greet']();
console.log(result); // 輸出: Hello, my name is John
3. 在另一個方法中調用方法
對象的方法可以調用同一對象的其他方法。
在這個例子中，方法sum()和mul()使用了方法setValues()設置的值：
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()); // 輸出: 5
console.log(calculator.mul()); // 輸出: 6
4. 在方法中使用this
關鍵字this在對象的方法中引用對象本身，這樣可以訪問其屬性和其他方法：
let car = {
brand: 'Toyota',
model: 'Camry',
getInfo() {
return `Brand: ${this.brand}, Model: ${this.model}`;
}
};
console.log(car.getInfo()); // 輸出: Brand: Toyota, Model: Camry
5. 將方法作為回調傳遞
當對象的方法作為回調傳遞時，需要注意this的值：
let person = {
name: 'John',
age: 30,
greet() {
console.log(`Hello, my name is ${this.name}`);
}
};
setTimeout( person.greet, 1000 ); // 輸出: Hello, my name is undefined
在這個例子中，當方法greet()作為回調傳遞給setTimeout()時，this的值丟失了。 結果是this在greet()內指向全局對象window。 在瀏覽器中，對象window有一個屬性name，默認情況下是一個空字符串""。 因此，輸出的結果是"Hello, my name is"。 要保持正確的this值，可以使用bind()方法將函數綁定到特定的上下文：
setTimeout(person.greet.bind(person), 1000); // 輸出: Hello, my first name is John
或者可以使用箭頭函數：
setTimeout(() => person.greet(), 1000); // 輸出: Hello, my first name is John
7.3 共用方法
1. 通過原型繼承方法
可以將方法添加到對象的原型中，使得它們對所有實例都可用：
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()); // 輸出: Hello, my name is John
console.log(jane.greet()); // 輸出: Hello, my name is Jane
2. 使用其他對象的方法
可以使用call()或apply()方法將一個對象的方法調用到另一個對象中：
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)); // 輸出: Hello, my name is Jane
GO TO FULL VERSION