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

一、箭头函数

* 作用: 定义匿名函数
* 基本语法:
  * 没有参数: () => 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