JavaScript 对象

跳房子的前端

已于 2024-09-15 13:27:03 修改

阅读量540

点赞数 18

分类专栏： JavaScript 初级学习文章标签： javascript 开发语言 ecmascript

于 2024-09-15 11:08:24 首次发布

本文链接：https://blog.csdn.net/shenfangda520/article/details/142281671

版权

JavaScript 初级学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

对象是 JavaScript 中的核心概念之一，它用于存储和组织数据。了解对象的创建、属性和方法的使用是深入理解 JavaScript 的重要部分。

7. 对象

7.1 对象的基本概念

创建对象

对象字面量（Object Literal）

定义：最常见的创建对象的方式，通过 {} 创建。

示例：

let person = {
  name: 'Alice',
  age: 30,
  greet: function() {
    return `Hello, ${this.name}`;
  }
};

console.log(person.name); // Alice
console.log(person.greet()); // Hello, Alice

构造函数（Constructor Function）

定义：使用 function 关键字定义的构造函数，通过 new 关键字创建对象实例。

示例：

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function() {
    return `Hello, ${this.name}`;
  };
}

let person1 = new Person('Bob', 25);
console.log(person1.name); // Bob
console.log(person1.greet()); // Hello, Bob

类（Class）

定义：ES6 引入的语法糖，用于定义对象的构造函数和方法。

示例：

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    return `Hello, ${this.name}`;
  }
}

let person2 = new Person('Charlie', 35);
console.log(person2.name); // Charlie
console.log(person2.greet()); // Hello, Charlie

7.2 对象的属性和方法

访问和修改属性

点操作符（Dot Notation）

示例：

let car = {
  brand: 'Toyota',
  model: 'Corolla'
};

console.log(car.brand); // Toyota
car.model = 'Camry';
console.log(car.model); // Camry

方括号操作符（Bracket Notation）

示例：

let person = {
  'first name': 'Alice',
  'last name': 'Smith'
};

console.log(person['first name']); // Alice
person['last name'] = 'Johnson';
console.log(person['last name']); // Johnson

动态属性名

示例：

let key = 'color';
let car = {
  [key]: 'red'
};

console.log(car.color); // red

对象方法

定义方法

示例：

let person = {
  name: 'Alice',
  sayHello() {
    return `Hello, ${this.name}`;
  }
};

console.log(person.sayHello()); // Hello, Alice

方法简写

定义：在对象字面量中，可以使用简写语法定义方法。

示例：

let person = {
  name: 'Alice',
  greet() {
    return `Hello, ${this.name}`;
  }
};

console.log(person.greet()); // Hello, Alice

7.3 对象的继承和原型链

原型链（Prototype Chain）
- 定义：每个 JavaScript 对象都有一个 [[Prototype]] 属性（在现代 JavaScript 中用 __proto__ 或 Object.getPrototypeOf 访问），指向另一个对象。这形成了原型链。
示例：
```
let animal = {
  eats: true
};

let rabbit = Object.create(animal);
rabbit.hops = true;

console.log(rabbit.eats); // true
console.log(rabbit.hops); // true
```
- 访问原型属性
  
  示例：
```
console.log(rabbit.__proto__ === animal); // true
```

继承（Inheritance）

通过原型继承

示例：

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

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

function Dog(name) {
  Animal.call(this, name);
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() {
  console.log(`${this.name} barks.`);
};

let dog = new Dog('Rex');
dog.speak(); // Rex makes a noise.
dog.bark(); // Rex barks.

通过类继承

示例：

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  bark() {
    console.log(`${this.name} barks.`);
  }
}

let dog = new Dog('Rex');
dog.speak(); // Rex makes a noise.
dog.bark(); // Rex barks.

7.4 对象的其他操作

对象的遍历

for...in 循环

示例：

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

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

Object.keys()

定义：返回对象的所有可枚举属性名的数组。

示例：

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

console.log(Object.keys(person)); // ['name', 'age']

Object.values()

定义：返回对象的所有可枚举属性值的数组。

示例：

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

console.log(Object.values(person)); // ['Alice', 30]

Object.entries()

定义：返回对象的所有可枚举属性的键值对数组。

示例：

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

console.log(Object.entries(person)); // [['name', 'Alice'], ['age', 30]]

对象的合并和扩展

Object.assign()

定义：将源对象的属性复制到目标对象中。

示例：

let target = { name: 'Alice' };
let source = { age: 30 };

Object.assign(target, source);

console.log(target); // { name: 'Alice', age: 30 }

对象扩展运算符（Spread Operator）

定义：在 ES6 中引入，用于浅拷贝对象或合并对象。

示例：

let person = { name: 'Alice', age: 30 };
let additionalInfo = { job: 'Engineer' };

let updatedPerson = { ...person, ...additionalInfo };

console.log(updatedPerson); // { name: 'Alice', age: 30, job: 'Engineer' }

8. 总结

对象的创建：包括对象字面量、构造函数和类。
对象的属性和方法：包括访问、修改属性和定义方法。
对象的继承和原型链：包括通过原型链和类继承实现继承。
对象的其他操作：包括遍历对象、合并和扩展对象等。

掌握对象的这些概念是 JavaScript 编程的重要基础，有助于你更好地组织和管理代码。接下来，可以学习数组，了解如何操作数组，掌握数组的各种方法和特性。在掌握了函数的基本概念和高级特性之后，我们可以继续学习对象。对象是 JavaScript 中的核心概念之一，它用于存储和组织数据。了解对象的创建、属性和方法的使用是深入理解 JavaScript 的重要部分。