箭头函数

一个参数

  1. // 只有一个参数
  2. // f : 函数名称
  3. // v : 函数参数
  4. // v+v : 函数内容
  5. let f=v=> v+v
  6. console.log(f(10)) //20

两个参数

  1. // 两个参数需加小括号
  2. let ff=(v1,v2)=> v1+v2
  3. console.log(ff(10,20))

多个语句

  1. // 有多个语句的时候需要加大括号
  2. // 有多个语句的时候return不能省略
  3. let fff=(a,b,c)=>
  4. {
  5. console.log(a)
  6. return a+b+c
  7. }
  8. console.log(fff(1,1,1))

返回对象

  1. // 返回对象需要在对象的外面加小括号包起来
  2. let p=(name,age)=>({name:name,age:age})
  3. console.log(p('张三',18))

演示数组排序

  1. //给数组里面的值排序
  2. let numbers=[10,2,11,15,22,36]
  3. // let res=numbers.sort(function(a,b){
  4. // return a-b
  5. // })
  6. let res=numbers.sort((a,b)=>a-b)
  7. console.log(res)

注意事项

  • ES6允许使用箭头(=>)定义
  • 不需要参数或者多个参数,需要加上()
  • 函数体有多条语句时,需要使用大括号{},且必须使用return返回
  • 箭头函数返回对象时,需要用小括号包起来
  • 箭头函数使得表达更简洁
  • 箭头函数能够简化回调函数

箭头函数this指向

普通函数中的this

  • this总是代表它的直接调用者(js的this时执行上下文),例如obj.func,那么func中的this就是obj
  • 在默认情况(非严格模式下,未使用‘use strict’),没有找到直接调用者,则this指的是window(约定俗成)
  • 在严格模式下,没有直接调用者的函数中的thisunderfined
  • 使用callapply,bind绑定的this指的是绑定对象

箭头函数中的this

  • 箭头函数没有自己的this,它的this是继承而来的,默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象,定义它的时候,可能环境是window,箭头函数可以方便地让我们在setTimeout,setInterval中方便的使用this
  • 在箭头函数中,this指向的固定化,并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this
  1. // var p={
  2. // name:"张三",
  3. // say(){
  4. // console.log("姓名:"+this.name)
  5. // }
  6. // }
  7. // p.say()
  8. // var p={
  9. // name:"张三",
  10. // say(){
  11. // var a=function(){
  12. // console.log(this,this.name) //找不到name underfind
  13. // }
  14. // a()
  15. // }
  16. // }
  17. // p.say()
  18. //通过定义全局变量
  19. // var p={
  20. // name:"张三",
  21. // say(){
  22. // let self=this //把this赋值给变量量self
  23. // var a=function(){
  24. // console.log(self,self.name) //通过self调用
  25. // }
  26. // a()
  27. // }
  28. // }
  29. // p.say()
  30. //使用bind 绑定
  31. // var p={
  32. // name:"张三",
  33. // say(){
  34. // var a=function(){
  35. // console.log(this.name)
  36. // }.bind(this) //找不到this对象时,通过bind绑定this
  37. // a()
  38. // }
  39. // }
  40. // p.say()
  41. //箭头函数
  42. var p={
  43. name:"张三",
  44. say(){
  45. var a=()=>{
  46. console.log(this.name)
  47. }
  48. a()
  49. }
  50. }
  51. p.say()

箭头函数和普通函数的区别

第一点:写法上:箭头函数相比普通函数写法较为简介

第二点:

- 普通函数this代表直接调用者,例如:person.name的this代表perspn

- 在严格模式下('use strict'),没有找到直接调用者的话,this则为undefined

- 在非严格模式下,没有找到直接调用者的话,this则为window

- 箭头函数this没有明确指向,它的this直接继承父类,如果父类也没有明确指向this那么this代表undefinded

箭头函数注意事项:

- 1.当参数只有一个时可以省略小括号

- 2.当参数有多个/没有时不能省略小括号

- 3.当函数体只有一句话时,可以省略大括号和return

- 4.当函数体有多句话时,不能省略大括号和return

- 5.this没有明确指向,直接继承父类this

ES6箭头函数(箭头函数和普通函数的区别)的更多相关文章

  1. [js高手之路] es6系列教程 - 箭头函数详解

    箭头函数是es6新增的非常有意思的特性,初次写起来,可能会觉得别扭,习惯之后,会发现很精简. 什么是箭头函数? 箭头函数是一种使用箭头( => )定义函数的新语法, 主要有以下特性: 不能通过n ...

  2. 前端项目中常用es6知识总结 -- 箭头函数及this指向、尾调用优化

    项目开发中一些常用的es6知识,主要是为以后分享小程序开发.node+koa项目开发以及vueSSR(vue服务端渲染)做个前置铺垫. 项目开发常用es6介绍 1.块级作用域 let const 2. ...

  3. JS ES6中的箭头函数(Arrow Functions)使用

    转载这篇ES6的箭头函数方便自己查阅. ES6可以使用“箭头”(=>)定义函数,注意是函数,不要使用这种方式定义类(构造器). 一.语法 基础语法 (参数1, 参数2, …, 参数N) => ...

  4. ES6学习之箭头函数

    ES6学习笔记--箭头函数 箭头函数一直在用,最近突然想到重新看一下箭头函数的用法,所以这里做一些总结. 箭头函数长这个样子: let fn = a => a++; // fn 是函数名, a= ...

  5. es6学习笔记--箭头函数

    基本用法 ES6允许使用“箭头”(=>)定义函数. var f = v => v; 上面的箭头函数等同于: var f = function(v) { return v; }; 如果箭头函 ...

  6. 从 ES6 高阶箭头函数理解函数柯里化

    前言:第一次看到多个连续箭头函数是在一个 react 项目中,然鹅确认了下眼神,并不是对的人,因为看得一脸懵逼.em......于是开始各种搜索,先是知道了多个连续箭头函数就是 es6 的多次柯里化的 ...

  7. ES6——函数-箭头函数

    箭头函数: 1.普通函数 function 函数名(){...} 2.箭头函数 注意:  1)如果只有一个返回值,{}return可以省略: let arr = [12,5,8,99,33,14,26 ...

  8. es6中的(=>)箭头函数

    x => x * x 上面的箭头函数相当于: function (x) { return x * x; } 箭头函数相当于匿名函数,并且简化了函数定义. 箭头函数有两种格式,一种像上面的,只包含 ...

  9. ES6中的箭头函数的语法、指向、不定参数

    箭头函数的语法 function fn1() { console.log(1); } let fn2 = () => { console.log(2); } fn1()//1 fn2()//2 ...

  10. ES6中的箭头函数与普通函数的区别

    箭头函数与普通函数的区别 1.语法上更加简洁.清晰 基本语法: // 关于箭头函数的参数 // 如果箭头函数没有参数,直接写一个括号即可 let fun1 = () => { console.l ...

随机推荐

  1. 快速排序的Partition函数

    1 //数组中两个数的交换 2 static void swap(int[] nums, int pos1, int pos2){ 3 int temp = nums[pos1]; 4 nums[po ...

  2. 【Azure 应用服务】App Service For Windows 环境中部署Python站点后,如何继续访问静态资源文件呢(Serving Static Files)?

    问题描述 当创建一个App Service 后,运行时环境和版本选择Windows 和 Python 3.6. 登录Kudu 站点查看,默认的文件有 web.config, hostingstart- ...

  3. MySQL-存储引擎-1

    一.MySQL存储引擎 mysql> create table country( -> country_id smallint unsigned not null auto_increme ...

  4. pip install 报错 TypeError: 'module' object is not callable

    $ pip install filetype Traceback (most recent call last): File "/usr/local/bin/pip2", line ...

  5. 最详尽的 JS 原型与原型链终极详解(1)(2)(3)===转载

    转载===方便以后复习 原文网址:https://www.jianshu.com/p/dee9f8b14771 一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为 ...

  6. adb 常用命令大全(5)- 日志相关

    前言 Android 系统的日志分为两部分 底层的 Linux 内核日志输出到 /proc/kmsg Android 的日志输出到 /dev/log 语法格式 adb logcat [<opti ...

  7. Toast控件

    ------------恢复内容开始------------ 四种常见的App弹窗设计:Toast.Dialog.Actionbar 和 Snackbar 弹窗又称为对话框,是App与用户进行交互的常 ...

  8. Linux原始套接字抓取底层报文

    1.原始套接字使用场景 我们平常所用到的网络编程都是在应用层收发数据,每个程序只能收到发给自己的数据,即每个程序只能收到来自该程序绑定的端口的数据.收到的数据往往只包括应用层数据,原有的头部信息在传递 ...

  9. 转:C#根据条件设置datagridview行的颜色

    1 private void LoadData() 2 { 3 DataTable tblDatas = new DataTable(); 4 tblDatas.Columns.Add("I ...

  10. 硕盟SM-T54| TYPE C转HDMI+VGA+USB3.0+PD3.0四合一多功能扩展坞

    硕盟SM-T54是一款 TYPE C转HDMI+VGA+USB3.0+PD3.0四合一多功能扩展坞,支持四口同时使用,您可以将含有USB 3.1协议的电脑主机,通过此产品连接到具有HDMI或VGA的显 ...