JavaScript 箭头函数的特点、与普通函数的区别

作者:火星飞鸟 时间:2024-05-02 17:30:45 

1. 箭头函数的使用

ES6 中新增了使用箭头=>来定义函数表达式的方法。很多情况下,箭头函数和函数表达式创建的函数并无区别,只有写法上的不同。

本文第二块内容将介绍箭头函数和普通函数功能上的区别。

1. 普通函数到箭头函数

如下所示,定义一个函数,可以使用function关键字,函数接收两个参数ab,返回ab的和。


function getSum(a, b) {
   return a + b;
}

若使用箭头函数来定义这个函数,可以写成如下形式,省略function关键字,用箭头=>定义一个函数。


const getSum = (a, b) => {
   return a + b;
};

2. 省略大括号和 return

若定义的箭头函数,函数体内只有return语句,则可以省略大括号{}return

如下所示,定义的箭头函数,完整写法。


const getSum = (a, b) => {
   return a + b;
};

此箭头函数的函数体内只有return语句,那么,省略了大括号{}return后的精简写法如下:


const getSum = (a, b) => a + b;

3. 省略小括号

若定义的箭头函数,参数只有一个,则可以省略小括号。

如下所示,定义的箭头函数,只有一个参数,完整写法。


const func = (a) => {
   return a + 2;
};

省略了参数旁边的小括号,以下代码等价于上面的代码。


const func = a => a + 2;

注意:若函数没有参数,或者多个参数的情况下,必须要使用括号。

2. 箭头函数与普通函数的区别

大多数情况下,能使用普通函数的地方都可以用箭头函数代替,因为箭头函数更精简。

但在部分情况下,箭头函数与普通函数有着很大的却别。

1. 箭头函数的 this 是父级作用域的 this

如下代码,定义了一个对象obj,对象中有个普通函数定义的方法getThis,打印出此处的this。调用obj.getThis(),会打印出obj对象。这说明方法内部的this指向对象obj


const obj = {
   name: 'Jack',
   getThis() {
       console.log(this);
   },
};
obj.getThis(); // {name: 'Jack', getThis: ƒ}

同样定义一个对象obj,但里面的方法用箭头函数定义,浏览器中调用obj.getThis()却打印出Window,这说明即使调用obj对象身上的方法,方法内部的this也不会指向obj,而是指向定义obj的上下文的this


const obj = {
   name: 'Jack',
   getThis: () => {
       console.log(this);
   },
};
obj.getThis(); // Window

2. call、apply、bind无法改变箭头函数的 this

如下代码,普通函数getName打印this.name,通过call将函数中的this绑定到obj身上,调用getName打印出obj身上的属性name


const obj = {
   name: 'Jack',
};

function getName() {
   console.log(this.name);
}
getName.call(obj); // Jack

若将函数改成箭头函数,那么call将不起作用,无法将函数内部的this绑定到obj,打印出undefined


const obj = {
   name: 'Jack',
};

const getName = () => {
   console.log(this.name);
};
getName.call(obj); // undefined

3. 不可以作为构造函数

箭头函数不可以作为构造函数使用,若将箭头函数作为构造函数,将报错,如下代码所示。


const Person = () => {
   this.name = 'Jack';
};
const usr = new Person(); // Person is not a constructor

4. 不可以使用 arguments

在普通函数内部,可以使用arguments来获取传入的参数,是一个类数组对象:


function func() {
   console.log(arguments);
}
func(1, 2, 3); // [Arguments] { '0': 1, '1': 2, '2': 3 }

而箭头函数就不可以使用arguments对象,获取不到输入的参数。

在浏览器中,若在箭头函数使用arguments对象,将报错。


const func = () => {
   // 浏览器环境
   console.log(arguments); // arguments is not defined
};
func(1, 2, 3);

但是箭头函数可以在参数内,以...args的方式,获取到输入的参数,得到的args是一个数组。


const func = (...args) => {
   console.log(args); // [ 1, 2, 3 ]
};
func(1, 2, 3);

5. 箭头函数不支持 new.target

普通函数定义的构造函数内部,支持使用new.target,返回构造实例的构造函数。


function Person() {
   this.name = 'Jack';
   console.log(new.target);
}
// 指向构造函数
new Person(); // [Function: Person]

而在箭头函数中,不支持使用new.target。在浏览器环境中,箭头函数使用new.target将报错:new.target expression is not allowed here


const Person=() =>{
   this.name = 'Jack';
   console.log(new.target);
}
// 浏览器环境
new Person(); // new.target expression is not allowed here

本文参考:

《JavaScript高级程序设计(第4版)》

来源:https://blog.csdn.net/Jack_lzx/article/details/121054784

标签:js,箭头函数,普通函数
0
投稿

猜你喜欢

  • vue项目移动端实现ip输入框问题

    2024-05-09 09:20:58
  • PHP实现登录注册之BootStrap表单功能

    2024-05-11 09:07:25
  • 解读Opencv中Filter2D函数的补全方式

    2022-06-16 23:11:15
  • Python中工作日类库Busines Holiday的介绍与使用

    2023-01-30 23:59:04
  • 关于python通过新建环境安装tfx的问题

    2022-06-28 19:47:21
  • python爬虫之遍历单个域名

    2021-06-28 07:45:34
  • 在sql Server自定义一个用户定义星期函数

    2012-02-12 15:47:28
  • vue实现input输入模糊查询的三种方式

    2024-05-08 10:42:12
  • Flask框架实现的前端RSA加密与后端Python解密功能详解

    2021-07-26 16:28:13
  • 详解利用上下文管理器扩展Python计时器

    2023-11-07 09:33:48
  • Python3 venv搭建轻量级虚拟环境的步骤(图文)

    2022-11-26 08:47:16
  • Go缓冲channel和非缓冲channel的区别说明

    2024-05-22 10:11:01
  • python 在屏幕上逐字显示一行字的实例

    2023-09-22 22:55:29
  • sql server中批量插入与更新两种解决方案分享(存储过程)

    2012-05-22 18:29:59
  • OpenCV半小时掌握基本操作之图像梯度

    2022-05-29 00:48:03
  • Django+Nginx+uWSGI 定时任务的实现方法

    2022-11-14 16:02:57
  • Python 获取windows桌面路径的5种方法小结

    2023-04-01 09:06:47
  • SQLSERVER数据库中的5173错误解决方法

    2024-01-23 16:25:58
  • python实现图片转字符画

    2021-02-13 22:58:33
  • python中xrange和range的区别

    2023-03-14 05:54:35
  • asp之家 网络编程 m.aspxhome.com