JavaScript箭头函数入门

箭头函数是es6标准的新函数，箭头函数内部的this是词法作用域，由上下文确定（传统的this指向是运行时动态确定的）

//箭头函数相当于一个匿名函数，简化了函数定义，甚至连{...}和return都能省略
() => 3.14
x => x * x

// x => { foo:x } 会语法报错SyntaxError，因为{...}会被默认识别为函数体定义
// 单表达式的情况下，若要返回一个对象,要用如下写法
x => ({ foo: x })

//箭头函数和传统函数对比
() => {
    var a = 'test'
    console.log('无参数箭头函数' + a)
}
// 以上箭头函数等价于
function (){
    var a = 'test'
    console.log('无参数箭头函数' + a)
}

x => {
    return x + 2
}
// 以上箭头函数等价于
function (x) {
    return x + 2
}

(x, y) => {
    var sum = x + y
    return sum
}
//以上箭头函数等价于
function (x, y){
    var sum = x + y
    return sum
}

// 与传统函数定义的区别
箭头函数看上去像是一种匿名函数的简写，但是箭头函数内部的this是词法作用域，由上下文确定
// 以下未使用箭头函数，会导致匿名函数fn里的this指向为undefined或window
var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = function () {
            return new Date().getFullYear() - this.birth; // this指向window或undefined
        };
        return fn();
    }
};
// 改写为箭头函数后，this指向对象obj
var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
        return fn();
    }
};
obj.getAge(); // 25

// call()或apply()方法:用另一个对象来调用原对象的某方法，由于对象被替换，所以被调用函数的上下文变为新对象的上下文
// 第一个参数是要调用函数的母对象,比如以对象obj的方法来调用函数f()，后面的参数arg1~argN是被传递方法所需的参数序列
f.call(obj)
f.apply(obj)
// 以上的call()或apply()调用的功能类似于(假设对象obj内预先不存在名为m的属性):
obj.m = f
obj.m()
delete obj.m
//以上解释出自《JavaScript权威指南》,由此可理解为call方法就是把该函数作为一个新对象的临时方法执行一遍

// call()或apply()方法无法对this进行绑定,因为this在书写代码时已经由上下文来确定指向
var obj = {
    birth: 1990,
    getAge: function (year) {
        var b = this.birth; // 1990
        var fn = (y) => y - this.birth; // this.birth仍是1990
        return fn.call({birth:2000}, year);
    }
};
obj.getAge(2015); // 25