说一说es6中的箭头函数

小金子.

已于 2024-03-25 15:02:40 修改

阅读量769

点赞数 11

文章标签： es6 前端 ecmascript

于 2024-03-25 15:00:18 首次发布

本文链接：https://blog.csdn.net/m0_74114605/article/details/136978937

版权

一、箭头函数

箭头函数表达式的语法比传统的函数表达式更简洁，但在语义上有一些差异，在用法上也有一些限制：

箭头函数没有独立的 this、arguments 和 super 绑定 (en-US)，并且不可被用作方法。
箭头函数不能用作构造函数。使用 new 调用它们会引发 TypeError。它们也无法访问 new.target 关键字。
箭头函数不能在其主体中使用 yield，也不能作为生成器函数创建。

语法：

1、无参数

() => expression （expression表示函数代码块中只有一行代码）
() => {
statements （statements表示函数代码块中有多行代码）
}

2、一个参数：

param => expression
(param) => expression
param => {
statements
}

3、多个参数：

(param1, paramN) => expression
(param1, paramN) => {
statements
}

二、箭头函数和普通函数有什么不同

1.写法不同

箭头函数使用箭头定义，普通函数中没有

// 普通函数
function func(){
  // code
}
// 箭头函数
let func=()=>{
  // code
}

2、箭头函数都是匿名函数

普通函数可以有匿名函数，也可以有具名函数，但是箭头函数都是匿名函数。

// 具名函数
function func(){
  // code
}
 
// 匿名函数
let func=function(){
  // code
}
 
// 箭头函数全都是匿名函数
let func=()=>{
  // code
}

3、箭头函数不能用于构造函数，不能使用new

普通函数可以用于构造函数，以此创建对象实例。

function Person(name,age){
   this.name=name;
   this.age=age;
}
let admin=new Person("恩诺小弦",18);
console.log(admin.name);
console.log(admin.age);

Person用作构造函数，通过它可以创建实例化对象。
但是构造函数不能用作构造函数。

4、箭头函数中this的指向不同

在普通函数中，this总是指向调用它的对象，如果用作构造函数，this指向创建的对象实例。
箭头函数的 this 总是指向最近的外层作用域中的this所指对象，任何方法都改变不了其指向，如 call() , bind() , apply()

例子1、

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button id="a">普通函数函数</button>
  <button id="b">利用箭头函数构造事件处理函数</button>
  <script>
    const a = document.querySelector("#a");
    const b = document.querySelector("#b");
    // 这里有两个点击事件，一个绑定的事件处理函数为普通函数，一个为箭头函数

    a.addEventListener("click", function () {
      console.log(this);
    });

    b.addEventListener("click", () => {
      console.log(this);
    });
  </script>
</body>

</html>

控制台的打印结果中，第一个是用了普通函数、第二个是用了箭头函数

结论：

普通函数构造的事件处理函数的this指向的是事件源对象（button）
箭头函数构造的事件处理函数中的this指向的是其最近外层函数作用域中的this指向的Window对象

例子2、

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    const obj = {
      a() {
        setTimeout(function () {
          console.log(this);
        })
      },
      b() {
        setTimeout(() => {
          console.log(this);
        })
      }
    }
    obj.a(); // 打印出 Window
    obj.b(); // 打印出 当前对象obj
  </script>
</body>

</html>

上例中，setTimeout是由window对象调用的，所以指向window。b函数是由obj调用的，所以指向obj。所以a函数中的this指向window，b函数中的this指向obj对象

问题: 箭头函数中的this是如何查找的了、?

答案: 向外层作用域中, 一层层查找this, 直到有this的定义.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    const obj = {
      aaa() {
        setTimeout(function () {

          setTimeout(function () {
            console.log(this); // window
          })

          setTimeout(() => {
            console.log(this); // window
          })
        })
        setTimeout(() => {
          setTimeout(function () {
            console.log(this); // window
          })
          setTimeout(() => {
            console.log(this); // obj
          })
          console.log(this); //obj
        })
      }
    }
    obj.aaa()
  </script>
</body>

</html>

这个例子掌握了你就会更掌握箭头函数的this了