对象方法
2025年3月7日大约 9 分钟
对象方法
对象方法是作为对象属性的函数。本文将介绍如何在对象中定义和调用方法，以及方法中this关键字的行为。同时，还将介绍Object构造函数提供的静态方法，如Object.keys()、Object.values()等。
对象方法的定义
在JavaScript中，有多种方式可以定义对象方法：
1. 对象字面量中定义方法
// 方法简写语法（ES6+）
const person = {
name: '张三',
sayHello() {
console.log(`你好，我是${this.name}`);
}
};
// 传统语法
const user = {
name: '李四',
sayHello: function() {
console.log(`你好，我是${this.name}`);
}
};2. 构造函数中定义方法
function Person(name) {
this.name = name;
this.sayHello = function() {
console.log(`你好，我是${this.name}`);
};
}
const person = new Person('张三');
person.sayHello(); // 输出：你好，我是张三3. 原型上定义方法
function Person(name) {
this.name = name;
}
// 在原型上定义方法（所有实例共享）
Person.prototype.sayHello = function() {
console.log(`你好，我是${this.name}`);
};
const person1 = new Person('张三');
const person2 = new Person('李四');
person1.sayHello(); // 输出：你好，我是张三
person2.sayHello(); // 输出：你好，我是李四4. 动态添加方法
const person = {
name: '张三'
};
// 动态添加方法
person.sayHello = function() {
console.log(`你好，我是${this.name}`);
};
person.sayHello(); // 输出：你好，我是张三方法中的this关键字
在对象方法中，this关键字指向调用该方法的对象。
1. 基本用法
const person = {
name: '张三',
sayHello() {
console.log(`你好，我是${this.name}`);
}
};
person.sayHello(); // 输出：你好，我是张三2. 方法调用上下文
this的值取决于方法被调用的方式：
const person = {
name: '张三',
sayHello() {
console.log(`你好，我是${this.name}`);
}
};
// 作为对象方法调用
person.sayHello(); // 输出：你好，我是张三
// 将方法赋值给变量后调用
const greet = person.sayHello;
greet(); // 输出：你好，我是undefined（因为this不再指向person）
// 在全局作用域中定义name变量
window.name = '全局名称';
greet(); // 输出：你好，我是全局名称（在浏览器环境中）3. 箭头函数中的this
箭头函数不绑定自己的this，而是继承外部作用域的this：
const person = {
name: '张三',
// 普通方法
sayHello() {
console.log(`普通方法：你好，我是${this.name}`);
},
// 箭头函数方法
greet: () => {
console.log(`箭头函数：你好，我是${this.name}`);
},
// 包含箭头函数的方法
delayedGreet() {
setTimeout(() => {
console.log(`延迟问候：你好，我是${this.name}`);
}, 1000);
}
};
person.sayHello(); // 输出：普通方法：你好，我是张三
person.greet(); // 输出：箭头函数：你好，我是undefined（或全局name）
person.delayedGreet(); // 1秒后输出：延迟问候：你好，我是张三4. 绑定this
可以使用bind、call和apply方法显式绑定this：
const person = {
name: '张三',
sayHello() {
console.log(`你好，我是${this.name}`);
}
};
const user = {
name: '李四'
};
// 使用call绑定this
person.sayHello.call(user); // 输出：你好，我是李四
// 使用apply绑定this
person.sayHello.apply(user); // 输出：你好，我是李四
// 使用bind创建新函数
const userGreet = person.sayHello.bind(user);
userGreet(); // 输出：你好，我是李四Object构造函数的静态方法
JavaScript的Object构造函数提供了许多有用的静态方法，用于操作对象。
1. 对象属性的检查和获取
Object.keys()
返回对象自身可枚举属性的名称数组：
const person = {
name: '张三',
age: 30,
occupation: '工程师'
};
const keys = Object.keys(person);
console.log(keys); // 输出：['name', 'age', 'occupation']Object.values()
返回对象自身可枚举属性的值数组：
const person = {
name: '张三',
age: 30,
occupation: '工程师'
};
const values = Object.values(person);
console.log(values); // 输出：['张三', 30, '工程师']Object.entries()
返回对象自身可枚举属性的键值对数组：
const person = {
name: '张三',
age: 30,
occupation: '工程师'
};
const entries = Object.entries(person);
console.log(entries);
// 输出：[['name', '张三'], ['age', 30], ['occupation', '工程师']]
// 使用解构遍历
for (const [key, value] of Object.entries(person)) {
console.log(`${key}: ${value}`);
}Object.getOwnPropertyNames()
返回对象自身所有属性的名称数组（包括不可枚举属性）：
const person = {
name: '张三',
age: 30
};
// 添加不可枚举属性
Object.defineProperty(person, 'id', {
value: '12345',
enumerable: false
});
console.log(Object.keys(person)); // 输出：['name', 'age']
console.log(Object.getOwnPropertyNames(person)); // 输出：['name', 'age', 'id']2. 对象的创建和修改
Object.create()
使用指定的原型对象和属性创建一个新对象：
const personProto = {
sayHello() {
console.log(`你好，我是${this.name}`);
}
};
const person = Object.create(personProto, {
name: {
value: '张三',
writable: true,
enumerable: true
},
age: {
value: 30,
writable: true,
enumerable: true
}
});
person.sayHello(); // 输出：你好，我是张三Object.assign()
将一个或多个源对象的属性复制到目标对象：
const target = { a: 1, b: 2 };
const source1 = { b: 3, c: 4 };
const source2 = { c: 5, d: 6 };
// 合并对象
const result = Object.assign(target, source1, source2);
console.log(target); // 输出：{ a: 1, b: 3, c: 5, d: 6 }
console.log(result === target); // 输出：true（result和target是同一个对象）
// 创建新对象而不修改原对象
const newObj = Object.assign({}, target, { e: 7 });
console.log(newObj); // 输出：{ a: 1, b: 3, c: 5, d: 6, e: 7 }Object.defineProperty() 和 Object.defineProperties()
定义对象的新属性或修改现有属性：
const person = {};
// 定义单个属性
Object.defineProperty(person, 'name', {
value: '张三',
writable: true,
enumerable: true,
configurable: true
});
// 定义多个属性
Object.defineProperties(person, {
age: {
value: 30,
writable: true,
enumerable: true,
configurable: true
},
occupation: {
value: '工程师',
writable: false, // 只读属性
enumerable: true,
configurable: true
}
});
console.log(person); // 输出：{ name: '张三', age: 30, occupation: '工程师' }3. 对象的保护和限制
Object.freeze()
冻结对象，防止添加、删除或修改属性：
const person = {
name: '张三',
age: 30,
address: {
city: '北京'
}
};
Object.freeze(person);
// 尝试修改属性（在严格模式下会抛出错误）
person.name = '李四';
person.salary = 10000;
delete person.age;
console.log(person); // 输出：{ name: '张三', age: 30, address: { city: '北京' } }
// 注意：freeze是浅冻结，嵌套对象仍然可以修改
person.address.city = '上海';
console.log(person.address.city); // 输出：上海Object.seal()
密封对象，防止添加或删除属性，但允许修改现有属性：
const person = {
name: '张三',
age: 30
};
Object.seal(person);
// 可以修改现有属性
person.name = '李四';
// 不能添加新属性
person.occupation = '工程师';
// 不能删除属性
delete person.age;
console.log(person); // 输出：{ name: '李四', age: 30 }
console.log(Object.isSealed(person)); // 输出：trueObject.preventExtensions()
防止向对象添加新属性，但允许修改或删除现有属性：
const person = {
name: '张三',
age: 30
};
Object.preventExtensions(person);
// 可以修改现有属性
person.name = '李四';
// 可以删除现有属性
delete person.age;
// 不能添加新属性
person.occupation = '工程师';
console.log(person); // 输出：{ name: '李四' }
console.log(Object.isExtensible(person)); // 输出：false4. 对象状态检查
Object.is()
判断两个值是否相同：
// 与 === 运算符类似，但有一些差异
console.log(Object.is(5, 5)); // true
console.log(Object.is('hello', 'hello')); // true
console.log(Object.is([], [])); // false（不同对象）
// 与 === 的区别
console.log(+0 === -0); // true
console.log(Object.is(+0, -0)); // false
console.log(NaN === NaN); // false
console.log(Object.is(NaN, NaN)); // trueObject.isExtensible()、Object.isSealed()、Object.isFrozen()
检查对象的扩展、密封和冻结状态：
const obj1 = { a: 1 };
const obj2 = { b: 2 };
const obj3 = { c: 3 };
Object.preventExtensions(obj1);
Object.seal(obj2);
Object.freeze(obj3);
console.log(Object.isExtensible(obj1)); // false
console.log(Object.isExtensible(obj2)); // false
console.log(Object.isExtensible(obj3)); // false
console.log(Object.isSealed(obj1)); // false
console.log(Object.isSealed(obj2)); // true
console.log(Object.isSealed(obj3)); // true
console.log(Object.isFrozen(obj1)); // false
console.log(Object.isFrozen(obj2)); // false
console.log(Object.isFrozen(obj3)); // true实用技巧和最佳实践
1. 方法简写
在现代JavaScript中，推荐使用方法简写语法：
// 推荐
const person = {
name: '张三',
sayHello() {
console.log(`你好，我是${this.name}`);
}
};
// 不推荐
const user = {
name: '李四',
sayHello: function() {
console.log(`你好，我是${this.name}`);
}
};2. 避免在对象方法中使用箭头函数
箭头函数不绑定自己的this，这在对象方法中通常不是期望的行为：
// 不推荐
const person = {
name: '张三',
sayHello: () => {
console.log(`你好，我是${this.name}`); // this不指向person
}
};
// 推荐
const person = {
name: '张三',
sayHello() {
console.log(`你好，我是${this.name}`);
}
};3. 使用Object.assign创建对象副本
const original = { a: 1, b: 2, c: 3 };
const copy = Object.assign({}, original);
// 或使用展开运算符（更简洁）
const copy = { ...original };4. 深拷贝对象
对于嵌套对象，Object.assign()和展开运算符只能进行浅拷贝：
const original = {
name: '张三',
address: {
city: '北京',
district: '海淀'
}
};
// 浅拷贝
const shallowCopy = { ...original };
shallowCopy.address.city = '上海';
console.log(original.address.city); // 输出：上海（原对象也被修改）
// 深拷贝方法1：使用JSON
const deepCopy1 = JSON.parse(JSON.stringify(original));
deepCopy1.address.city = '广州';
console.log(original.address.city); // 输出：上海（原对象不变）
// 深拷贝方法2：递归复制
function deepClone(obj) {
if (obj === null || typeof obj !== 'object') {
return obj;
}
const copy = Array.isArray(obj) ? [] : {};
for (const key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) {
copy[key] = deepClone(obj[key]);
}
}
return copy;
}
const deepCopy2 = deepClone(original);5. 使用解构简化对象操作
const person = {
name: '张三',
age: 30,
occupation: '工程师',
address: {
city: '北京',
district: '海淀'
}
};
// 解构基本属性
const { name, age } = person;
console.log(name, age); // 输出：张三 30
// 解构嵌套属性
const { address: { city, district } } = person;
console.log(city, district); // 输出：北京 海淀
// 解构并重命名
const { name: fullName, occupation: job } = person;
console.log(fullName, job); // 输出：张三 工程师
// 解构并设置默认值
const { salary = 10000 } = person;
console.log(salary); // 输出：10000（使用默认值）6. 使用Object.fromEntries()将数组转换为对象
// 将键值对数组转换为对象
const entries = [
['name', '张三'],
['age', 30],
['occupation', '工程师']
];
const person = Object.fromEntries(entries);
console.log(person); // 输出：{ name: '张三', age: 30, occupation: '工程师' }
// 与Object.entries()配合使用，可以方便地转换对象
const user = {
name: '李四',
age: 25,
occupation: '设计师'
};
// 转换所有值为字符串
const stringified = Object.fromEntries(
Object.entries(user).map(([key, value]) => [key, String(value)])
);
console.log(stringified); // 输出：{ name: '李四', age: '25', occupation: '设计师' }常见问题与解决方案
1. this指向问题
const person = {
name: '张三',
greet() {
console.log(`你好，我是${this.name}`);
},
delayedGreet() {
// 错误方式：this会丢失
setTimeout(function() {
console.log(`延迟问候：你好，我是${this.name}`);
}, 1000);
// 正确方式1：使用箭头函数
setTimeout(() => {
console.log(`延迟问候1：你好，我是${this.name}`);
}, 1000);
// 正确方式2：保存this引用
const self = this;
setTimeout(function() {
console.log(`延迟问候2：你好，我是${self.name}`);
}, 1000);
// 正确方式3：使用bind
setTimeout(function() {
console.log(`延迟问候3：你好，我是${this.name}`);
}.bind(this), 1000);
}
};
person.delayedGreet();2. 方法链式调用
// 实现方法链
const calculator = {
value: 0,
add(n) {
this.value += n;
return this;
},
subtract(n) {
this.value -= n;
return this;
},
multiply(n) {
this.value *= n;
return this;
},
divide(n) {
if (n !== 0) {
this.value /= n;
}
return this;
},
getValue() {
return this.value;
}
};
// 链式调用
const result = calculator
.add(5)
.multiply(2)
.subtract(3)
.divide(2)
.getValue();
console.log(result); // 输出：3.53. 对象方法的性能考虑
// 避免在循环中重复创建方法
function createPeople(names) {
// 不推荐：每个对象都有自己的方法副本
const peopleInefficient = names.map(name => ({
name,
sayHello() {
console.log(`你好，我是${this.name}`);
}
}));
// 推荐：共享方法
const sharedMethods = {
sayHello() {
console.log(`你好，我是${this.name}`);
}
};
const peopleEfficient = names.map(name => {
const person = { name };
Object.setPrototypeOf(person, sharedMethods);
return person;
});
return { peopleInefficient, peopleEfficient };
}
const names = ['张三', '李四', '王五', '赵六', '钱七'];
const { peopleInefficient, peopleEfficient } = createPeople(names);总结
JavaScript对象方法是构建功能丰富的应用程序的基础。通过本文，我们学习了：
- 对象方法的定义：包括对象字面量、构造函数、原型和动态添加等多种方式。
- this关键字：了解了方法中this的行为及其在不同上下文中的指向。
- Object静态方法：掌握了Object构造函数提供的各种实用方法，用于操作和检查对象。
- 最佳实践：学习了方法简写、避免箭头函数作为方法、对象拷贝等实用技巧。
通过合理使用对象方法和Object静态方法，我们可以编写更加简洁、高效和可维护的JavaScript代码。在实际开发中，灵活运用这些知识点，将大大提高我们的编程效率和代码质量。