箭头函数

es6更多信息(engish doc)

没有参数

需要在箭头函数前加小括号

var log = ()=>{alert('123')}; log

简单参数

var testArrowFunction = a=>{console.error(a)}; testArrowFunction(123);

多参数

var addTest = (index1, index2) => index1 + index2;  addTest(1,2);
//结果3

返回对象时

返回的对象外面的小括号可以要也可以不要

var getPersonInfo = () => { return ({name: 'zhao', age: '27'})}; getPersonInfo()
//结果: Object {name: "zhao", age: "27"}

函数体内多条语句

需要用大括号{}

var add = (number1, number2) => {if(typeof number1 === 'number' && typeof number2 === 'number'){return number1+number2;} else{return 0;} }; add(1,2)
//result: 3

作为事件的回调函数

需要用大括号{}

document.addEventListener('click', event => {console.log(event.name)});

作为数组的回调函数

需要用大括号{}

[1,2].map( (value, index) => {console.log(value + ',' + index);}) 
//result: 1,0
//result: 2,1

注意事项

箭头函数式一个函数function

var fun = ()=>{}; typeof fun; console.log(fun instanceof Function);
//'function'

arrow function is the instance of Function

console.log(fun instanceof Function);

this不变,回调函数中的this指向了这个对象, 并不指向window顶层对象了, 以后不需要bind(), self, _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()

不能用new

var fun = ()=>{}; new fun()
//Uncaught TypeError: fun is not a constructor(…)

不能用arguments

var fun = (a,b)=>{arguments}; fun(1,2)
//Uncaught ReferenceError: arguments is not defined(…)