首页 > web前端 > js教程 > 正文

js创建对象的几种方式

冷炫風刃
发布: 2025-11-13 09:15:52
原创
735人浏览过
JavaScript中创建对象有7种方式:1. 字面量方式最简单但无法复用;2. new Object()构造函数略显冗长;3. 工厂函数可批量创建但实例原型指向Object;4. 构造函数配合new创建实例,但方法重复占用内存;5. 原型方式共享方法节省内存,但引用属性可能被共用;6. 构造函数+原型组合模式兼顾属性独立与方法共享,是标准模式;7. ES6 class语法更清晰,支持继承和静态方法,推荐现代开发使用。

js创建对象的几种方式

JavaScript 中创建对象有多种方式,每种都有其适用场景。下面介绍几种常见且实用的方法。

1. 字面量方式创建对象

这是最简单、最常用的方式,适合创建单个对象。

直接使用花括号 {} 定义属性和方法。

const person = { name: '张三', age: 25, sayHello() { console.log('你好,我是' + this.name); } }; person.sayHello(); // 输出:你好,我是张三

优点是语法简洁,缺点是无法复用,不适合创建多个类似对象。

2. 使用 new Object() 构造函数

通过内置的 Object 构造函数创建对象,本质和字面量类似。

const car = new Object(); car.brand = '丰田'; car.year = 2020; car.start = function() { console.log('启动车辆'); };

这种方式略显冗长,现在较少使用,但能帮助理解对象的构造过程。

3. 工厂函数模式

定义一个函数,返回一个对象,用于批量创建相似对象。

function createPerson(name, age) { return { name: name, age: age, sayHello() { console.log('我是' + this.name); } }; } const p1 = createPerson('李四', 30); const p2 = createPerson('王五', 28);

解决了重复创建的问题,但对象无法识别原型,所有实例的 constructor 都指向 Object。

4. 构造函数方式

使用自定义构造函数,配合 new 关键字创建实例。

北极象沉浸式AI翻译
北极象沉浸式AI翻译

免费的北极象沉浸式AI翻译 - 带您走进沉浸式AI的双语对照体验

北极象沉浸式AI翻译 0
查看详情 北极象沉浸式AI翻译
function Person(name, age) { this.name = name; this.age = age; this.sayHello = function() { console.log('你好,我是' + this.name); }; } const p1 = new Person('赵六', 35); const p2 = new Person('钱七', 22);

每个实例都有自己的方法副本,存在内存浪费问题。但可以通过 prototype 改进。

5. 原型(prototype)方式

将方法挂载在构造函数的 prototype 上,实现方法共享。

function Animal() {} Animal.prototype.type = '动物'; Animal.prototype.speak = function() { console.log('发出声音'); }; const dog = new Animal(); dog.speak(); // 发出声音

节省内存,方法共用。但所有实例共享属性,若属性是引用类型可能互相影响。

6. 构造函数 + 原型组合模式

目前最常用的创建对象方式:构造函数定义实例属性,原型定义方法。

function Student(name, grade) { this.name = name; this.grade = grade; } Student.prototype.study = function() { console.log(this.name + '正在学习'); }; const s1 = new Student('小明', 3); s1.study(); // 小明正在学习

兼顾了属性独立与方法共享,是 JS 中创建自定义对象的标准模式。

7. ES6 class 语法

ES6 引入的 class 语法,本质上是构造函数的语法糖,更清晰易读。

class Teacher { constructor(name, subject) { this.name = name; this.subject = subject; } teach() { console.log(this.name + '教' + this.subject); } } const t1 = new Teacher('刘老师', '数学'); t1.teach(); // 刘老师教数学

结构清晰,支持继承(extends)、静态方法等,推荐现代开发中使用。

基本上就这些。根据项目需求和环境选择合适的方式即可。不复杂但容易忽略细节。

以上就是js创建对象的几种方式的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门推荐
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号