Hegwin.Me

朱雀桥边野草花,乌衣巷口夕阳斜。

学习ES2015 Part 1

变量声明

Using let

  • 终于不再有var神奇的hoisting了,可以声明块级的变量了 (欢呼)

  • 解决for中变量泄漏的问题

  • 同一block中,let声明的变量可以重新赋值,但再次声明同名的变量时会抛出异常 TypeError

Using const

  • 声明一个read-only的变量,生命时必须赋值

  • 给const变量赋值时,一般会报错,但有的浏览器会静默处理

  • 可以避免那些magic number

关于Functions

参数默认值

function loadProfiles(userNames= []) {
  let namesLength = userNames.length;
  console.log(namesLength);
}

具名参数

我们可以这么写

function setPageThread(name, options={}) {
}

现在可以给options里的参数取名字了

function setPageThread(name, { popular, expires, ativeClass }={}) {
}
  • 增强了参数可读性

  • 避免 boilerplate codes

  • 没有传递的参数为 undefined

Rest Parameters

这个不知道怎么翻译,即把传参时末尾的若干个参数一起吃掉的一个行为,觉得JS在这一点上,越来越像Ruby了。

比如我们这样定义一个方法:

function displayTags(targetElement, ...tags) {
  let target = _findElement(targerElement);
  for (let i in tags) {
    let  tag = tags[i];
    _addToTopic(target, tag);
  }
}

注: `...`是ES2015中新增加的 `spread` 操作, 以后会多次用到。

那么,我们就可以这样调用这个方法。

```js
displayTags(targetDiv, 'ruby', 'meta', 'structure');

使用箭头方法

对于 =>, 有一句比较很重要的话

Arrow functions bind to the scope of where they are defined, not where they are used. (also known as lexical binding)

简单的说就是,哦耶,我终于不用纠结js的this指代的是什么了。

function TagComponent(target, urlPath) {
  this.targetElement = target;
  this.urlPath          = urlPath;  
}

TagComponent.prototype.render = function() {
  getRequest(this.urlPath, (data) => {
    let tags = data.tags;
    displayTags(this.targetElement, ...tags);
  })
}

这其中的 (data) => { } ,这个function是绑定在 lexcical scope上的,如果用传统的 function(data) {}, 在调用 this.targetElement时,会用这个匿名方法自己的scope。

Tags:

Posted on: 2016-08-12

Back