ECMAScript6（ES6）标准之class类的定义、继承

女爷i 2024-04-18 06:12 84阅读 0赞

早在ES4的时候，草案中就已经出现了class  
不过ES4由于过于激进，和一系列问题  
被大家抵制  
不过大家现在完全不用担心ES6步ES4的后尘

## 类定义 ##

我们先来看看我们一般的原型链方法

> function Person(name, age)\{  
> this.name = name;  
> this.age = age;  
> \}  
> Person.prototype.say = function()\{  
> console.log('my name is ’ + this.name + ‘, ’ + this.age + ’ years old’);  
> \}  
> var person = new Person(‘payen’, ‘19’);  
> person.say(); //my name is payen, 19 years old

下面再看看这个新的一等公民是怎样定义的  
学习过C++或者Java的同学一定会感觉无比亲切  
上面的代码利用ES6的class这样写

> class Person \{  
> constructor(name, age)\{  
> this.name = name;  
> this.age = age;  
> \}  
> say()\{  
> console.log('my name is ’ + this.name + ‘, ’ + this.age + ’ years old’);  
> \}  
> \}  
> var person = new Person(‘payen’, ‘19’);  
> person.say(); //my name is payen, 19 years old

新的class写法让对象原型更加清晰  
更像面向对象的编程语言  
不过还是要注意  
虽然是模仿传统的继承方式  
但是只是语法糖  
仍然使用的是\[\[prototype\]\]的委托机制  
（包括后面谈到的继承，子类不会像其他语言一样拷贝父类的东西）

## 注意事项 ##

1 定义类方法前面没有function关键字  
2 方法之间不能加“，”逗号  
3 类没有提升行为  
4 类内部定义方法不可枚举

函数是有提升行为的  
所以下面的写法没有问题

> foo();  
> function foo()\{  
> …  
> \}

但是类没有  
下面的写法浏览器就会报错

> var person = new Person(); //错误  
> class Person\{  
> …  
> \}

类内部定义的方法是不可枚举的  
我们可以用for-in验证

> for(var prop in person)\{  
> console.log(prop);  
> \}

我们发现传统原型链打印了name，age，say  
但是使用class方法只打印了name，age

## 类表达式 ##

类的另一种定义方式就是类表达式  
上面的代码也可以这样写

> var demo = class \{  
> constructor(name, age)\{  
> this.name = name;  
> this.age = age;  
> \}  
> say()\{  
> console.log('my name is ’ + this.name + ‘, ’ + this.age + ’ years old’);  
> \}  
> \}  
> console.log(demo);  
> var person = new demo(‘payen’, ‘19’); <-- 注意  
> person.say(); //my name is payen, 19 years old

类比于我们的函数表达式  
以及函数的name属性

> function demo()\{\};  
> console.log(demo.name); //demo

> var demo = function()\{\};  
> console.log(demo.name); //demo

> var demo = function foo()\{\};  
> console.log(demo.name); //foo

> class demo\{\}  
> console.log(demo.name); //demo

> let demo = class \{\};  
> console.log(demo.name); //demo

> let demo = class foo\{\};  
> console.log(demo.name); //foo

## 类继承 ##

类之间的继承可以通过extends关键字实现  
先定义一个父类

> class Point\{  
> constructor(x, y)\{  
> this.x = x;  
> this.y = y;  
> \}  
> toString()\{  
> return '点坐标: ’ + this.x + ‘,’ + this.y;  
> \}  
> \}  
> let fp = new Point(12, 34);  
> console.log(fp.toString()); //“点坐标: 12,34”

接着是子类的声明

> class ColoredPoint extends Point\{  
> constructor(x, y, color)\{  
> super(x, y);  
> this.color = color;  
> \}  
> toString()\{  
> return this.color + super.toString();  
> \}  
> \}  
> let sp = new ColoredPoint(56, 78, ‘红色’);  
> console.log(sp.toString()); //“红色点坐标: 56,78”

这个子类的构造函数中出现了一个新的关键字**super**  
没有它的话，就无法继承父类的实例属性  
（子类中有constructor，内部就要有super）  
（子类没有自己的this对象，需要继承父类的this对象再添加东西）  
super指代父类的实例（父类的this对象）  
这里的`super(x,y)`就是调用父类的构造函数  
`super.toString()`就是调用父类toString()方法

ES6的继承，  
实质是先创造父类的实例对象this（必须先调用super）  
然后再用子类的构造函数修改this