ES6新特性之类(Class)和继承(Extends)相关概念与用法分析


Posted in Javascript onMay 24, 2017

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
May 25 Javascript
某人初学javascript的时候写的学习笔记
Dec 30 Javascript
基于jquery的横向滚动条(滑动条)
Feb 24 Javascript
THREE.JS入门教程(5)你应当知道的十件事
Jan 24 Javascript
js时间比较示例分享(日期比较)
Mar 05 Javascript
JS实现文档加载完成后执行代码
Jul 09 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
Jul 07 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
Jul 30 Javascript
小程序实现单选多选功能
Nov 04 Javascript
js的对象与函数详解
Jan 21 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
Jul 09 Javascript
JS实现简易留言板特效
Dec 23 Javascript
使用jQuery.Pin垂直滚动时固定导航
May 24 #jQuery
bootstrap table使用入门基本用法
May 24 #Javascript
Vue动态实现评分效果
May 24 #Javascript
Angular.js指令学习中一些重要属性的用法教程
May 24 #Javascript
jquery append与appendTo方法比较
May 24 #jQuery
php 修改密码实现代码
May 24 #Javascript
详解VueJs前后端分离跨域问题
May 24 #Javascript
You might like
第七节--类的静态成员
2006/11/16 PHP
ThinkPHP验证码和分页实例教程
2014/08/22 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
浅谈PHP中的那些魔术常量
2020/12/02 PHP
javascript 打印页面代码
2009/03/24 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
2011/09/26 Javascript
js 采用delete实现继承示例代码
2014/05/20 Javascript
Javascript实现飞动广告效果的方法
2015/05/25 Javascript
jquery选择器中的空格与大于号>、加号+与波浪号~的区别介绍
2016/06/24 Javascript
ajax级联菜单实现方法实例分析
2016/11/28 Javascript
JS自动生成动态HTML验证码页面
2017/06/14 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
2017/07/13 Javascript
微信小程序movable view移动图片和双指缩放实例代码
2017/08/08 Javascript
详解Vue.js项目API、Router配置拆分实践
2018/03/16 Javascript
vue 之 .sync 修饰符示例详解
2018/04/21 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
Vue 权限控制的两种方法(路由验证)
2019/08/16 Javascript
[02:57]DOTA2亚洲邀请赛小组赛第四日 赛事回顾
2015/02/02 DOTA
Python中的对象,方法,类,实例,函数用法分析
2015/01/15 Python
Python遍历目录的4种方法实例介绍
2015/04/13 Python
Python中Collections模块的Counter容器类使用教程
2016/05/31 Python
python梯度下降法的简单示例
2018/08/31 Python
Python图像处理实现两幅图像合成一幅图像的方法【测试可用】
2019/01/04 Python
Python删除n行后的其他行方法
2019/01/28 Python
一篇文章了解Python中常见的序列化操作
2019/06/20 Python
对python 调用类属性的方法详解
2019/07/02 Python
django 解决自定义序列化返回处理数据为null的问题
2020/05/20 Python
Python 在局部变量域中执行代码
2020/08/07 Python
python根据字典的键来删除元素的方法
2020/08/16 Python
python speech模块的使用方法
2020/09/09 Python
主持人演讲稿范文
2013/12/28 职场文书
年级组长自我鉴定
2014/02/22 职场文书
美术指导求职信
2014/03/17 职场文书
2014春晚主持词
2014/03/25 职场文书
超强台风观后感
2015/06/09 职场文书
春晚观后感
2015/06/11 职场文书