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

 更新时间:2017年05月24日 14:08:40   作者:我的老婆是校花  
这篇文章主要介绍了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 // 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程序设计有所帮助。

相关文章

  • js实现搜索提示框效果

    js实现搜索提示框效果

    这篇文章主要为大家详细介绍了js实现搜索提示框效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • javascript 回车键后跳到下一控件

    javascript 回车键后跳到下一控件

    按回车键后跳到下一控件的js代码
    2009-03-03
  • 使用闭包对setTimeout进行简单封装避免出错

    使用闭包对setTimeout进行简单封装避免出错

    写js脚本时经常会用到一些拼写函数的情况,例如调用setTimeout...查了很长时间,为什么就是弹不出对话框呢,使用闭包就可完全避免了
    2013-07-07
  • 有关js的变量作用域和this指针的讨论

    有关js的变量作用域和this指针的讨论

    在ECMAScript中,只有两种执行环境,全局环境和函数环境,每个函数都是一个执行环境,包括嵌套函数。换句话说,其他情况下即使变量声明在一对大括号中,在括号外部仍然可以访问这些变量
    2010-12-12
  • 微信小程序form表单组件示例代码

    微信小程序form表单组件示例代码

    这篇文章主要介绍了微信小程序form表单组件示例代码,文章给大家提到了一些相关属性名和类型及说明,需要的朋友可以参考下
    2018-07-07
  • JavaScript中提前声明变量或函数例子

    JavaScript中提前声明变量或函数例子

    这篇文章主要介绍了JavaScript中提前声明变量或函数的例子,本文介绍的可以说是一种小技巧或者说一种特性,需要的朋友可以参考下
    2014-11-11
  • javascript实现滚动条效果

    javascript实现滚动条效果

    这篇文章主要为大家详细介绍了javascript实现滚动条效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • 详解Webpack4多页应用打包方案

    详解Webpack4多页应用打包方案

    这篇文章主要介绍了详解Webpack4多页应用打包方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • ES6的一些实用高级技巧总结

    ES6的一些实用高级技巧总结

    ES6不仅在语法上有很大的改进,在代码的组织结构上也有重大升级,下面这篇文章主要给大家介绍了关于ES6的一些实用高级技巧的相关资料,需要的朋友可以参考下
    2023-12-12
  • 详解javascript 正则表达式之分组与前瞻匹配

    详解javascript 正则表达式之分组与前瞻匹配

    本文主要讲解javascript 的正则表达式中的分组匹配与前瞻匹配的,需要对正则的有基本认识,本人一直对两种匹配模棱不清,还有不清楚的朋友跟随脚本之家小编一起看看吧
    2018-05-05

最新评论