箭头函数
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>
)
}
}