ES6箭头函数

其实刚接触ES6的箭头函数的时候,就觉得很亲切,这不就是C#里的拉姆达表达式(Lambda Expressions)么

这种感觉就好像是,学过Python的同学,看到ES6里Generator函数,心里呵呵一笑。小样,原来是你

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

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

如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,例如

var sum = (num1, num2) => { 
    if(num1>num2) { return num1; } 
    else { return num2; } 
};


但是这里仅仅只是体现了箭头函数节省空间的特点,并没有体现出别的好处来

还记得刚学JavaScript的时候,总被this搞得焦头烂额,一会this是这样,一会是那样,初学者表示很懵逼

比如说:

var obj = {
    txt: "obj",
    fn1: function(){
        console.log(this.txt);
    },
    fn2: function () {
        setTimeout(function () {
            console.log(this.txt);
        }, 500)
    },
    fn3: function () {
        setTimeout(
            () => { console.log(this.txt); }
            , 500)
    }
}
obj.fn1();    //obj.txt
obj.fn2();    //undefined    this.txt在匿名函数里,匿名函数调用,调用者默认为全局对象window,所以this指向window
obj.fn3();    //obj.txt      this.txt在箭头函数里,因为箭头函数没有this。此时的this,是借用的外层的this

var fn1=obj.fn1;
fn1();        //undefined    此时,fn1作为全局函数调用,调用者为全局对象window,所以this指向window

调用箭头函数,只要外层的this是固定的,就可以避免this指向混乱的问题


当然,也可以使用Function.prototype.bind来绑定this,比如说

var obj = {
    txt: "obj.txt",
    fn1: function () {
        console.log(this.txt);
    }
};
obj.fn1();  //obj.txt
var fn1 = obj.fn1;
fn1();      //undefined
var fn1_bind = fn1.bind(obj);
fn1_bind(); //obj.txt

调用bind会返回一个新的函数,这个新函数已经绑定了this,现在就不怕this会变来变去了