深入理解javascript的this机制系列第三篇——箭头函数

前面的话

this机制与函数的调用有关，而作用域与函数的定义有关。那么有什么可以将this机制和作用域联系在一起呢？ ES6新增内容——箭头函数。

一、痛点

对于闭包的痛点在于，闭包的this默认绑定到window对象，但又常常需要访问嵌套函数的this，所以常常在嵌套函数中使用var that = this，然后在闭包中使用that代替this，使用作用域查找的方法来找到嵌套函数的this值。

var a = 0;
function foo(){
    function test(){
        console.log(this.a);
    }
    return test;
};
var obj = {
    a : 2,
    foo:foo
}
//obj.foo()执行的结果是返回test函数引用，所以obj.foo()()实际上是在全局环境中执行test函数。
obj.foo()();//0

解决办法

var a = 0;
function foo(){
    var that = this; //这个this指的是obj，因为foo函数是被当做方法调用的。
    function test(){
        console.log(that.a);
    }
    return test;
};
var obj = {
    a : 2,
    foo:foo
}
obj.foo()();//2

ES6给出的解决办法

箭头函数的出现就可以很好的解决这个问题，箭头函数是根据当前的词法作用域而不是this机制顺序来决定this的。所以，箭头函数会继承外层的函数调用的this绑定，而无论this绑定到什么。

通过观察 () => 实际上代表 function()，但是他会改变函数的this

var test = () => {
    console.log(this.a);
}
//形式上等价于
var test = function(){
    console.log(this.a);
}
//实质上等价于
function fn(){
    var that = this;
    var test = function(){
        console.log(that.a);
    }
}

var a = 0;
function foo(){
    var test = () => {
        //通过箭头函数定义时，相当于执行了 that = this的操作，然后在内部使用的是that
        console.log(this.a);
    }
    return test;
};
var obj = {
    a : 2,
    foo:foo
}
obj.foo()();//2

二、基本用法

ES6允许使用“箭头函数”（=>）定义函数，一般称为胖箭头

//这定义了只有一个参数的箭头函数
var f = v => v;
console.log(f(1));//1
//等同于
var f = function(v) {
  return v;
};
console.log(f(1));//1

如果箭头函数不需要参数或者需要多个参数，就要使用一个圆括号代表参数部分。

var f = () => 5;
// 等同于
var f = function () { return 5 };

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

如果箭头函数的代码块多于一条语句，就要使用大括号将他们括起来。

var sum = (num1, num2) => { 
    var restult = num1 + num2;
    return result; 
}

由于大括号被解析为代码块，所以如果箭头函数要返回一个对象，必须在对象外面加上括号。

var getTempItem = id => ({ id: id, name: "Temp" });

三、回调函数

箭头函数最常用于回调函数，如事件处理器或定时器。

function foo() {
    setTimeout(() => {
        console.log( this.a );
    },100);
}
var obj = {
    a: 2
};
foo.call( obj ); // 2

//等价于
function foo() {
    var that = this; 
    setTimeout( function(){
        console.log( that.a );
    }, 100 );
}
var obj = {
    a: 2
};
foo.call( obj ); // 2