当前位置: 首页 > article >正文

【es6复习笔记】箭头函数(5)

简介

本教程将介绍如何在 JavaScript 中使用箭头函数,包括箭头函数的基本语法、特点以及在实际开发中的应用。通过本教程,你将学会如何使用箭头函数来简化代码,提高代码的可读性和简洁性。

箭头函数的基本语法

箭头函数是 ES6 引入的一种新的函数定义方式,它使用箭头 => 来定义函数。箭头函数的基本语法如下:

(param1, param2,..., paramN) => {
  // 函数体
}

参数

箭头函数可以接受任意数量的参数,参数之间使用逗号分隔。如果函数只有一个参数,则可以省略参数列表的括号。例如:

let add = n => {
  return n + n;
}

函数体

箭头函数的函数体可以是一个表达式,也可以是一个代码块。如果函数体是一个表达式,则可以省略花括号和 return 关键字,此时表达式的结果就是函数的返回值。例如:

let pow = n => n * n;

如果函数体是一个代码块,则需要使用花括号将代码块包围起来,并且需要使用 return 关键字来返回函数的结果。例如:

let add = (n, m) => {
  return n + m;
}

箭头函数的特点

1. this 是静态的

箭头函数的 this 是静态的,它始终指向函数声明时所在作用域下的 this 的值。这意味着箭头函数不会创建自己的 this 上下文,而是继承外层函数的 this。例如:

function getName() {
  console.log(this.name);
}

let getName2 = () => {
  console.log(this.name);
}

window.name = '尚硅谷';
const school = {
  name: "ATGUIGU"
}

getName(); // 输出: 尚硅谷
getName2(); // 输出: 尚硅谷

getName.call(school); // 输出: ATGUIGU
getName2.call(school); // 输出: 尚硅谷

2. 不能作为构造函数

箭头函数不能作为构造函数,因此不能使用 new 关键字来实例化对象。例如:

let Person = (name, age) => {
  this.name = name;
  this.age = age;
}

let me = new Person('xiao', 30); // 报错: Person is not a constructor

3. 不能使用 arguments 变量

箭头函数内部没有自己的 arguments 对象,因此不能使用 arguments 变量。如果需要访问函数的参数,可以使用剩余参数 ... 来获取。例如:

let fn = () => {
  console.log(arguments); // 报错: arguments is not defined
}

fn(1, 2, 3);

4. 箭头函数的简写

省略小括号

当箭头函数只有一个参数时,可以省略参数列表的括号。例如:

let add = n => {
  return n + n;
}
省略花括号和 return 关键字

当箭头函数的函数体只有一条语句时,可以省略花括号和 return 关键字,此时语句的执行结果就是函数的返回值。例如:

let pow = n => n * n;

箭头函数的应用场景

箭头函数适用于以下场景:

  1. 回调函数:箭头函数非常适合作为回调函数,特别是在事件处理、定时器和数组方法中。
  2. 简洁的函数表达式:箭头函数可以使代码更加简洁,特别是在函数体很简单的情况下。
  3. 避免 this 指向问题:由于箭头函数的 this 是静态的,因此可以避免在回调函数中使用 this 时出现的指向问题。
let school = {
    name: '尚硅谷',
    getName() {
        let fn5 = () => {
            console.log(this); // 此处的this指向school对象
        }
        fn5();
    }
};
school.getName(); // 输出: 学校对象

箭头函数的注意事项

  1. 箭头函数没有自己的 this:箭头函数的 this 是继承自外层函数的,因此在使用箭头函数时,需要注意 this 的指向。
  2. 箭头函数不能作为构造函数:箭头函数不能使用 new 关键字来实例化对象。
  3. 箭头函数没有 arguments 对象:箭头函数内部没有自己的 arguments 对象,因此不能使用 arguments 变量。
  4. 箭头函数的简写:在使用箭头函数的简写形式时,需要注意函数体的复杂性,避免代码过于晦涩难懂。

总结

箭头函数是 ES6 引入的一种新的函数定义方式,它具有简洁的语法和一些特殊的特性。箭头函数的 this 是静态的,它不会创建自己的 this 上下文,而是继承外层函数的 this。箭头函数不能作为构造函数,也没有自己的 arguments 对象。在实际开发中,箭头函数适用于回调函数、简洁的函数表达式以及避免 this 指向问题的场景。在使用箭头函数时,需要注意其特点和注意事项,以确保代码的正确性和可读性。


http://www.kler.cn/a/450506.html

相关文章:

  • uni-app 统一请求处理 请求拦截器 响应拦截器 请求封装
  • 【CryptoJS库AES加密】
  • Gaea学习笔记总结
  • Linux中的 read() 函数的介绍及使用实例
  • 靜態IP與DHCP的區別和用法
  • [python] 基于matplotlib实现雷达图的绘制
  • Eureka学习笔记-客户端
  • 5G CPE 主控CPU(上位机) 数据转发性能评估--基于5G模组和NEO3开发板评估
  • Dubbo 3.x源码(28)—Dubbo服务发布导出源码(7)应用级服务接口元数据发布
  • Java 网络编程 ②-TCP Socket
  • Electron -- Electron应用主要核心(二)
  • ABAP开发-权限控制
  • Android 蓝牙开发-传输数据
  • AIDD - 探索语言模型在药物分子生成方面的应用
  • iptables交叉编译(Hisiav300平台)
  • [cisco 模拟器] ftp服务器配置
  • 一个简单封装的的nodejs缓存对象
  • 828考研资料汇总
  • C++ QT chip layout tool开发浅思
  • 【python】银行客户流失预测预处理部分,独热编码·标签编码·数据离散化处理·数据筛选·数据分割
  • PTA数据结构题目:链表操作集合
  • 近实时”(NRT)搜索、倒排索引
  • Unity3d 基于UGUI和VideoPlayer 实现一个多功能视频播放器功能(含源码)
  • GitLab 停止为中国区用户提供 GitLab.com 账号服务
  • kong网关使用pre-function插件,改写接口的返回数据
  • 隧道可视化技术开拓智能建设新航道