学习ES2015 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关键字去声明一个类，然后用大括号包围起来，里面有若干个方法，方法之间不需要用逗号或者分号分隔。

每当我们用new去新建一个实例时，constructor中的代码都会被执行，类似Ruby的initialize。
this访问的内容，是实例属性，或者实例方法。
以下划线开头的方法，比如例子中的_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的方法。

Hegwin.Me

学习ES2015 Part 2

Learn New Features in ES 2015 Part 2

String

Class

Class 语法

类继承