重学es6（上）

一、let\const\var的区别

let只在命令所在的代码块内有效

{
  let a = 10;
  var b = 1;
}
    
a // ReferenceError: a is not defined.
b // 1

不存在变量提升

// var 的情况
console.log(foo); // 输出undefined
var foo = 2;

// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

不允许重复声明

// 报错
function func() {
  let a = 10;
  var a = 1;
}

const实际上保证的是变量指向的内存地址不变，对于简单类型，值就保存在那个内存地址，因此等同于常量；
但是对于复合类型，const指向的内存地址只是保存指向实际数据的指针，只能保证指针是固定的，但是不能保证指针指向的数据结构是不变的，所以声明对象常量需要特别小心这一点

const foo = {};

// 为 foo 添加一个属性，可以成功
foo.prop = 123;
foo.prop // 123

// 将 foo 指向另一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only

二、变量的解构赋值

解构赋值时 ES6 内部使用严格相等运算符（===）判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效。

let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
let [x = 1] = [undefined];
x // 1

let [x = 1] = [null];
x // null，null不严格等于undefined。

三、箭头函数

如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。

// 报错
let getTempItem = id => { id: id, name: "Temp" };

// 不报错
let getTempItem = id => ({ id: id, name: "Temp" });

this的指向问题
箭头函数没有自己的this对象，永远指向外层对象的this（外层对象根据自己所在的作用域来确定this的指向）即使使用call,apply,bind这些方法也不能改变它的this的指向
以下是h5实现的箭头函数

// ES6
function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

// ES5
function foo() {
  var _this = this;

  setTimeout(function () {
    console.log('id:', _this.id);
  }, 100);
}

以下无论return了多少回箭头函数，他总是指向外层对象的this，这里在foo全局声明就是指全局的this，

function foo() {
  return () => {
    return () => {
      return () => {
        console.log('id:', this.id);
      };
    };
  };
}
//这里通过call让foo的this指向了对象{id: 1}
var f = foo.call({id: 1});
//此时在改变哪个输出return的this指向都不会改变箭头函数的this了
var t1 = f.call({id: 2})()(); 
var t2 = f().call({id: 3})(); 
var t3 = f()().call({id: 4}); 

不适合用箭头函数的场景
1、定义对象的方法，且该方法内部包括this

const cat = {
  lives: 9,
  jumps: () => {
    this.lives--;
  }
}

这里因为jumps是箭头函数，所以this的指向不会指向cat，而是定义对象的作用域，此刻是指全局
2.需要动态this的时候，也不应使用箭头函数

var button = document.getElementById('press');
button.addEventListener('click', () => {
  this.classList.toggle('on');
});

上面代码运行时点击按钮会报错，因为 button的监听函数是一个箭头函数，导致里面的this就是全局对象，如果改成普通函数，this就会动态指向被点击的按钮对象