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