关灯
开启左侧

ES6——箭头函数

[复制链接]
紫米 发表于 2019-1-18 16:17:16 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 
一、箭头函数
作用: 定义匿名函数
基本语法:
    没有参数: () => console.log('xxxx')
    一个参数: i => i+2
    大于一个参数: (i,j) => i+j

   函数体不用大括号: 默认返回结果
   函数体如果有多个语句, 需要用{}包围,若有需要返回的内容,需要手动返回

使用场景: 多用来定义回调函数

箭头函数的特点:
    1、简洁
    2、箭头函数没有自己的this,箭头函数的this不是调用的时候决定的,而是在定义的时候处在的对象就是它的this
    3、扩展理解: 箭头函数的this看外层的是否有函数,
        如果有,外层函数的this就是内部箭头函数的this,
        如果没有,则this是window
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>06_箭头函数</title>
  6. </head>
  7. <body>
  8.     <button id="btn1">测试箭头函数this_1</button>
  9.     <button id="btn2">测试箭头函数this_2</button>
  10.     <button id="btn3">测试箭头函数this_3</button>
  11.     <button id="btn4">测试箭头函数this_4</button>

  12. <script type="text/javascript">
  13. /* ES5写法:
  14.   let fun = function () {
  15.     console.log('fun()')
  16.   }
  17.   fun()
  18.   */
  19.   /* ES6箭头函数写法:
  20.   let fun = () => console.log('fun()')
  21.   fun()
  22.   */

  23.   // 按左边形参情况分类:
  24.   //1.没有形参
  25.   let fun1 = () => console.log('fun1()')
  26.   fun1()

  27.   //2.只有一个形参的时候:()可以省略
  28.   let fun2 = a => console.log('fun2()')
  29.   fun2()

  30.   //2.两个及两个以上的形参的时候:()不可以省略
  31.   let fun3 = (x,y) => console.log(x + y)
  32.   fun3(10,20)


  33.   // 按右边函数体情况分类:
  34.   //1.函数体只有一条语句或表达式的时候:{}可以省略,会自动返回语句执行的结果或者是表达式的结果(加了{},则需要return返回)
  35.   let fun4 = (x,y) => x+y
  36.   console.log(fun4(100,200))
  37.   /*let fun4 = (x,y) => {
  38.     return x+y
  39.   }
  40.   console.log(fun5(100,200))*/

  41.   //2.函数体有两条及以上的语句或表达式的时候:{}不可以省略
  42.   let fun5 = (x,y) => {
  43.     console.log(x,y)
  44.     return x + y
  45.   }
  46.   console.log(fun5(1000,2000))

  47.   //箭头函数的特点:没有自己的this,箭头函数的this不是调用的时候决定的,而是在定义的时候处在的对象就是它的this
  48.   let btn1 = document.getElementById('btn1')
  49.   let btn2 = document.getElementById('btn2')
  50.   let btn3 = document.getElementById('btn3')
  51.   let btn4 = document.getElementById('btn4')
复制代码


原文:https://blog.csdn.net/edc3001/article/details/85962949


 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

排行榜
关闭

站长推荐上一条 /1 下一条

官方微信

全国服务热线:

400-0708-360

公司地址:国家西部信息安全产业基地(成都市高新区云华路333号)

邮编:610000    Email:2908503813@qq.com

Copyright   ©2015-2016  EOIT论坛Powered by©Discuz!    ( 蜀ICP备11000634号-7 )