ES6 &&ES2016 and ES2017（四）

1. From IIFEs to blocks

在ES5中，如果你想要定义一个块级作用域的变量，你需要使用IIFE（Immediately-Invoked Function Expression） 模式:

(function(){
var tmp=... ...
}());
console.log(tmp); //ReferenceError

在ES6中你可以更加简单的使用let或者const以及一个代码块来进行定义：

{
let tmp=... ...
}
console.log(tmp);//ReferenceError

2. From concatenating strings to template literals

从串联字符串到模板字符串 ？？应该是这个意思吧

单行字符串

在ES5中，你可以使用连接字符串将各个值拼接到一块：

var x=1;var y=2
console.log('('+x+','+y+')')

在ES6中你可以使用模板字符串来实现字符串的拼接：

let x=1;let y=2;
console.log(`(${x},${y})`)

多行字符串

var HTML5_SKELETON =
    '\n' +
    '\n' +
    '\n' +
    '    \n' +
    '    \n' +
    '\n' +
    '\n' +
    '\n' +
    '\n';

我们可以看到原生ES5是十分麻烦的，而ES6中的模板字符串同样使用于该种情况：

let HTML5_SKELETON = `
    
    
    
        
        
    
    
    
    `;

3.From function expressions to arrow functions

函数表达式到箭头函数，在ES5中当你使用方法是要注意this的作用域。下边的示例中使用了self来使this的作用域到其需要的位置：

function oldfun{
    var self = this;
    var button = document.getElementById('myButton');
    button.addEventListener('click',function(){
        console.log('click');
        self.handleClick();
  })
}
oldfun.prototype.handleClick=function(){
  ... ...
}

在ES6中，就可以使用不影响this作用域的箭头函数：

function es6fun{
     let button = document.getElementById('myButton');
     button.addEventListener('click', () => {
        console.log('click');
        this.handleClick(); 
    });
}

箭头函数对于仅返回表达式结果的短回调非常有用，在ES5中,使用起来较为冗长：

var arr = [1, 2, 3];
var squares = arr.map(function (x) { return x * x });

而ES6中，箭头函数则更加整洁：

let arr = [1, 2, 3];
let squares = arr.map(x => x * x);

ps:箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象, 定义它的时候,可能环境是window; 箭头函数可以方便地让我们在 setTimeout ,setInterval中方便的使用this

---

作为一个90后，既然早早地抱起了保温杯，泡上了枸杞水，那就认真地过好每一天吧。

---