TypeScript两种方法声明差异及相关搜索方向咨询
2026-5-22
TypeScript两种类方法声明的差异详解
刚接触TypeScript时，确实很容易被这两种写法搞懵，我来帮你拆解它们的核心区别：
1. this 绑定的本质差异
- 写法一：
onSave(){ /*method body*/ }
这是原型方法，this的指向完全由调用时的上下文决定。如果把这个方法当作回调传给事件监听、Promise.then这类场景，要是不手动用bind(this)或者其他方式绑定上下文，很容易出现this指向错误（比如变成undefined或者全局对象）。 - 写法二：
public onSave = () => { /*method body*/ }
这是类实例属性赋值箭头函数，箭头函数的this是在定义时就固定绑定的，永远指向当前类的实例。哪怕把它当作回调传递，this也不会跑偏，始终能拿到实例的正确上下文。
2. 内存与原型链的区别
- 原型方法（写法一）：所有类的实例都会共享这一个方法，它存在类的原型（
prototype）上，内存效率更高——不用给每个实例都复制一份方法。 - 箭头函数属性（写法二）：每个类实例都会单独创建一份这个箭头函数，它是实例自身的属性，而非原型上的方法。如果要创建大量实例，这种写法的内存开销会比原型方法大一些。
3. 子类继承的差异
- 原型方法：子类可以轻松用
super.onSave()调用父类的方法，重写逻辑也很灵活。 - 箭头函数属性：因为它是实例属性，子类无法通过
super访问到父类的这个属性，重写起来也不如原型方法直观，一般不建议在父类用这种写法定义需要被继承的方法。
适合搜索的关键词
如果想深入了解这个主题，可以在Google或Stack Overflow上搜索这些关键词：
TypeScript class method vs arrow function propertyTypeScript this binding class methodsPrototype method vs instance arrow function TypeScript
内容的提问来源于stack exchange，提问作者Im Flash
相关产品推荐
相关产品推荐
