ReactNativeReactNative系列ReactNative

RN学习笔记之箭头函数

2017-04-20  本文已影响63人  AnonyPer

前言

有一定Android基础初学RN,但是有没有过多的接触lambda表达式,在学写的过程中会看到很多使用=>的代码,不清楚=>的意义以及用法对于学习RN有一定的困惑,今天一边学习一边记录一下=>的意义和用法。

如果想更深入了解,可以自行搜索箭头函数和lambda表达式

ES6允许使用“箭头”(=>)定义函数。而JavaScript中,函数其实也是对象,函数名是函数的引用,函数本身就是一个变量,而且JavaScript函数的声明是没有返回值类型这一个说法。

箭头函数实际上是定义了一个临时的函数,箭头函数的箭头=>之前是一个空括号、单个的参数名、或用括号括起的多个参数名,而箭头之后可以是一个表达式(作为函数的返回值),或者是用花括号括起的函数体(需要自行通过return来返回值,否则返回的是undefined)。

关于箭头函数的定义,主要有以下几点:

定义变量

var str = () => '调用我之后直接返回该字符串';

直接定义一个函数-不带参数

var testF= ()=>{

console.log(‘123456789’)

}

上面定位一个函数testF,其作用是打印‘12345789’,在其他地方调用时直接调用testF即可,如下:

ps:如果在函数在class内定义,如

_onPressButton ()  {

console.log("You 点击了 the button!");

}

在调用的时候需要使用使用this._onPressButton,如下:

onLongPress={this._onPressButton}

同时如果使用

onLongPress={this._onPressButton()}

会在程序一加载的时候执行了_onPressButton方法(此处还没有彻底清楚,后续继续研究)

带参数的函数

var testF2= i=>{

console.log(i)

}

var testF2= (i)=>{

console.log(i)

}

var addString= (num1,num2)=>{

return num1+num2;

}

其中是否使用return取决于当前方法是否对外提供执行后的结果还是纯执行一下代码逻辑即可。

定义函数返回对象

上面使用到{},大括号被解释为代码块,有点像java匿名内部类的代码块一样,如果需要定义返回对象,需要使用()进行包括,如下:

var getUserInfo1= ()=>({name:'zhangsan',age:12,class:6})

var getUserInfo2= (id)=>({name:'zhangsan',age:12,class:6,id:id})

var getUserInfo3= (id)=>{

return{name:'zhangsan',age:12,class:6,id:id}

}

以上分别是带参数和不带参数的两种方式(getUserInfo2和getUserInfo2效果相同)。

写上述的定义方法,其实是为了解释像java 使用匿名内部类那样使用箭头函数,使用方法其实就是将第一个等号及其前面的去掉,直接写在需要调用的地方即可,具体如下:

匿名使用

注意事项

1、箭头函数没有他自己的this值,它里面使用过的this继承自外围作用域。

2、因为第一点,所以箭头函数不能作为构造函数

3、不能使用方法中自带的arguments对象(arguments实际上是当前函数的一个内置属性,类似array,会将方法中的参数存起来)

关于箭头函数的其他诸如函数绑定(ES7语法)等,目前不是很了解,暂不过多叙述。

关于this的作用,也了解不甚多,只知道

长期以来,JavaScript语言的this对象一直是一个令人头痛的问题,在对象方法中使用this,必须非常小心。

ps:如果箭头函数中套用箭头函数,会是什么样呢?

结果是:I/ReactNativeJS(26113): [Function]

关于箭头函数觉得比较好的解说,可以参见

妥善使用箭头函数

上一篇 下一篇

猜你喜欢

热点阅读