JavaScript 对象 - JavaScript 编程网

引言

在JavaScript中，对象是一种复合数据类型，用于存储键值对集合。对象允许我们将数据和功能组织在一起，模拟现实世界中的实体，如用户、汽车或者订单。本教程将深入介绍JavaScript对象的基本概念、创建方式、访问及修改属性、方法定义以及对象的高级特性。

基础概念

属性和方法

对象由属性（键值对）和方法（可执行的函数）组成。属性用来描述对象的状态，而方法则定义了对象的行为。

访问方式

使用点表示法或括号表示法访问对象的属性和方法。

let user = {
  name: 'Alice',
  age: 30,
};

console.log(user.name); // 使用点表示法
console.log(user['age']); // 使用括号表示法

创建对象

对象字面量

最直接的创建对象方法是使用对象字面量，即一对花括号{}内定义属性和方法。

let person = {
  firstName: 'John',
  lastName: 'Doe',
  sayHello: function() {
    console.log('Hello, my name is ' + this.firstName + ' ' + this.lastName);
  },
};

构造函数

构造函数是一种特殊的函数，用于初始化新创建的对象。使用new关键字调用构造函数来创建对象。

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.sayHello = function() {
    console.log('Hello, I am ' + this.firstName + ' ' + this.lastName);
  };
}

let person1 = new Person('Jane', 'Doe');

工厂函数

工厂函数是一种模式，用于创建并返回对象，但它不使用new关键字。

function createUser(name, age) {
  let user = {};
  user.name = name;
  user.age = age;
  user.introduce = function() {
    console.log('I am ' + this.name + ', and I am ' + this.age + ' years old.');
  };
  return user;
}

let user2 = createUser('Bob', 25);

原型

每个JavaScript函数都有一个prototype属性，用于继承方法和属性。这是实现对象间共享功能的一种方式。

function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function() {
  console.log(this.name + ' makes a noise.');
};

let cat = new Animal('Whiskers');
cat.speak(); // 输出 "Whiskers makes a noise."

class关键字 (ES6)

ES6引入了class语法糖，使得基于原型的面向对象编程更加简洁清晰。

class AnimalES6 {
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(this.name + ' says hello.');
  }
}

let dog = new AnimalES6('Rex');
dog.speak(); // 输出 "Rex says hello."

访问与修改属性

可以直接通过点或括号访问修改属性。

person.firstName = 'Johnny'; // 修改属性
console.log(person.firstName); // 访问修改后的属性
console.log(obj["property"]); //括号表示法

遍历对象

使用for...in循环遍历对象的所有可枚举属性。

for(let key in person) {
  if(person.hasOwnProperty(key)) {
    console.log(key + ': ' + person[key]);
  }
}

删除属性

使用delete关键字删除对象的属性。

delete person.sayHello;

属性特性

enumerable：决定属性是否能在 for...in 循环、Object.keys() 中被枚举。
writable：决定属性的值能否被修改。
configurable：决定属性是否能被删除，以及其特性是否能被修改。

内置方法

Object.keys()：返回一个包含对象自身可枚举属性名称的数组。
Object.values()：返回一个包含对象自身可枚举属性值的数组。
Object.entries()：返回一个包含对象自身可枚举属性 [key, value] 对的数组。
Object.assign()：将源对象的可枚举属性复制到目标对象。
Object.getOwnPropertyDescriptor()：获取指定对象上某个自有属性的描述符。
Object.defineProperty()：直接在一个对象上定义一个新属性或修改现有属性，并返回该对象。
Object.create()：使用指定的原型对象和属性创建并返回一个新的对象。
Object.freeze()：冻结一个对象，使其属性不可更改且不能添加新的属性。
... 还有很多其他方法，用于检查、操作和处理对象。

实例属性和方法

hasOwnProperty()：判断对象是否有指定的自有属性，不包括继承的属性。
toString()：返回对象的字符串表示形式，默认情况下返回 [object Type]，其中 Type 是对象的类型。
valueOf()：返回对象的原始值，对于大多数对象来说默认返回对象本身。

理解 Object 对象及其方法是深入学习JavaScript面向对象编程的基础。

总结

JavaScript的对象机制是其灵活性和强大功能的基础。理解对象的创建、属性访问与修改、方法定义以及如何利用原型链和ES6的class语法，对于构建复杂应用至关重要。实践这些概念，你将能够更有效地组织和操作数据，提升你的JavaScript编程水平。

修改时间 2024-06-07

声明：本站所有文章和图片，如无特殊说明，均为原创发布。商业转载请联系作者获得授权，非商业转载请注明出处。

真诚赞赏，手留余香

赞赏