视频加载失败

ES6箭头函数

1450 字
7 分钟
ES6箭头函数
2026-10-21
前端工程师
Javascript
/
ES6
浏览量加载中...

箭头函数是什么#

认识箭头函数

箭头函数本质上还是函数，只是写法更短、更清晰。

function add(a, b) {
  return a + b;
}
//声明的函数一般不会再赋值，所以一般使用const
const add = (a, b) => {
  return a + b;
};
const add = (a, b) => a + b;

箭头函数结构

(参数) => { 函数体 }

参数部分：0 个参数：()；1 个参数：可以省略括号；多个参数：必须加括号

const f1 = () => console.log("hello");
const f2 = x => x * 2;
const f3 = (x, y) => x + y;

箭头 =>：这是箭头函数的标志，用来连接“参数”和“函数体”。

函数体：多行代码需要大括号；单行表达式可省略 return 和大括号，自动返回结果

如何将一般函数改写成箭头函数

普通函数

function square(x) {
  return x * x;
}
//改成箭头函数
const square = (x) => {
  return x * x;
};
//再简化
const square = x => x * x;

多个参数

function add(a, b) {
  return a + b;
}
//改成箭头函数
const add = (a, b) => a + b;

无参数

function greet() {
  return "hello";
}
//改成箭头函数
const greet = () => "hello";

有多行逻辑

function max(a, b) {
  if (a > b) {
    return a;
  }
  return b;
}
//改成箭头函数
const max = (a, b) => {
  if (a > b) {
    return a;
  }
  return b;
};

单行对象

function add(x, y) {
  return { value: x + y };
}
console.log(add(1, 2));
//常规改写
const add1 = (x, y) => {
  return { value: x + y };
};
console.log(add1(1, 2));
//隐式返回对象，箭头函数想直接返回对象，必须用 (),箭头函数没有 return,默认返回undefined
const add2 = (x, y) => ({
  value: x + y,
});
console.log(add2(1, 2));

数组

const add3 = (x, y) => [x, y];
console.log(add3(1, 2));

提前预习：

this 绑定不同：普通函数：this 取决于调用方式；箭头函数：this 继承外层作用域

箭头函数的注意事项#

没有自己的 this#

const obj = {
  name: "Tom",
  say: () => {
    console.log(this.name);
  }
};


obj.say();//输出：undefined
const obj = {
  name: "Tom",
  say() {
    console.log(this.name);
  }
};

对象方法、类方法不要用箭头函数

不能作为构造函数（不能 new）#

const Person = (name) => {
  this.name = name;
};


const p = new Person("Tom"); // ❌ 报错
function Person(name) {
  this.name = name;
}


const p = new Person("Tom");

构造函数需要this和prototype，但箭头函数没有这两个机制

没有arguments#

const fn = () => {
  console.log(arguments);
};


fn(1, 2, 3);//报错：arguments is not defined
const fn = (...args) => {
  console.log(args);
};


fn(1, 2, 3);

箭头函数必须用 …args 替代 arguments

不能用作 prototype 方法（不适合对象方法）#

function Person(name) {
  this.name = name;
}


Person.prototype.say = () => {
  console.log(this.name);
};
Person.prototype.say = function () {
  console.log(this.name);
};

原型方法必须用普通函数，如果使用箭头函数，this 指向会错误，变成外层。

不能使用 yield（不能当 Generator）#

const gen = *() => {
  yield 1;
};
function* gen() {
  yield 1;
}

语法错误

总结：箭头函数适合“短逻辑 + 回调”，但不适合“对象方法 + 构造函数 + 需要动态 this 的场景”

非箭头函数中的 this 指向#

复习之前的上下文规则：分为全局作用域中this指向和一般函数的this

// 'use strict';
//console.log(this); //window
function add() {
  console.log(this);
}
//只有函数执行才能明确this指向
//this指向和函数在哪里调用哪调用没关系，只和谁调用有关
// add(); //非严格模式下window/global 严格模式下undefined
const calc = {
  add: add,
};
calc.add(); //指向这个对象
const adder = calc.add;
adder(); //非严格模式下window/global 严格模式下undefined
  • 只有函数执行才能明确this指向
  • this指向和函数在哪里调用哪调用没关系，只和谁调用有关

箭头函数中的 this 指向#

箭头函数没有this指向，没有自己的this

const calc = {
  add: () => {
    console.log(this);
  },
};
calc.add(); //window,箭头函数没有自己的this，会往外找this
//练习
global.a = 2; //node环境这么写
var a = 2; //浏览器，var会挂在全局window上，let和const不会
const calc = {
  a: 1,
  add: function () {
    const adder = () => {
      console.log(this.a);
    };
    adder();
  },
};
calc.add(); //箭头函数this，往外找是function 函数，calc.add()this指向calc
const adder = calc.add;
adder();//2，this指向全局window

不适用箭头函数的场景#

在箭头函数的注意事项已经有提到：

  • ❌ 不能作为构造函数（不能 new）
  • ❌ 需要this指向调用对象的时候
  • ❌ 没有 arguments

箭头函数的应用#

  • 按钮点击 → 每秒数字 +1 → 显示在页面
  • 用箭头函数把“多层函数中的 this 丢失问题”变成“稳定继承链”
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>箭头函数的应用</title>
    <style>
      body {
        padding: 50px 0 0 250px;
        font-size: 30px;
      }


      #btn {
        width: 100px;
        height: 100px;
        margin-right: 20px;
        font-size: 30px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <button id="btn">开始</button>
    <span id="result">0</span>


    <script>
      const btn = document.getElementById('btn');
      const result = document.getElementById('result');


      // const timer = {
      //   time: 0,
      //   start: function () {
      //     // this
      //     var that = this;
      //     // var self = this;
      //     btn.addEventListener(
      //       'click',
      //       function () {
      //         setInterval(function () {
      //           console.log(this);
      //           // this.time++;
      //           // result.innerHTML = this.time;
      //           that.time++;
      //           result.innerHTML = that.time;
      //         }, 1000);
      //       },
      //       false
      //     );
      //   }
      // };


      const timer = {
        time: 0,
        start: function () {
          // this
          btn.addEventListener(
            'click',
            () => {
              // this
              setInterval(() => {
                console.log(this);
                this.time++;
                result.innerHTML = this.time;
              }, 1000);
            },
            false
          );
        }
      };


      timer.start();
    </script>
  </body>
</html>

  • this 一共经历了 3 层：

  • 第一层：timer.start()

    timer.start();

    start 是谁调用的？ this = timer

  • 第二层：点击事件函数

    btn.addEventListener('click', () => { ... })

    这里是箭头函数 ，箭头函数不会绑定自己的 this，它继承外层 this，外层是谁？this = timer

  • 第三层：setInterval

    setInterval(() => {
      this.time++;
    }, 1000);

    这里又是箭头函数，外层是 click 箭头函数，click 箭头函数 this = timer，所以最终 this === timer，永远指向 timer

文章分享

如果这篇文章对你有帮助，欢迎分享给更多人！

ES6箭头函数
https://f.youzi177.cn/posts/2026102103es6-jian-tou-han-shu/
作者
小封鸭
发布于
2026-10-21
许可协议
CC BY-NC-SA 4.0
ES6解构赋值
ES6模板字符
相关文章智能推荐
1
ES6类Class
前端工程师本文主要学习ES6类Class
2
ES6异步Promise
前端工程师本文主要学习ES6异步Promise
3
ES6新增方法
前端工程师本文主要学习ES6新增方法
4
ES6剩余参数
前端工程师2026-10-21
5
ES6模板字符
前端工程师2026-10-21
随机文章随机推荐

评论区

分享你的想法，与大家交流讨论

Profile Image of the Author
小封鸭
小楼一夜听春雨，深巷明朝卖杏花
公告
欢迎来到我的博客。这里主要记录前端全栈和日常内容
分类
标签
更多
最新动态
站点统计
文章
60
分类
3
标签
12
总字数
107,734
运行时长
0 天
最后活动
0 天前
站点信息
构建平台
EdgeOne Pages
博客版本
Firefly v6.16.8
文章许可
CC BY-NC-SA 4.0
文章目录
1
箭头函数是什么
2
箭头函数的注意事项
没有自己的 this
不能作为构造函数（不能 new）
没有arguments
不能用作 prototype 方法（不适合对象方法）
不能使用 yield（不能当 Generator）
3
非箭头函数中的 this 指向
4
箭头函数中的 this 指向
5
不适用箭头函数的场景
6
箭头函数的应用