博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ES6新特性5:类(Class)和继承(Extends)
阅读量:5883 次
发布时间:2019-06-19

本文共 2872 字,大约阅读时间需要 9 分钟。

本文摘自,转载请注明出处。

 

一、类(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可以调用这个方法。

 

转载于:https://www.cnblogs.com/lishuxue/p/6097575.html

你可能感兴趣的文章
中了WannaCry病毒的电脑几乎都是Win 7
查看>>
学生机房虚拟化(九)系统操作设计思路
查看>>
nginx报错pread() returned only 0 bytes instead of 4091的分析
查看>>
质数因子
查看>>
Spring源码浅析之事务(四)
查看>>
[转载] Live Writer 配置写 CSDN、BlogBus、cnBlogs、163、sina 博客
查看>>
SQL:连表查询
查看>>
MySQL日期函数、时间函数总结(MySQL 5.X)
查看>>
c语言用尾插法新建链表和输出建好的链表
查看>>
Java基础学习总结(1)——equals方法
查看>>
高性能 Oracle JDBC 编程
查看>>
java 中ResultSet可以获取的数据类型及返回值类型列表
查看>>
ubuntu 13 安装SH程序
查看>>
支付宝升级延时到账功能
查看>>
ghost后只剩下一个盘的数据寻回方法
查看>>
输入输出练习
查看>>
Git commit message和工作流规范
查看>>
java面试。答案源于网上
查看>>
yii中取得CActiveDataProvider的分页信息
查看>>
我的大学
查看>>