es6 class类与class类中constructor

本文探讨ES6中class关键字的使用,解释其作为语法糖的本质,对比ES5构造函数,阐述class与原型的关系,及constructor在实例化过程中的作用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

序言

在es6 中的class关键字用于声明类,在此之前js一直没有类的概念,本文只要讨论class的与es5中对象的关系以及class中constructor的作用

关键字class

ES6 的class可以看作只是一个语法糖,而类本身可以看作一个构造函数

class A {
	hello() {}
}
typeof A //function

首先验证类型,OK确实为函数,既然是构造函数,当然能够new一个实例,继续

class A {
	hello() {}
}
console.log(new A());

结果如下
在这里插入图片描述
仔细观察,我们在类中声明的hello函数出现在了实例A的原型上,那么得出结论类中声明的函数实际上是绑定在原型上的,故上述代码等价于

class A {
	hello() {}
}
// 等于
function A() {}
A.prototype.hello = function() {};

既然说到原型,那么来看一下类的原型与es5中构造函数的原型是否一致。

class A {
	hello() {}
}
A.prototype.constructor === A // true

与es5一致,同样构造函数原型的constructor指向它本身。

这样看来实例的构造函数是否就与类相等呢?实际并不是,之前的结论说过class只是一个语法糖,里面还有constructor

class中的constructor

constructor方法在这里实质就是构造方法,通过new生成实例会自动调用,如果类型没有定义constructor则会默认添加

class A {
	constructor() {
		this.a = 'a';
		this.b = 'b';
	}
	hello() {}
}
console.log(new A());

在这里插入图片描述
这里不难看出constructor才是实例A的构造函数,写在constructor外部的可以理解为绑定在构造函数的原型上。

相关文档:http://es6.ruanyifeng.com/#docs/class

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值