JavaScript 对象方法

什么是对象方法？

在JavaScript中，对象方法是附加到对象的函数。简单来说，对象方法是存储在对象属性中的函数，它允许对象执行特定操作。方法让对象不仅可以存储数据，还能执行操作，使得对象更加实用和强大。

备注

对象方法是面向对象编程的核心概念之一，它让JavaScript实现了"数据+行为"的编程范式。

创建对象方法

方法一：在对象字面量中定义方法

最直接的方式是在创建对象时直接定义方法：

javascript
const person = {
  firstName: "John",
  lastName: "Doe",
  // 这是一个方法
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

// 调用对象方法
console.log(person.fullName()); // 输出: John Doe

方法二：ES6简写语法

ES6提供了更简洁的方法定义语法：

javascript
const person = {
  firstName: "John",
  lastName: "Doe",
  // 简写方法定义
  fullName() {
    return this.firstName + " " + this.lastName;
  }
};

console.log(person.fullName()); // 输出: John Doe

方法三：向已有对象添加方法

可以向已创建的对象后续添加方法：

javascript
const car = {
  brand: "Toyota",
  year: 2020
};

// 向对象添加方法
car.getInfo = function() {
  return `A ${this.brand} car from ${this.year}`;
};

console.log(car.getInfo()); // 输出: A Toyota car from 2020

`this` 关键字在方法中的作用

在JavaScript对象方法中，this 关键字指向调用该方法的对象。它使方法可以访问调用它的对象的属性。

javascript
const calculator = {
  num1: 5,
  num2: 10,
  add() {
    return this.num1 + this.num2;
  },
  multiply() {
    return this.num1 * this.num2;
  }
};

console.log(calculator.add());      // 输出: 15
console.log(calculator.multiply()); // 输出: 50

警告

注意，当方法被作为回调或在其他上下文中使用时，this 的值可能会改变！这是初学者常见的困惑来源。

内置对象方法

JavaScript 对象有多种内置方法可供使用：

Object.keys() 获取所有键

javascript
const student = {
  name: "Alice",
  age: 20,
  major: "Computer Science"
};

const keys = Object.keys(student);
console.log(keys); // 输出: ["name", "age", "major"]

Object.values() 获取所有值

javascript
const values = Object.values(student);
console.log(values); // 输出: ["Alice", 20, "Computer Science"]

Object.entries() 获取键值对

javascript
const entries = Object.entries(student);
console.log(entries); 
// 输出: [["name", "Alice"], ["age", 20], ["major", "Computer Science"]]

对象方法的实际应用场景

场景一：数据封装和操作

对象方法可以封装数据操作逻辑，使代码更有组织性：

javascript
const bankAccount = {
  owner: "Sarah Johnson",
  balance: 1000,
  transactions: [],
  
  deposit(amount) {
    this.balance += amount;
    this.transactions.push({type: "deposit", amount, date: new Date()});
    return `Deposited ${amount}. New balance: ${this.balance}`;
  },
  
  withdraw(amount) {
    if (amount > this.balance) {
      return "Insufficient funds";
    }
    this.balance -= amount;
    this.transactions.push({type: "withdrawal", amount, date: new Date()});
    return `Withdrew ${amount}. New balance: ${this.balance}`;
  },
  
  getTransactionHistory() {
    return this.transactions;
  }
};

console.log(bankAccount.deposit(500));  // 输出: Deposited 500. New balance: 1500
console.log(bankAccount.withdraw(200)); // 输出: Withdrew 200. New balance: 1300
console.log(bankAccount.getTransactionHistory()); // 显示所有交易记录

场景二：用户界面组件

在开发网页时，对象方法可以用来创建可复用的UI组件：

javascript
const tooltip = {
  element: null,
  text: "",
  
  initialize(elementId, tooltipText) {
    this.element = document.getElementById(elementId);
    this.text = tooltipText;
    this.attachEvents();
  },
  
  attachEvents() {
    this.element.addEventListener("mouseenter", () => this.show());
    this.element.addEventListener("mouseleave", () => this.hide());
  },
  
  show() {
    // 显示提示文本的逻辑
    console.log(`Showing tooltip: ${this.text}`);
  },
  
  hide() {
    // 隐藏提示文本的逻辑
    console.log("Hiding tooltip");
  }
};

// 使用方式
// tooltip.initialize("help-button", "点击获取更多帮助");

高级对象方法概念

Getter 和 Setter

ES6引入了getter和setter方法，允许更优雅地访问和修改对象属性：

javascript
const product = {
  _price: 0, // 下划线表示这是一个应当通过方法访问的"私有"属性
  
  get price() {
    return `$${this._price.toFixed(2)}`;
  },
  
  set price(value) {
    if (value < 0) {
      throw new Error("Price cannot be negative");
    }
    this._price = value;
  },
  
  get formattedPrice() {
    return this._price.toLocaleString('en-US', {
      style: 'currency', 
      currency: 'USD'
    });
  }
};

product.price = 19.99;
console.log(product.price);        // 输出: $19.99
console.log(product.formattedPrice); // 输出: $19.99

try {
  product.price = -5; // 将抛出错误
} catch (e) {
  console.log(e.message); // 输出: Price cannot be negative
}

方法链式调用

通过在方法末尾返回对象本身，可以实现链式调用，使代码更简洁：

javascript
const calculator = {
  value: 0,
  
  add(num) {
    this.value += num;
    return this; // 返回对象本身以支持链式调用
  },
  
  subtract(num) {
    this.value -= num;
    return this;
  },
  
  multiply(num) {
    this.value *= num;
    return this;
  },
  
  result() {
    return this.value;
  }
};

// 链式调用
const result = calculator.add(5).multiply(2).subtract(3).result();
console.log(result); // 输出: 7 (先加5，再乘2，最后减3)

对象方法的常见陷阱

1. `this` 绑定问题

当方法作为回调函数传递时，可能会丢失 this 绑定：

javascript
const user = {
  name: "Alex",
  greet() {
    console.log(`Hello, I am ${this.name}`);
  }
};

// 直接调用 - 正常工作
user.greet(); // 输出: Hello, I am Alex

// 作为回调函数 - this 指向变化，导致问题
// setTimeout(user.greet, 1000); // 可能输出: Hello, I am undefined

// 解决方案1: 箭头函数
setTimeout(() => user.greet(), 1000);

// 解决方案2: bind方法
const boundGreet = user.greet.bind(user);
setTimeout(boundGreet, 1000);

2. 箭头函数作为方法

箭头函数不会创建自己的 this 上下文，因此在定义对象方法时要小心：

javascript
const person = {
  name: "Emma",
  // 错误: 箭头函数不绑定自己的this
  greetArrow: () => {
    console.log(`Hi, I'm ${this.name}`); // this不指向person
  },
  // 正确: 普通函数方法
  greetRegular() {
    console.log(`Hi, I'm ${this.name}`);
  }
};

person.greetArrow();   // 输出: Hi, I'm undefined
person.greetRegular(); // 输出: Hi, I'm Emma

总结

JavaScript对象方法是实现面向对象编程的重要工具。通过本文，我们学习了：

如何定义和创建对象方法
this 关键字在方法中的作用
对象的内置方法（如Object.keys()）
方法的实际应用场景
高级方法概念（getter/setter、链式调用）
常见的陷阱和避免方法

掌握对象方法让你能够编写更有组织、更可维护的代码，是成为JavaScript高手的关键步骤之一。

练习

为巩固所学知识，尝试完成以下练习：

创建一个library对象，包含书籍数组和添加、删除、查找书籍的方法
为商品对象创建getter和setter，确保价格和库存不能为负数
创建一个计数器对象，包含增加、减少、重置和获取当前值的方法，并使用链式调用

提示

实践是最好的学习方式！尝试在实际项目中应用这些概念，会加深你对对象方法的理解。

学习资源

MDN Web Docs 对象方法
JavaScript高级程序设计（第4版）第6章
JavaScript.info 对象方法

什么是对象方法？​

创建对象方法​

方法一：在对象字面量中定义方法​

方法二：ES6简写语法​

方法三：向已有对象添加方法​

this 关键字在方法中的作用​

内置对象方法​

Object.keys() 获取所有键​

Object.values() 获取所有值​

Object.entries() 获取键值对​

对象方法的实际应用场景​

场景一：数据封装和操作​

场景二：用户界面组件​

高级对象方法概念​

Getter 和 Setter​

方法链式调用​

对象方法的常见陷阱​

1. this 绑定问题​

2. 箭头函数作为方法​

总结​

练习​

学习资源​