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的值丢失了。 结果是greet()中的this指向全局对象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