本文实例讲述了es6新特性之类(class)和继承(extends)相关概念与用法。分享给大家供大家参考，具体如下：
一、类（class）
1.基本语法
javascript语言的传统方法是通过构造函数，定义并生成新对象。下面是一个例子
我要评论
function point(x, y) {
this.x = x;
this.y = y;
}
point.prototype.tostring = function () {
return '(' + this.x + ', ' + this.y + ')';
};
var p = new point(1, 2);
es6提供了更接近传统语言的写法，引入了class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。基本上，es6的class可以看作只是一个语法糖，它的绝大部分功能，es5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用es6的“类”改写，就是下面这样。
//定义类
class point {
constructor(x, y) { //constructor 构造方法
this.x = x;
this.y = y;
}
tostring() {
return '(' + this.x + ', ' + this.y + ')';
}
}
var p = new point(1, 2);
构造函数的prototype属性，在es6的“类”上面继续存在。事实上，类的所有方法都还是定义在类的prototype属性上面。
2.constructor方法
constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。
二、继承（extends）
class之间可以通过extends关键字实现继承，这比es5的通过修改原型链实现继承，要清晰和方便很多。
class colorpoint extends point {
constructor(x, y, color) {
super(x, y); // 调用父类的constructor(x, y)
this.color = color;
}
tostring() {
return this.color + ' ' + super.tostring(); // 调用父类的tostring()
}
}
上面代码中，constructor方法和tostring方法之中，都出现了super关键字，它在这里表示父类的构造函数，用来新建父类的this对象。
子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。
三、原生构造函数继承
原生构造函数是指语言内置的构造函数，通常用来生成数据结构。ecmascript的原生构造函数大致有下面这些。以前，这些原生构造函数是无法继承的。
boolean()
number()
string()
array()
date()
function()
regexp()
error()
object()
es6允许继承原生构造函数定义子类，因为es6是先新建父类的实例对象this，然后再用子类的构造函数修饰this，使得父类的所有行为都可以继承。下面是一个继承array的例子。
class myarray extends array {
constructor(...args) {
super(...args);
}
}
var arr = new myarray();
arr[0] = 12;
arr.length // 1
arr.length = 0;
arr[0] // undefined
上面代码定义了一个myarray类，继承了array构造函数，因此就可以从myarray生成数组的实例。这意味着，es6可以自定义原生数据结构（比如array、string等）的子类，这是es5无法做到的。
四、class的generator方法
如果某个方法之前加上星号（*），就表示该方法是一个generator函数。
class foo {
constructor(...args) {
this.args = args;
}
* [symbol.iterator]() {
for (let arg of this.args) {
yield arg;
}
}
}
for (let x of new foo('hello', 'world')) {
console.log(x);
}
// hello
// world
上面代码中，foo类的symbol.iterator方法前有一个星号，表示该方法是一个generator函数。symbol.iterator方法返回一个foo类的默认遍历器，for...of循环会自动调用这个遍历器。
五、class的静态方法
类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。
class foo {
static classmethod() {
return 'hello';
}
}
foo.classmethod() // 'hello'
var foo = new foo();
foo.classmethod()
// typeerror: foo.classmethod is not a function
上面代码中，foo类的classmethod方法前有static关键字，表明该方法是一个静态方法，可以直接在foo类上调用（foo.classmethod()），而不是在foo类的实例上调用。如果在实例上调用静态方法，会抛出一个错误，表示不存在该方法。
父类的静态方法，可以被子类继承。
class foo {
static classmethod() {
return 'hello';
}
}
class bar extends foo {
}
bar.classmethod(); // 'hello'
上面代码中，父类foo有一个静态方法，子类bar可以调用这个方法。
更多关于javascript相关内容感兴趣的读者可查看本站专题：《ecmascript6(es6)入门教程》、《javascript数组操作技巧总结》、《javascript字符与字符串操作技巧总结》、《javascript数据结构与算法技巧总结》、《javascript错误与调试技巧总结》及《javascript数学运算用法总结》
希望本文所述对大家javascript程序设计有所帮助。
如对本文有疑问， 点击进行留言回复！！
使用纯前端JavaScript实现Excel导入导出方法过程详解
微信小程序完美解决scroll-view高度自适应问题的方法
网友评论