JavaScript之Lambda表达式（箭头函数）

箭头函数 是在es6 中添加的一种规范

箭头函数相当于匿名函数， 简化了函数的定义。 语言的发展都是倾向于简洁 对人友好，能减轻工作量的。

为什么要叫箭头函数，因为函数可以用箭头语法（”=>”）定义。ps:不同的语言，表现可能不一样，如Java是用 ->

x => { 
  if (x>0){
   return x*x 
  }else{ 
   return x 
  } 
}

如果参数不是一个，就需要用括号()括起来：

(x, y) => x * x + y * y;// 两个参数


() => 3.1415;// 无参数:


(x, y, ...rest) => {// 可变参数
    var i, sum = x + y;
    for (i=0; i<rest.length; i++) {
        sum += rest[i];
    }
    return sum;
}

如果要返回一个对象，就要注意，如果是单表达式，这么写的话会报错

// 这样写会出错
x => {foo:x} // 这和函数体{}有冲突
// 写成这种
x => {{foo:x}}

箭头函数中this 指向

var obj = {
    birthday: 2021,
    getAge: function () {
        var b = this.birthday; // 2021
        var fn = function () {
            return new Date().getFullYear() - this.birthday; // this指向window或undefined
        };
        return fn();
    }
};

箭头函数修复了this的指向， this 总是指向词法作用域， 也就是外层调用者obj:

var obj = {
    birthday: 2021
    getAge: function () {
        var b = this.birthday; 
        var fn = () => new Date().getFullYear() - this.birthday; // this指向obj对象
        return fn();
    }
};
obj.getAge(); 

注意点

1、 typeof运算符和普通的function一样

var func = a => a
console.log(typeof func); // "function"

2、 instanceof也返回true，表明也是Function的实例

console.log(func instanceof Function); // true

3、箭头函数没有自己的this值，箭头函数中所使用的this来自于函数作用域链。它的取值遵循普通普通变量一样的规则，在函数作用域链中一层一层往上找。

obj = {
    data: ['John Backus', 'John Hopcroft'],
    init: function() {
        document.onclick = ev => {
            alert(this.data) // ['John Backus', 'John Hopcroft']
        }
        // 非箭头函数
        // document.onclick = function(ev) {
        //     alert(this.data) // undefined
        // }
    }
}
obj.init()

4、箭头函数不能用new

var Person = (name, age) => {
    this.name = name
    this.age = age
}
var p = new Person('John', 33) // error

5、 不能使用argument

var func = () => {
    console.log(arguments)
}
func(55) // Uncaught