当前位置:首页 > 日记 > 正文

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

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 // 1arr.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程序设计有所帮助。

相关文章

ajax同步验证单号是否存在的方法

ajax同步验证单号是否存在的方法

同步,方法,验证,单号,是否存在,本文实例讲述了ajax同步验证单号是否存在的方法。分享给大家供大家参考,具体如下://保存前执行的方法,ajax同步调用后台验证包裹单号是否存在function doBeforeSave(){ var packageCode=document.getElementBy…

微信小程序 页面滑动事件的实例详

微信小程序 页面滑动事件的实例详

滑动事件,详解,实例,页面,程序,微信小程序——页面滑动事件w <view id="id" class = "ball" bindtap = "handletap" bindtouchstart = "handletouchtart" bindtouchmove="handletouchmove" bindtouchend="handletouchend" styl…

angular2中router路由跳转navigate

angular2中router路由跳转navigate

刷新页面,路由,跳转,详解,电脑软件,本文主要介绍的是angular2中router路由跳转navigate的使用与刷新页面问题的相关内容,分享出供大家参考学习,下面来看看详细的介绍:一、router.navigate的使用navigate是Router类的一个方法,主要用来跳转路由…

2017微信怎么加qq好友微信加好友的

2017微信怎么加qq好友微信加好友的

步骤,方法,好友,电脑软件,qq,  相对于QQ而言,使用微信的人越来越多,这就会遇到这么一个问题。如何把QQ好友转移到微信上呢,也就是说如何把QQ好友添加为微信好友,下面小编就为大家演示下微信加qq好友的方法,希望能帮到你。2017微信加qq好友的步…

ppt2007恢复文件的方法步骤有哪些

ppt2007恢复文件的方法步骤有哪些

文件,恢复,方法,步骤,有哪些,  在PPT的使用中,我们也难免会因为一时疏忽造成一些意外,比如误删了PPT的内容或者文件,那么如何才能恢复误删的PPT文件呢?以下是小编为您带来的关于ppt2007恢复文件的方法,希望对您有所帮助。ppt2007恢复文件的方…

JavaScript实现的浏览器下载文件的

JavaScript实现的浏览器下载文件的

浏览器,方法,下载文件,电脑软件,JavaScript,废话不多说了,直接给大家贴代码了,具体代码如下所示:function download(src) { var $a = document.createElement('a'); $a.setAttribute("href", src); $a.setAttribute("download"…

ps怎样处理太黑的照片

ps怎样处理太黑的照片

照片,方法,太黑,电脑软件,ps,  当大家拍了一张非常黑的照片时没事,ps可以处理好的。很多刚学习的新手小伙伴可能还不知道,下面是小编带来关于ps怎样处理太黑的照片的内容,希望可以让大家有所收获!ps处理太黑的照片的方法打开一张背景比较暗…

ps怎么设计苏宁的狮子图标?

ps怎么设计苏宁的狮子图标?

图标,狮子,电脑软件,ps,苏宁,ps设计苏宁狮子图标的时候,想要让狮子看上去可爱一点,可以在狮子头部下点功夫,下面我们就来看看ps设计狮子图标的教程,请看下文详细介绍。软件名称:Adobe photoshop 7.01 官方正式简体中文版软件大小:154MB更新时间:20…

在实战中可能碰到的几种ajax请求方

在实战中可能碰到的几种ajax请求方

方法,请求,实战,几种,详解,前言最近在做一个针对单个节点测速的功能页面,测速的逻辑是,测上传速度时,前端传5m数据给server,记录上传和返回数据的时间,测下载速度时,从server下载1m的数据,记录下载和下载成功的时间,上传和下载用的是ajax同步以避免…

AI暂存盘怎么设置? ai主次暂存盘的

AI暂存盘怎么设置? ai主次暂存盘的

设置,方法,主次,电脑软件,AI,AI使用的时候很卡,想要设置一下暂存盘,该怎么设置呢?下面我们就来看看详细的教程。软件名称:Adobe Illustrator CS6 (AI cs6) 精简绿色中文版(32位+64位)软件大小:205MB更新时间:2014-05-111、在桌面上双击AI的快捷图…

PS怎么利用旋转绘制规则花纹图形?

PS怎么利用旋转绘制规则花纹图形?

图形,绘制,花纹,规则,电脑软件,PS,利用CTRL、ALT、SHIFT和 T 这四个键可以绘制出如图中所示的图。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、打开PS操作界面,新建一个文件。在文件里,有一个背景图…

vue 中自定义指令改变data中的值

vue 中自定义指令改变data中的值

自定义指令,电脑软件,vue,data,通过局部自定义指令实现了一个拖动的指令html:<div style="position:absolute;width:100px;height:100px;border:1px solid red" v-drag="{set:set}"></div>script:methods:{set(x,y){this.data.x=x;this…