ECMAScript6（ES6）标准之class类的定义、继承及静态方法

93 阅读 0 评论 62 点赞

我是靠谱客的博主外向大地，最近开发中收集的这篇文章主要介绍ECMAScript6（ES6）标准之class类的定义、继承及静态方法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

现有的基于原型的继承的语法。类语法不是向JavaScript引入一个新的面向对象的继承模型。JavaScript类提供了一个更简单和更清晰的语法来创建对象并处理继承。

1、类的声明以及访问

要声明一个类要带有class关键字的类名。

class Classscore {
constructor(name) {
this.name = name;
}
sumScore(score) {
return score.reduce(function(count, value) {
return count + value;
}, 0);
}
}
let pp = new Classscore('张三');
console.log(pp.sumScore([20,40,50,70,80]));//260

2、类表达式
类表达式有两种：匿名类和命名的类。

* 匿名类 */
let Classscore = class {
constructor(name) {
this.name = name;
}
sumScore(score) {
return score.reduce(function(count, value) {
return count + value;
}, 0);
}
};
/* 命名的类 */
let Classscore = class Classscore {
constructor(name) {
this.name = name;
}
sumScore(score) {
return score.reduce(function(count, value) {
return count + value;
}, 0);
}
}

注意事项：
定义类方法前面没有function关键字
方法之间不能加“，”逗号
类没有提升行为
类内部定义方法不可枚举

3、类的方法
类的方法有构造函数，静态方法，原型方法，getter和setter
a.原型方法

class Classscore {
constructor(name) {
this.name = name;
}
sumScore(score) {
return score.reduce(function(count, value) {
return count + value;
}, 0);
}
}
let pp = new Classscore('张三');
console.log(pp.sumScore([20,40,50,70,80]));//260

b.静态方法(static)

class Classscore {
constructor(name) {
this.name = name;
}
sumScore(score) {
return score.reduce(function(count, value) {
return count + value;
}, 0);
}
static ranking(rank){
return rank;
}
}
console.log(Classscore.ranking(22));//22

4.类继承
类之间的继承可以通过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()方法

参考文件：1、https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes
2、http://blog.csdn.net/q1056843325/article/details/53862167
3、https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions