函数声明 vs 类声明：前端仔别再搞混了，一文讲透怎么用才不翻车

函数声明 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 之前，直接炸

解决：

1. 调整顺序，别头铁；
2. 实在要「提前」？用函数表达式包一层：

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，就等着哭

到底怎么选？场景对口才最香

1. 纯逻辑/工具：函数

// 日期格式化exportfunctionformatDate(date,tpl){/* ... */}

2. 带状态、需要生命周期、继承结构明显：类

classCanvasChart{constructor(canvas){this.ctx=canvas.getContext('2d')}drawLine(data){/* ... */}destroy(){/* 清理 */}}

3. React 组件

• 简单展示：函数组件 + Hooks
• 需要错误边界、生命周期、ref 转发等：类组件（或者 Hooks 封装）

4. 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的博客首页。
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！

吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤

非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！