news 2026/2/27 14:15:54

对象创建与使用:从基础到进阶

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
对象创建与使用:从基础到进阶

在 JavaScript 中,对象是一种非常重要的数据类型,它允许我们将相关的数据和功能组织在一起。本文将从基础到进阶,详细介绍 JavaScript 中对象的创建与使用。

基础部分

1. 对象的基本概念

在 JavaScript 里,对象可以看作是键值对的集合,键通常是字符串(也可以是 Symbol 类型),值可以是任意数据类型,包括其他对象。

2. 创建对象的基本方式
2.1 对象字面量

对象字面量是创建对象最直接的方式,使用花括号{}来定义对象,键值对之间用逗号分隔。

// 创建一个简单的对象constperson={name:'John',age:30,job:'Developer'};console.log(person);

上述代码创建了一个名为person的对象,包含了nameagejob三个属性。

2.2 使用new Object()构造函数

除了对象字面量,还可以使用new Object()构造函数来创建对象。

constcar=newObject();car.brand='Toyota';car.model='Corolla';car.year=2020;console.log(car);

这里先创建了一个空对象car,然后通过点号.为其添加属性。

3. 访问和修改对象属性

可以使用点号.或方括号[]来访问和修改对象的属性。

constbook={title:'JavaScript: The Definitive Guide',author:'David Flanagan',year:2020};// 使用点号访问属性console.log(book.title);// 使用方括号访问属性console.log(book['author']);// 修改属性值book.year=2021;console.log(book.year);

点号和方括号的区别在于,方括号可以使用变量作为属性名,而点号只能使用固定的属性名。

4. 删除对象属性

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

constfruit={name:'Apple',color:'Red',taste:'Sweet'};deletefruit.color;console.log(fruit);

执行delete操作后,fruit对象的color属性就被删除了。

进阶部分

1. 构造函数创建对象

构造函数是一种特殊的函数,用于创建和初始化对象。通常,构造函数的名称以大写字母开头。

functionPerson(name,age,job){this.name=name;this.age=age;this.job=job;}constperson1=newPerson('Alice',25,'Designer');constperson2=newPerson('Bob',35,'Manager');console.log(person1);console.log(person2);

在上述代码中,Person是一个构造函数,使用new关键字调用构造函数可以创建新的Person对象。

2. 原型和原型链

JavaScript 中的每个对象都有一个原型对象,原型对象也是一个对象,它也有自己的原型对象,以此类推,直到最顶层的Object.prototype

functionAnimal(name){this.name=name;}// 给 Animal 的原型添加方法Animal.prototype.speak=function(){console.log(`${this.name}makes a noise.`);};constdog=newAnimal('Dog');dog.speak();console.log(dog.__proto__===Animal.prototype);console.log(Animal.prototype.__proto__===Object.prototype);

上述代码展示了如何通过原型为构造函数创建的对象添加方法,以及原型链的关系。可以用以下图表表示原型链:

prototype

prototype

prototype

proto

Animal

Animal.prototype

Object.prototype

null

dog

3.Object.create()方法

Object.create()方法可以创建一个新对象,该对象继承自指定的原型对象。

constanimal={speak(){console.log(`${this.name}makes a noise.`);}};constcat=Object.create(animal);cat.name='Cat';cat.speak();

这里cat对象继承了animal对象的speak方法。

4. 类和继承(ES6 及以后)

ES6 引入了class关键字,使得 JavaScript 可以使用更类似于传统面向对象语言的方式来创建对象和实现继承。

// 定义一个基类classShape{constructor(color){this.color=color;}draw(){console.log(`Drawing a shape with color${this.color}.`);}}// 定义一个子类classCircleextendsShape{constructor(color,radius){super(color);this.radius=radius;}area(){returnMath.PI*this.radius*this.radius;}}constredCircle=newCircle('red',5);redCircle.draw();console.log(redCircle.area());

上述代码中,Circle类继承自Shape类,使用super关键字调用父类的构造函数。

5. 对象的方法和this关键字

在对象的方法中,this关键字指向调用该方法的对象。

constcalculator={num1:10,num2:20,add(){returnthis.num1+this.num2;}};console.log(calculator.add());

这里this指向calculator对象。

6. 遍历对象属性

可以使用for...in循环或Object.keys()Object.values()Object.entries()方法来遍历对象的属性。

6.1for...in循环
conststudent={name:'Eve',age:22,major:'Computer Science'};for(letkeyinstudent){console.log(`${key}:${student[key]}`);}

for...in循环会遍历对象的可枚举属性,包括对象自身的属性和继承的属性。

6.2Object.keys()
constkeys=Object.keys(student);console.log(keys);

Object.keys()方法返回一个由对象自身的可枚举属性名组成的数组。

6.3Object.values()
constvalues=Object.values(student);console.log(values);

Object.values()方法返回一个由对象自身的可枚举属性值组成的数组。

6.4Object.entries()
constentries=Object.entries(student);console.log(entries);

Object.entries()方法返回一个由对象自身的可枚举属性的键值对数组组成的数组。

总结

本文从基础到进阶详细介绍了 JavaScript 中对象的创建与使用。基础部分包括对象字面量、new Object()构造函数、属性的访问和修改、属性的删除等;进阶部分涵盖了构造函数、原型和原型链、Object.create()方法、类和继承、对象的方法和this关键字以及对象属性的遍历等内容。掌握这些知识,将有助于你更好地使用 JavaScript 进行开发。

在实际开发中,根据不同的需求选择合适的对象创建和使用方式,可以提高代码的可读性和可维护性。例如,对于简单的对象可以使用对象字面量,而对于需要创建多个相似对象的场景,可以使用构造函数或类。同时,理解原型和继承的概念,可以更好地实现代码的复用和扩展。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/2/23 1:57:44

ClimaX:构建新一代气象预测的智能基石

ClimaX:构建新一代气象预测的智能基石 【免费下载链接】ClimaX Foundation model for weather & climate 项目地址: https://gitcode.com/gh_mirrors/cli/ClimaX 在当今气候变化日益严峻的时代,精准的气象预测已成为社会经济发展的重要支撑。…

作者头像 李华
网站建设 2026/2/26 10:04:30

ISAC技术终极指南:从零基础到实战应用的完整学习路径

ISAC技术终极指南:从零基础到实战应用的完整学习路径 【免费下载链接】Must-Reading-on-ISAC Must Reading Papers, Research Library, Open-Source Code on Integrated Sensing and Communications (aka. Joint Radar and Communications, Joint Sensing and Commu…

作者头像 李华
网站建设 2026/2/26 5:16:46

数智化破壁:科创知识图谱驱动技术转移新生态构建

科易网AI技术转移与科技成果转化研究院 当一项前沿科技成果在实验室诞生,却因信息孤岛而沉睡;当企业迫切寻求技术升级,却在海量数据中迷失方向——技术转移的堵点,正成为制约创新生态跃升的隐形枷锁。传统模式下,科…

作者头像 李华
网站建设 2026/2/26 10:31:27

图片元数据管理的终极解决方案:5个让你效率翻倍的功能

图片元数据管理的终极解决方案:5个让你效率翻倍的功能 【免费下载链接】jExifToolGUI jExifToolGUI is a multi-platform java/Swing graphical frontend for the excellent command-line ExifTool application by Phil Harvey 项目地址: https://gitcode.com/gh_…

作者头像 李华
网站建设 2026/2/26 18:50:16

PaddlePaddle镜像中的Mask R-CNN实例分割性能实测

PaddlePaddle镜像中的Mask R-CNN实例分割性能实测 在当前AI模型日益复杂、部署链条不断拉长的背景下,如何快速构建一个稳定、高效且可复现的实例分割系统,成为工业界和科研团队共同关注的核心问题。尤其是在医疗影像分析、自动驾驶感知或智能制造质检等高…

作者头像 李华
网站建设 2026/2/26 5:07:20

PaddlePaddle镜像发布社区版与企业版两种GPU适配方案

PaddlePaddle镜像发布社区版与企业版两种GPU适配方案 在AI项目落地的现实中,一个常见的场景是:算法团队熬夜调通模型,却在部署时因CUDA版本不匹配、cuDNN缺失或驱动冲突导致“环境问题”卡住数日。这种“在我机器上能跑”的窘境,在…

作者头像 李华