ES6的新增语法：箭头函数和this关键字

ES6 中，箭头函数就是函数的一种简写形式，使用括号包裹参数，跟随一个 => { }，紧接着是函数体

由于箭头函数没有名字 所以通常都会将箭头函数赋值给一个变量 通过变量的名字来调用箭头函数

const fn = ( ) => { }

案例1: 简单写一个箭头函数 如果打印出123 证明是正确的

    const fn = () => {
        console.log(123);
    }
    fn();

 案例2: 函数体中 只有一句代码 且代码的执行结果就是返回值 可以省略大括号

计算n1+n2的和

    <script>
        //  es6之前的写法
        function sum(num1, num2) {
            return num1 + num2
        }
        var num = sum(10, 20)
        console.log(num);
        //  使用箭头函数的写法 省略掉大括号
        const sums = (n1, n2) => n1 + n2
        const nums = sums(10, 20);
        console.log(nums); //30
    </script>

箭头函数中的this关键字

函数中 this 总是绑定总是指向对象自身，函数位置定义位置的上下文this 具体可以看看下面几个例子： 

案例1:

function Person() {
  this.age = 0;
 
  setInterval(function growUp() {
    // 在非严格模式下，growUp() 函数的 this 指向 window 对象
    this.age++;
  }, 1000);
}
var person = new Person();

我们经常需要使用一个变量来保存 this，然后在 growUp 函数中引用：

function Person() {
  var self = this;
  self.age = 0;
 
  setInterval(function growUp() {
    self.age++;
  }, 1000);
}

而使用箭头函数可以省却这个麻烦：

function Person(){
  this.age = 0;
 
  setInterval(() => {
    // |this| 指向 person 对象
    this.age++;
  }, 1000);
}
 
var person = new Person();

案例2:  在this.age里弹出的age实际是window下面的 也就是全局变量下的 因为对象object 是不能产生作用域的 say方法实际是被定在了全局作用域下 say方法下面的this指向的是window 所以age=100

<script>
    var age = 100;

    var obj = {
        age: 10,
        say: () => {
            console.log(this.age);
        }
    }
    obj.say(); //100 
</script>