news 2026/8/4 0:33:11

别再只会用 Class 了!JS 构造函数与原型才是核心

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
别再只会用 Class 了!JS 构造函数与原型才是核心

本文将带你从构造函数与原型这两个核心概念入手,拆解它们的设计初衷与协作逻辑,从而理解 JavaScript 独特的编程思想。

为什么需要构造函数?

在 JavaScript 中,当我们需要创建多个具有相同属性和方法的对象时,直接使用对象字面量会产生大量重复代码。
构造函数正是为了解决这个问题而生,它让对象的创建更具规范性和可维护性。

1. 构造函数的作用

  • 批量创建对象:通过一个模板快速生成多个结构相似的实例。
  • 初始化实例:在创建对象时,就为其赋予初始的属性和行为。
  • 标识类型:通过 instanceof 可以判断对象的构造函数,从而明确其 “类型”。

2. 基础示例

// 定义构造函数functionPerson(name,age){this.name=name;this.age=age;this.sayHello=function(){console.log(`你好,我是${this.name},今年${this.age}`);};}// 创建实例constp1=newPerson("张三",22);constp2=newPerson("李四",25);p1.sayHello();// 你好,我是张三,今年22岁p2.sayHello();// 你好,我是李四,今年25岁// 验证类型console.log(p1instanceofPerson);// true

冗余问题

每个实例都会单独创建一个 sayHello 方法。

这不仅浪费内存,也不符合代码复用的思想。

console.log(p1.sayHello===p2.sayHello);// false// 说明每个实例的sayHello都是一个新的函数对象

如果创建 1000 个 Person 实例,就会生成 1000 个完全相同的 sayHello 函数,这在性能和内存上都是极大的浪费。

原型(共享与复用的关键)

为了解决方法冗余的问题,JavaScript 引入了原型(Prototype)机制。
每个函数都有一个 prototype 属性,它指向一个对象,我们称之为原型对象。

原型的特性

  • 共享机制:所有通过该构造函数创建的实例,都会共享原型对象上的属性和方法。
  • 查找链:当访问实例的一个属性或方法时,如果实例本身没有,就会去原型对象上查找。
  • 动态更新:对原型对象的修改会立即反映到所有现有实例上。

优化后的代码

functionPerson(name,age){this.name=name;this.age=age;}// 将方法定义在原型上Person.prototype.sayHello=function(){console.log(`你好,我是${this.name},今年${this.age}`);};// 新增共享属性Person.prototype.species="人类";constp1=newPerson("张三",22);constp2=newPerson("李四",25);console.log(p1.sayHello===p2.sayHello);// trueconsole.log(p1.species);// 人类console.log(p2.species);// 人类

构造函数 + 原型

在 ES6 之前,JavaScript 并没有真正的 class 关键字。

它正是通过构造函数 + 原型的组合,模拟出了面向对象中 “类” 的效果。

ES6 Class 的本质

ES6 引入的 class 语法,其实只是构造函数 + 原型的语法糖。

它让代码更符合传统面向对象的写法,但底层逻辑并未改变。

// ES6 Class 写法classPerson{constructor(name,age){this.name=name;this.age=age;}// 实例方法,会被挂载到原型上sayHello(){console.log(`你好,我是${this.name},今年${this.age}`);}// 静态方法,不会被挂载到原型上staticcreate(name,age){returnnewPerson(name,age);}}// 底层依然是构造函数 + 原型console.log(typeofPerson);// functionconsole.log(Person.prototype.sayHello);// [Function: sayHello]// 使用静态方法创建实例constp3=Person.create("王五",30);p3.sayHello();// 你好,我是王五,今年30岁

原型链与继承

原型的作用不止于方法复用,它还是 JavaScript 实现继承的基础。

通过修改构造函数的原型指向另一个类型的实例,就能让该类型的实例继承另一个类型的属性和方法,这就是原型链继承。

原型链继承示例

// 父类构造函数functionAnimal(name){this.name=name;}Animal.prototype.eat=function(){console.log(`${this.name}正在吃东西`);};// 子类构造函数functionDog(name,breed){Animal.call(this,name);// 继承父类的属性this.breed=breed;}// 继承父类的方法Dog.prototype=Object.create(Animal.prototype);Dog.prototype.constructor=Dog;// 修复constructor指向// 子类的方法Dog.prototype.bark=function(){console.log(`${this.name}正在汪汪叫`);};constmyDog=newDog("旺财","中华田园犬");myDog.eat();// 旺财正在吃东西myDog.bark();// 旺财正在汪汪叫

总结

总的来说,理解构造函数与原型是打通 JavaScript 编程思想的关键一环:构造函数解决了对象批量创建与初始化的痛点,而原型则完美实现了属性与方法的共享复用,二者相辅相成,共同构成了 JavaScript 面向对象编程的核心基础。

掌握这些底层逻辑,不仅能让你写出更高效、更优雅的代码,更能为后续深入学习原型链、继承、ES6 Class 等高级概念筑牢根基。
当你再面对复杂的业务场景时,就能用更贴近语言本质的方式去设计代码,真正做到知其然,更知其所以然。

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

用Qwen-Image-2512-ComfyUI做内容创作,效率大提升

用Qwen-Image-2512-ComfyUI做内容创作,效率大提升 1. 这不是又一个“点几下就能出图”的工具,而是真正能帮你省掉80%重复劳动的内容生产力引擎 你有没有过这样的经历: 周一早上被临时通知要赶三张电商主图,但设计师排期已满&am…

作者头像 李华
网站建设 2026/7/31 2:32:52

用Z-Image-Turbo生成传统国画,意境十足

用Z-Image-Turbo生成传统国画,意境十足 在AI绘画工具泛滥的今天,多数模型面对“水墨”“留白”“气韵”这类东方美学关键词时,往往交出一张堆砌元素却空有其表的“伪国画”——山是山、水是水,却不见“远山长,云山乱&…

作者头像 李华
网站建设 2026/7/30 3:05:39

Emotion2Vec+ Large开源免费,但需保留版权信息

Emotion2Vec Large语音情感识别系统:开源免费,但需保留版权信息 机器之心专栏 作者:科哥(AI语音交互系统开发者) 来自:CSDN星图镜像广场 Emotion2Vec Large语音情感识别系统已正式开源发布。这不是一个概…

作者头像 李华
网站建设 2026/7/31 14:57:55

告别高显存依赖!用麦橘超然Flux在8GB显卡跑通AI绘图

辞别显存焦虑!用麦橘超然Flux在8GB显卡跑通AI绘图 1. 为什么你卡在“显存不足”上?——一个被低估的现实困境 你是不是也经历过这些时刻: 下载好Flux模型,刚点开WebUI就弹出红色报错:CUDA out of memory&#xff1b…

作者头像 李华
网站建设 2026/7/25 13:59:21

BUCK电路中功率电感的选型实战案例

以下是对您提供的博文内容进行 深度润色与专业重构后的版本 。整体风格更贴近一位资深电源工程师在技术社区中的真实分享:语言自然、逻辑严密、有经验沉淀、有实测佐证、有工程取舍, 彻底去除AI腔调与模板化表达 ,同时强化可读性、实战性…

作者头像 李华
网站建设 2026/7/31 17:24:12

通过命令行配置树莓派静态IP:Raspberry Pi OS实操指南

以下是对您提供的博文内容进行 深度润色与专业重构后的终稿 。我以一名嵌入式系统工程师兼技术博主的身份,彻底摒弃模板化表达、AI腔调和教科书式结构,转而采用 真实开发场景驱动 工程经验沉淀 精准技术解析 的写法,语言更凝练、逻辑更…

作者头像 李华