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 相关文章推荐
JavaScript对象、属性、事件手册集合方便查询
Jul 04 Javascript
javascript的document.referrer浏览器支持、失效情况总结
Jul 18 Javascript
jQuery中get和post方法传值测试及注意事项
Aug 08 Javascript
js监听鼠标事件控制textarea输入字符串的个数
Sep 29 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
Nov 17 Javascript
jquery插件格式实例分析
Jun 16 Javascript
详解angular ui-grid之过滤器设置
Jun 07 Javascript
JavaScript截屏功能的实现代码
Jul 28 Javascript
详解10分钟学会vue滚动行为
Sep 21 Javascript
vue相同路由跳转强制刷新该路由组件操作
Aug 05 Javascript
JS前端基于canvas给图片添加水印
Nov 11 Javascript
Javascript中async与await的捕捉错误详解
Mar 03 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
将PHP作为Shell脚本语言使用
2006/10/09 PHP
php实现购物车功能(上)
2020/07/23 PHP
Laravel 修改默认日志文件名称和位置的例子
2019/10/17 PHP
Laravel手动返回错误码示例
2019/10/22 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
Ext.MessageBox工具类简介
2009/12/10 Javascript
editable.js 基于jquery的表格的编辑插件
2011/10/24 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
2014/12/14 Javascript
jQuery中:lt选择器用法实例
2014/12/29 Javascript
理解javascript中的原型和原型链
2015/07/30 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
2015/12/04 Javascript
js传值后台中文出现乱码的解决方法
2016/06/30 Javascript
AngularJS 与百度地图的结合实例
2016/10/20 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
2016/10/28 Javascript
Iscrool下拉刷新功能实现方法(推荐)
2017/06/26 Javascript
详解Vue2 SSR 缓存 Api 数据
2017/11/20 Javascript
详解Chai.js断言库API中文文档
2018/01/31 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
2018/06/29 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
2019/09/11 Javascript
Openlayers绘制聚合标注
2020/09/28 Javascript
jQuery实现容器间的元素拖拽功能
2020/12/01 jQuery
Python开发的单词频率统计工具wordsworth使用方法
2014/06/25 Python
Python计算回文数的方法
2015/03/11 Python
Python使用迭代器打印螺旋矩阵的思路及代码示例
2016/07/02 Python
Python数据操作方法封装类实例
2017/06/23 Python
python生成任意频率正弦波方式
2020/02/25 Python
Tensorflow tensor 数学运算和逻辑运算方式
2020/06/30 Python
python判断一个变量是否已经设置的方法
2020/08/13 Python
css3实现背景图片拉伸效果像桌面壁纸一样
2013/08/19 HTML / CSS
Ejb技术面试题
2015/04/29 面试题
内刊编辑求职自荐书范文
2014/02/19 职场文书
《鲁班和橹板》教学反思
2014/04/27 职场文书
奥林匹克的口号
2014/06/13 职场文书
复兴之路观后感3000字
2015/06/02 职场文书
幸福来敲门观后感
2015/06/04 职场文书
施工安全责任协议书
2016/03/23 职场文书