箭头函数

在说箭头函数之前,不的不提下react native, 在react native中会经常见到这家伙。当我第一次看见这家伙的时候,嚯,这是什么鬼东西,完全不知道这代码要表达什么,后来翻了下资料,终于有所了解了,箭头不但简便,还好用 真的!

1、定义一个箭头函数

var a = b=> c

上面的箭头函数等同于:

var a = function ( b ) {

return c ;

}

如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分,

如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return 语句返回。

var sum = ( num1,num2 ) => { return num1+ num2; }

如果箭头函数只有一行语句,且不需要返回值,可以采用下面的写法,就不用写大括号了。

var f = () => fn () ;

使用注意点

箭头函数有几个使用注意点。

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

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

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

上面三点中,第一点尤其值得注意。 this 对象的指向是可变的,但是在箭头函数中,它是固定的。这一点在很多时候都非常好用。给大家看一个有趣的一段代码:

function foo( ) {

setTimeout ( ( ) => {

console.log ( ' id ': this.id );

}, 100 );

}

var id= 21 ;

foo.call ( { id: 42 } ); //打印 id : 42

上面代码中,setTimeout 的参数是一个箭头函数,这个箭头函数的定义生效是在foo函数生成时,而它的真正执行要等到 100 毫秒以后, 如果是普通的函数,执行是this应该指向全局对象 window, 这时应该输出 21 。但是,箭头函数导致this 总是指向函数定义生效时所在的对象 ,所以 输出的是 42 。 箭头函数可以让 setTimeout 里面的this,绑定定义时所在的作用域,而不是指向运行时所在的作用域。

#

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容