欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

【ECMAScript 5_6_7】6、ES6——箭头函数

程序员文章站 2022-06-15 18:49:59
一、箭头函数* 作用: 定义匿名函数* 基本语法: * 没有参数: () => console.log('xxxx') * 一个参数: i => i+2 * 大于一个参数: (i,j) => i+j * 函数体不用大括号: 默认返回结果 * 函数体如果有多个语句, 需要用{}包围,若有需要返回的内容,需要手动返回* 使用场景: 多用来定义回调函数......

一、箭头函数

* 作用: 定义匿名函数
* 基本语法:
  * 没有参数: () => console.log('xxxx')
  * 一个参数: i => i+2
  * 大于一个参数: (i,j) => i+j
  * 函数体不用大括号: 默认返回结果
  * 函数体如果有多个语句, 需要用{}包围,若有需要返回的内容,需要手动返回
* 使用场景: 多用来定义回调函数

* 箭头函数的特点:
    1、简洁
    2、箭头函数没有自己的this,箭头函数的this不是调用的时候决定的,而是在定义的时候处在的对象就是它的this
    3、扩展理解: 箭头函数的this看外层的是否有函数,
        如果有,外层函数的this就是内部箭头函数的this,
        如果没有,则this是window
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>06_箭头函数</title>

</head>
<body>
    <button id="btn1">测试箭头函数this_1</button>
    <button id="btn2">测试箭头函数this_2</button>
    <button id="btn3">测试箭头函数this_3</button>
    <button id="btn4">测试箭头函数this_4</button>

<script type="text/javascript">
  /* ES5写法:
  let fun = function () {
    console.log('fun()')
  }
  fun()
  */
  /* ES6箭头函数写法:
  let fun = () => console.log('fun()')
  fun()
  */

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

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

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


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

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

  //箭头函数的特点:没有自己的this,箭头函数的this不是调用的时候决定的,而是在定义的时候处在的对象就是它的this
  let btn1 = document.getElementById('btn1')
  let btn2 = document.getElementById('btn2')
  let btn3 = document.getElementById('btn3')
  let btn4 = document.getElementById('btn4')
  btn1.onclick = function () {
    alert(this)  // 正常函数内this指向调用他的函数,这里是HTMLButtonElement
  }
  btn2.onclick = () => {
    alert(this)  // 箭头函数this指向处在的对象,这里看外层是否有函数,没有就是window
  }

  let obj = {
    setClick:function () {
      btn3.onclick = () => {
        alert(this)  // 箭头函数的this看外层的是否有函数,这里有,内部箭头函数的this等于外层函数的this指向调用它的obj
      }
    }
  }
  obj.setClick()

  let obj1 = {
    setClick: () => {
      btn4.onclick = () => {
        alert(this)  // 箭头函数的this看外层的是否有函数,这里没有,内部箭头函数的this则指向window
      }
    }
  }
  obj1.setClick()


  function Person() {
    this.obj = {
      showThis : () => {
        console.log(this);  // Person{}
      }
    }
  }
  let fun6 = new Person();
  fun6.obj.showThis();

</script>
</body>
</html>

 

本文地址:https://blog.csdn.net/edc3001/article/details/85962949

相关标签: ECMAScript