箭头函数

ES6 允许使用”箭头” => 来定义函数

var f = argument => argument +1

上面的代码等价于

var f = function ( argumenrt ) {

    return argument + 1

}

如果箭头函数不需要参数或需要多个参数, 就使用圆括号代表参数部分
var f = () => 5

如果箭头函数的代码块部分多于一条语句, 就要使用大括号将其括起来, 并使用return语句返回
var sum = (a,b) => {return a+b}

由于大括号被解释为代码块, 所以如果需要箭头函数直接返回一个对象, 必需在对象外面加上括号
var getTemp = (id) => ({ id:id, name:”lizhe”})

箭头函数可以与变量解构一起使用
const getTemp = ({ id, name }) => id + “of ” +name

注意事项

1. 函数体内的this对象就是定义时所在的对象, 而不是使用时所在的对象

2. 不可以当做构造函数. 也就是说, 不可以使用new命令, 否则会抛出一个错误

3. 不可以使用arguments对象, 该对象在函数体内不存在. 如果要用, 可以用rest参数代替 (…values)

4. 不可以使用yield命令, 因此箭头函数不能用作Generator函数

需要特别注意的是第一项, this对象的指向是可变的, 但在箭头函数中它是固定的 ( 使用ajax回调函数时, 可以使用箭头函数来代替 _this )

嵌套的箭头函数

箭头函数内部还可以再使用箭头函数 

箭头函数

箭头函数则会捕获其所在上下文的this值，作为自己的this值，使用箭头函数就不用担心函数内的this不是指向组件内部了。可以按下面这种方式使用箭头函数：

class Test extends React.Component {
    constructor (props) {
        super(props)
        this.state = {message: 'Allo!'}
    }

    handleClick (e) {
        console.log(this.state.message)
    }

    render () {
        return (
            <div>
                <button onClick={ ()=>{ this.handleClick() } }>Say Hello</button>
            </div>
        )
    }
}