JavaScript 对象

本文被收录到:

JavaScript 教程

JavaScript 是互联网上最流行的编程语言。使用 JavaScript 可以开发网站、APP、小程序、游戏和服务器端。写这个教程是为了提高自己的 JavaScript 编程水平,而最好的学习方法就是“费曼学习法”,以教代学,以输出倒逼输入。最近日渐成熟的 AI 工具,刚好成为我写这个教程锦上添花。

目录

引言

在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

声明:本站所有文章和图片,如无特殊说明,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。
真诚赞赏,手留余香
赞赏
搜神记
763 文章
4 教程
8 项目
随机推荐
Debian11 安装笔记4:安装常用软件
JavaScript 焦点管理
SQL 注入的生命力
如何调整 iconfont 图标的位置和基线
JavaScript Date 类型
JavaScript 的历史
JavaScript 中的数据类型自动转换为 Boolean 状态
Node.js stream 流