全网整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:400-708-3566

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

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


# ES6  # 新特性  #   # Class  # 继承  # Extends  # ES6中非常实用的新特性介绍  # JavaScript ES6的新特性使用新方法定义Class  # JavaScript中的Reflect对象详解(ES6新特性)  # 深入浅出ES6新特性之函数默认参数和箭头函数  # 简单谈谈ES6的六个小特性  # ES6新特性之Symbol类型用法分析  # ES6(ECMAScript 6)新特性之模板字符串用法分析  # ES6新特性之变量和字符串用法示例  # ES6新特性之模块Module用法详解  # ES6新特性之字符串的扩展实例分析  # ES6新特性二:Iterator(遍历器)和for-of循环详解  # ES6新特性六:promise对象实例详解  # ES6新特性七:数组的扩充详解  # ES6新特性八:async函数用法实例详解  # 让微信小程序支持ES6中Promise特性的方法详解  # ES6新特性:使用export和import实现模块化详解  # es6新特性之 class 基本用法解析  # ES6 13个新特性总结  # 子类  # 是一个  # 数据结构  # 遍历  # 有一个  # 自己的  # 这是  # 操作技巧  # 是在  # 相关内容  # 是指  # 感兴趣  # 而不  # 这就  # 对其  # 可以通过  # 给大家  # 如果没有  # 不存在  # 可以直接 


相关文章: 非常酷的网站设计制作软件,酷培ai教育官方网站?  测试制作网站有哪些,测试性取向的权威测试或者网站?  潮流网站制作头像软件下载,适合母子的网名有哪些?  如何通过WDCP绑定主域名及创建子域名站点?  ,如何利用word制作宣传手册?  浙江网站制作公司有哪些,浙江栢塑信息技术有限公司定制网站做的怎么样?  如何使用Golang table-driven基准测试_多组数据测量函数效率  香港服务器WordPress建站指南:SEO优化与高效部署策略  制作假网页,招聘网的薪资待遇,会有靠谱的吗?一面试又各种折扣?  建站OpenVZ教程与优化策略:配置指南与性能提升  建站主机核心功能解析:服务器选择与网站搭建流程指南  如何高效利用200m空间完成建站?  个人摄影网站制作流程,摄影爱好者都去什么网站?  如何选择高效便捷的WAP商城建站系统?  深圳网站制作的公司有哪些,dido官方网站?  制作网站的模板软件,网站怎么建设?  如何通过IIS搭建网站并配置访问权限?  Bpmn 2.0的XML文件怎么画流程图  如何用虚拟主机快速搭建网站?详细步骤解析  外贸公司网站制作,外贸网站建设一般有哪些步骤?  XML的“混合内容”是什么 怎么用DTD或XSD定义  重庆市网站制作公司,重庆招聘网站哪个好?  广州商城建站系统开发成本与周期如何控制?  制作证书网站有哪些,全国城建培训中心证书查询官网?  如何自己制作一个网站链接,如何制作一个企业网站,建设网站的基本步骤有哪些?  如何快速查询域名建站关键信息?  广州网站设计制作一条龙,广州巨网网络科技有限公司是干什么的?  北京网页设计制作网站有哪些,继续教育自动播放怎么设置?  惠州网站建设制作推广,惠州市华视达文化传媒有限公司怎么样?  如何在万网自助建站平台快速创建网站?  高性能网站服务器部署指南:稳定运行与安全配置优化方案  如何高效配置香港服务器实现快速建站?  南宁网站建设制作定制,南宁网站建设可以定制吗?  如何快速启动建站代理加盟业务?  实现虚拟支付需哪些建站技术支撑?  实例解析Array和String方法  建站之星如何修改网站生成路径?  如何快速登录WAP自助建站平台?  如何高效完成自助建站业务培训?  小自动建站系统:AI智能生成+拖拽模板,多端适配一键搭建  如何通过FTP服务器快速搭建网站?  常州企业建站如何选择最佳模板?  网站制作壁纸教程视频,电脑壁纸网站?  北京专业网站制作设计师招聘,北京白云观官方网站?  如何快速上传自定义模板至建站之星?  如何基于云服务器快速搭建网站及云盘系统?  如何快速选择适合个人网站的云服务器配置?  如何快速搭建高效WAP手机网站吸引移动用户?  如何快速使用云服务器搭建个人网站?  建站之星IIS配置教程:代码生成技巧与站点搭建指南 

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。