Class语法简介
程序员文章站
2022-03-04 10:12:32
一、与 es 5 的对比
es 6 通过 class 来创建类,并实现类的继承。
具体创建方式如下:
// es 5
function man(name, age) {
// 在构造函数中添...
一、与 es 5 的对比
es 6 通过 class 来创建类,并实现类的继承。
具体创建方式如下:
// es 5 function man(name, age) { // 在构造函数中添加每个实例的私有属性 this.name = name; this.age = age; } man.prototype = { // 在原型中添加公共属性及方法 job: 'it', sayname() { console.log(this.name); } } const xh = new man('xiaohong', 18); const xm = new man('xiaoming', 20); xh.sayname(); // xiaohong xm.sayname(); // xiaoming // es 6 class man { constructor(name, age){ this.name = name; this.age = age; } sayname() { console.log(this.name) } } const xh = new man('xiaohong', 18); const xm = new man('xiaoming', 20); xh.sayname(); // xiaohong xm.sayname(); // xiaoming
仔细观察不难发现两者的区别及相似之处:
声明方式。
前者通过创建构造函数 man ,后者则是使用 class 声明一个类 man.
实例私有属性的添加。
前者通过在构造函数中实现,后者则是在 constuctor 方法中实现。不过他们的实现方式相同。
实例公共方法的添加。
前者通过原型 man.ptototype 来添加公共方法及属性,后者通过在 constructor 中直接添加私有方法(当然,也可以通过 prototype 方法),但,不能在 class 内部实例公共的属性,不过可以通过下面这种方法:
// 错误的做法 class a { a = 'fasf'; } // 正确的做法 class a {...} a.prototype.x = x;
调用方式。
他们都是通过 new 方法调用来生成实例对象,但前者可以直接调用 man 方法,后者直接调用(man())则会报错。
其实, es 6 是 es 5 的一个语法糖而已,class 语法也只是将 es 5 的语法进行了封装,在 es 6 中,constructor 方法相当于构造函数,默认返回实例对象。
而定义在 constructor 之外的方法,相当于在类的 prototype 中写方法。
二、this 指向
在 class 中,this 指向实例对象。
但是一旦在外部调用类中的方法,this 的指向就会发生变化,所以,我们通常会在 constructor 中通过 bind 方法来绑定当前 this.
class man { constructot() { this.sayname = this.sayname.bind(this); } sayname() { console.log(this.name) } } class a {...} a.prototype.x = x;