Es6 语言特性（React全栈读书笔记）

1. const、let关键字

在javascript中，变量默认是全局性的，只存在函数级作用域，声明函数曾经是创造作用域的唯一方法。为了解决块级作用域的问题，ES6中提出了let关键字。

// console.log(a);  a is not defined
let a = 'john';
console.log(a);

同时还引入的概念是const，用来定义一个常亮，一旦定义以后不可以修改，不过如果是引用类型的，那么可以改变它的属性。

// console.log(a);  a is not defined
const a = 'john';
// a = 'lucy'; Assignment to constant variable
// a is read-only
console.log(a);

const a = { name: 'john' };
a.name = 'lucy';
// 可以正常运行
console.log(a);

2. 函数

• 箭头函数
  箭头函数是一种更简单的函数声明方式，可以把它看做是一种语法糖，箭头函数是永远匿名的。

let add = (a,b) => {return a + b};
// 当后面是表达式(expression)的时候，还可以简写为
let add = (a,b) => a + b;
// 等同于
let add = function (a,b) {
  return a + b;
}

// 在回调函数中的应用
let numbers  = [1, 2, 3];
let doubleNumbers = numbers.map((number) => number * 2);
console.log(doubleNumbers);

• this在箭头函数中的使用

let age = 2;
let john = {
  age: 1,
  grow: function () {
    setTimeout(function(){}, 1000);
  }
};
john.grow();
// 此处结果是NaN 原因是let声明的变量是块级作用域，不是全局变量

var age = 2;
let john = {
  age: 1,
  grow: function(){
    setTimeout(function(){
      console.log(++this.age)
    },100);
  }
}
john.grow();
// 此处结果是3

在对象方法的嵌套函数中，this会指向global对象。一般为了解决这种问题，会采用一些hack来解决它。

let john = {
  age: 1,
  grow: function(){
    const self = this;
    setTimeout(function(){
      console.log(++self.age);
    },100)
  }
}
// 或者
let john = {
  age: 1,
  grow: function(){
    setTimeout(function(){
      console.log(this.age)
    }.bind(this),100)
  }
}

使用箭头函数就可以轻松解决这个问题

let kitty = {
  age: 1,
  grow: function(){
    setTimeout(()=>{console.log(this.age)},100);
  }
 }

• 函数默认参数