RN学习笔记之箭头函数

作者: AnonyPer | 来源:发表于2017-04-20 19:39 被阅读63次

前言

有一定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]

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

妥善使用箭头函数

相关文章

  • RN学习笔记之箭头函数

    前言 有一定Android基础初学RN,但是有没有过多的接触lambda表达式,在学写的过程中会看到很多使用=>的...

  • TypeScript学习笔记之六函数(重点箭头函数)

    一、使用环境 Mac 电脑 WebStorm TypeScript3.x版本 二、基本函数 2.1、函数声明定义 ...

  • 前端学习之箭头函数

    //可变参数:(x,y,...rest)=>{vari,sum=x+y;for(i=0;i

  • 箭头函数 笔记

    为什么引入箭头函数 this 太难用了 this是call()的第一个参数既然是参数 它是什么就得看(functi...

  • 「JavaScript学习笔记」箭头函数的 this

    ES6中的特殊函数类型:箭头函数,不使用function 默认的this绑定规则。箭头函数的this取决于其外层作...

  • ES6~箭头函数

    什么是箭头函数 单表达式箭头函数 相当于 多表达式箭头函数 箭头函数相当于匿名函数,并且简化了函数定义。箭头函数有...

  • 箭头函数和立即执行函数

    箭头函数 箭头函数和普通函数有什么区别?如果把箭头函数转换为不用箭头函数的形式,如何转换主要是this的差别,箭头...

  • 学习 ES 6 箭头函数

    箭头函数的用法 ES6 允许使用“箭头”(=>)定义函数。 箭头函数的一个用处是简化回调函数。 箭头函数 this...

  • 箭头函数

    箭头函数 箭头函数能让this的指向固定化 分析:1)第一个setInterval()中使用了箭头函数,箭头函数使...

  • TS  笔记this

    this 箭头函数在箭头函数创建的地方获得this;非箭头函数,在调用函数的地方获得this如图

网友评论

    本文标题:RN学习笔记之箭头函数

    本文链接:https://www.haomeiwen.com/subject/gjrlzttx.html