Hegwin.Me

无边落木萧萧下,不尽长江滚滚来。

学习ES2015 Part 2

Learn New Features in ES 2015 Part 2

String

ES2015中加入了Template String的概念,当我们想要把变量值拼接到字符串中间时,不再需要不停地的使用+了,这也是我觉得可以欢呼的地方。

具体是这样操作的:JS里普通那个的字符串依旧是用单引号或者双引号包围,但是Template String则用反引号包围(感觉在Markdown里打个反引号真要命)。

过去: let fullName = firstName + ' ' + lastName;

现在: let fullName = `${firstName} ${lastName}`

其中我们使用${}将变量包围起来(怎么总觉得包围这个词怪怪的)。

使用这种这种方式,我们也可以构造多行的长字符串:

let userName = 'Same';
let admin = { fullName: 'Hegwin Wang' }

let aLongText = `Hi ${userName}
This is a very
loooooooooog text.

Regards,
${admin.full_name}
`;

Class

Class 语法

ES2015增加了class的语法,不过据我所知,这只是增加了一个类似语法糖的东西,JS实现OO的本质还是和原先一样。上代码,举个例子:

class TagWidget {
  constructor(name,url) {
    this.url = url;
    //...
  }

  render() {
    let link = this._buildLink(this.url)
    // ...
  }

  _buildLink() {
    // ...
  }
}

在这一段代码里,我们用class关键字去声明一个类,然后用大括号包围起来,里面有若干个方法,方法之间不需要用逗号或者分号分隔。

  1. 每当我们用new去新建一个实例时,constructor中的代码都会被执行,类似Ruby的initialize

  2. this访问的内容,是实例属性,或者实例方法。

  3. 以下划线开头的方法,比如例子中的_buildLink,是私有方法。

对于上面声明好的类,我们可以这样调用:

let tagWidget = new TagWidget(name, url);
tagWidget.render();

类继承

假设我们有Widget这么一个类,打算用作所有widget的父类:

class Widget {
  constructor() {
    this.bassCSS = 'widget';
  }

  parse(value) {
    // ...
  }
}

新的语法中,允许使用extends用来指定父类,假设TagWidget现在继承于Widget类:

class TagWidget extends Widget {
  constructor(name, url) {
    super();
    // ...
  }

  parse() {
    let parseName = super.parse(this.name);
    return `Tag: ${parsedName}`;
  }

  render() {
    // ...
  }
}

这其中super可以用来调用父类的方法; 另外TagWidget中parse的返回值,也是使用上面说的Template String的方法。

< Back