其实刚接触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会变来变去了