函数声明 vs 类声明：前端仔别再搞混了，一文讲透怎么用才不翻车
- 函数声明 vs 类声明：前端仔别再搞混了，一文讲透怎么用才不翻车
- 先整点开胃菜：一段代码两种死法
- 引擎视角：同一段源码，两种内心戏
- 函数声明——老牌打工人，随叫随到
- 1. 提升（Hoisting）彻底
- 2. 默认给你配好 prototype
- 3. 当普通函数还是当构造器？全靠 caller 自觉
- 类声明——高冷新贵，出场顺序不能乱
- 1. 不提升，但块级作用域有惊喜
- 2. 内部默认跑严格模式，想偷懒都不行
- 3. 继承语法糖，但底层还是原型链
- this 指向：渣男 vs 老狗
- 普通函数里的 this——看调用姿势
- 类方法里的 this——默认绑定实例，但箭头函数又出来搅局
- 继承：手动搭积木 vs 全自动全家桶
- 函数版本：prototype 链自己撸
- 类版本：extends 一键生成
- 实战踩坑合集
- 坑1：把类当函数提上来用
- 坑2：类里方法想解构出来跑定时器
- 坑3：循环里动态创建方法，结果全部共享一个闭包变量
- 到底怎么选？场景对口才最香
- 性能八卦：谁的内存 footprint 更小？
- 工具链小贴士
- ESLint 规则
- TypeScript 加持
- 结尾叨叨
函数声明 vs 类声明：前端仔别再搞混了，一文讲透怎么用才不翻车
友情提示：本文全程碎碎念，代码量巨大，建议收藏后慢慢啃。别在地铁里看，坐过站别找我。
先整点开胃菜：一段代码两种死法
// 场景一：函数声明console.log(earlyBird())// "i am alive"functionearlyBird(){return'i am alive'}// 场景二：类声明console.log(newEarlyBird())// 报错：Cannot access 'EarlyBird' before initializationclassEarlyBird{slogan(){return'i am alive'}}看到没？函数声明跟办了VIP卡似的，代码还没跑到它那一行，引擎就提前把它拎到最前面；类声明却像社恐，必须等主持人喊到名字才肯上台。
这不是玄学，这是规范——ECMA-262 第15条写着呢，别跟标准较劲，较劲就是你输。
引擎视角：同一段源码，两种内心戏
引擎拿到源码先过一遍「词法分析」，再「语法分析」，最后「预解析」。
函数声明在预解析阶段就被塞进「环境记录」里，所以你在第1行就能调到第10行才写到的函数。
类声明却只在「执行阶段」才创建绑定，于是提前访问就报ReferenceError。
说人话：函数是「先上车后补票」，类是「票不齐不给上」。
函数声明——老牌打工人，随叫随到
1. 提升（Hoisting）彻底
// 这都能跑，就离谱step1()functionstep1(){console.log('step1')}step2()functionstep2(){console.log('step2')}2. 默认给你配好 prototype
functionPerson(name){this.name=name}// 引擎背地里干了啥？// Person.prototype = { constructor: Person }Person.prototype.sayHi=function(){console.log(`hi,${this.name}`)}constp=newPerson('阿强')p.sayHi()// hi, 阿强3. 当普通函数还是当构造器？全靠 caller 自觉
functionWallet(money){if(!new.target){// 防止有人忘了写 newreturnnewWallet(money)}this.money=money}constw1=newWallet(100)constw2=Wallet(200)// 也能跑，但多亏咱在里面兜了底类声明——高冷新贵，出场顺序不能乱
1. 不提升，但块级作用域有惊喜
{// 暂时性死区开始constfoo=newFoo()// ReferenceErrorclassFoo{}}2. 内部默认跑严格模式，想偷懒都不行
classSloth{// 这里面的代码自动 'use strict'sleep(){console.log(this)// undefined 也不会滑到 window，严格模式帮你守住底线}}3. 继承语法糖，但底层还是原型链
classAnimal{constructor(name){this.name=name}speak(){console.log(`${this.name}makes a noise.`)}}classDogextendsAnimal{constructor(name,breed){super(name)// 必须先 call super，才能用 thisthis.breed=breed}speak(){super.speak()// 想调父类方法？super 帮你console.log(`${this.name}barks.`)}}constdog=newDog('旺财','柴犬')dog.speak()// 输出：// 旺财 makes a noise.// 旺财 barks.this 指向：渣男 vs 老狗
普通函数里的 this——看调用姿势
functionshowThis(){console.log(this)}showThis()// 浏览器里 => window，严格模式 => undefinedconstobj={showThis}obj.showThis()// this === objconstfn=obj.showThisfn()// 又变 window 了，渣不渣？类方法里的 this——默认绑定实例，但箭头函数又出来搅局
classCounter{count=0// 方案一：老实用 bindincA(){this.count++}// 方案二：箭头函数，直接锁死 thisincB=()=>{this.count++}}constc=newCounter()const{incA,incB}=cincA()// TypeError: Cannot read property 'count' of undefinedincB()// 正常+1，箭头函数 yyds继承：手动搭积木 vs 全自动全家桶
函数版本：prototype 链自己撸
functionShape(color){this.color=color}Shape.prototype.getColor=function(){returnthis.color}functionCircle(color,radius){Shape.call(this,color)// 借构造函数this.radius=radius}// 手动挂原型链Circle.prototype=Object.create(Shape.prototype)Circle.prototype.constructor=CircleCircle.prototype.getArea=function(){returnMath.PI*this.radius**2}constc=newCircle('red',10)console.log(c.getColor(),c.getArea())类版本：extends 一键生成
classShape{constructor(color){this.color=color}getColor(){returnthis.color}}classCircleextendsShape{constructor(color,radius){super(color)this.radius=radius}getArea(){returnMath.PI*this.radius**2}}底层一样，但类写法少掉一堆样板代码，看着像「精装房」。
实战踩坑合集
坑1：把类当函数提上来用
// utils.jsexportclassLogger{}// main.jsimport{Logger}from'./utils.js'constlog=newLogger()// 如果这行写在 import 之前，直接炸解决：
- 调整顺序，别头铁；
- 实在要「提前」？用函数表达式包一层：
exportfunctiongetLogger(){returnnew(classLogger{log(msg){console.log(msg)}})()}坑2：类里方法想解构出来跑定时器
classClock{tick(){console.log(this.time++)}start(){this.time=0// 错误示范setInterval(this.tick,1000)// tick 里 this 丢失// 正确姿势setInterval(()=>this.tick(),1000)// 或者提前 bindthis.tick=this.tick.bind(this)}}坑3：循环里动态创建方法，结果全部共享一个闭包变量
// 错误示范classMultiButton{constructor(labels){labels.forEach((label,i)=>{this['btn'+i]=function(){console.log(label)// 看似没问题}})}}// 实际上因为块级作用域+let，已经安全；但如果用 var 声明 i，就等着哭到底怎么选？场景对口才最香
- 纯逻辑/工具：函数
// 日期格式化exportfunctionformatDate(date,tpl){/* ... */}- 带状态、需要生命周期、继承结构明显：类
classCanvasChart{constructor(canvas){this.ctx=canvas.getContext('2d')}drawLine(data){/* ... */}destroy(){/* 清理 */}}- React 组件
- 简单展示：函数组件 + Hooks
- 需要错误边界、生命周期、ref 转发等：类组件（或者 Hooks 封装）
- Vue3
<script setup>本质编译后是函数，写起来爽；- 老项目 Options API 就是对象+类思想，别急得全重写，团队能看懂才是硬道理。
性能八卦：谁的内存 footprint 更小？
函数轻量，但每 new 一次都会复制一份闭包变量；
类也轻量，方法挂在原型上共享，但实例属性照样每个对象一份。
现代引擎优化到飞起，别提前焦虑。真卡顿，大概率是你业务逻辑写炸了，而不是声明方式背锅。
工具链小贴士
ESLint 规则
no-use-before-define：对类声明很严格，记得关或调整顺序；class-methods-use-this：类方法若没用到 this 会报警，逼你改成静态方法。
TypeScript 加持
classPerson{private_age:numberconstructor(age:number){this._age=age}getage(){returnthis._age}// 箭头函数写法直接绑 thisgreet=()=>console.log(`I am${this._age}`)}类型安全 + 自动提示，谁用谁知道。
结尾叨叨
函数和类就像厨房里的铁锅和不粘锅：
- 猛火爆炒（高频复用工具）——铁锅（函数）皮实耐造；
- 煎蛋松饼（需要封装、继承、状态）——不粘锅（类）省心。
别拿汤勺煎蛋，也别拿不粘锅砸骨头。搞清楚食材再挑厨具，翻车率立降 99%。
写完收工，我去撸串了，祝各位代码无 bug，线上不炸，回见！
欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。
推荐：DTcode7的博客首页。
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
| 专栏系列（点击解锁） | 学习路线(点击解锁） | 知识定位 |
|---|---|---|
| 《微信小程序相关博客》 | 持续更新中~ | 结合微信官方原生框架、uniapp等小程序框架，记录请求、封装、tabbar、UI组件的学习记录和使用技巧等 |
| 《AIGC相关博客》 | 持续更新中~ | AIGC、AI生产力工具的介绍，例如stable diffusion这种的AI绘画工具安装、使用、技巧等总结 |
| 《HTML网站开发相关》 | 《前端基础入门三大核心之html相关博客》 | 前端基础入门三大核心之html板块的内容，入坑前端或者辅助学习的必看知识 |
| 《前端基础入门三大核心之JS相关博客》 | 前端JS是JavaScript语言在网页开发中的应用，负责实现交互效果和动态内容。它与HTML和CSS并称前端三剑客，共同构建用户界面。 通过操作DOM元素、响应事件、发起网络请求等，JS使页面能够响应用户行为，实现数据动态展示和页面流畅跳转，是现代Web开发的核心 | |
| 《前端基础入门三大核心之CSS相关博客》 | 介绍前端开发中遇到的CSS疑问和各种奇妙的CSS语法，同时收集精美的CSS效果代码，用来丰富你的web网页 | |
| 《canvas绘图相关博客》 | Canvas是HTML5中用于绘制图形的元素，通过JavaScript及其提供的绘图API，开发者可以在网页上绘制出各种复杂的图形、动画和图像效果。Canvas提供了高度的灵活性和控制力，使得前端绘图技术更加丰富和多样化 | |
| 《Vue实战相关博客》 | 持续更新中~ | 详细总结了常用UI库elementUI的使用技巧以及Vue的学习之旅 |
| 《python相关博客》 | 持续更新中~ | Python，简洁易学的编程语言，强大到足以应对各种应用场景，是编程新手的理想选择，也是专业人士的得力工具 |
| 《sql数据库相关博客》 | 持续更新中~ | SQL数据库：高效管理数据的利器，学会SQL，轻松驾驭结构化数据，解锁数据分析与挖掘的无限可能 |
| 《算法系列相关博客》 | 持续更新中~ | 算法与数据结构学习总结，通过JS来编写处理复杂有趣的算法问题，提升你的技术思维 |
| 《IT信息技术相关博客》 | 持续更新中~ | 作为信息化人员所需要掌握的底层技术，涉及软件开发、网络建设、系统维护等领域的知识 |
| 《信息化人员基础技能知识相关博客》 | 无论你是开发、产品、实施、经理，只要是从事信息化相关行业的人员，都应该掌握这些信息化的基础知识，可以不精通但是一定要了解，避免日常工作中贻笑大方 | |
| 《信息化技能面试宝典相关博客》 | 涉及信息化相关工作基础知识和面试技巧，提升自我能力与面试通过率，扩展知识面 | |
| 《前端开发习惯与小技巧相关博客》 | 持续更新中~ | 罗列常用的开发工具使用技巧,如 Vscode快捷键操作、Git、CMD、游览器控制台等 |
| 《photoshop相关博客》 | 持续更新中~ | 基础的PS学习记录，含括PPI与DPI、物理像素dp、逻辑像素dip、矢量图和位图以及帧动画等的学习总结 |
| 日常开发&办公&生产【实用工具】分享相关博客》 | 持续更新中~ | 分享介绍各种开发中、工作中、个人生产以及学习上的工具，丰富阅历，给大家提供处理事情的更多角度，学习了解更多的便利工具，如Fiddler抓包、办公快捷键、虚拟机VMware等工具 |
吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤
非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！
