在这篇文章中，我们来学习一下“JS中的箭头函数用法是什么，对比普通函数有何不同”的相关知识，下文有详细的讲解，易于大家学习和理解，有需要的朋友可以借鉴参考，下面就请大家跟着小编的思路一起来学习一下吧。

1. 箭头函数的使用

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

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

1. 普通函数到箭头函数

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

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

关于“JS中的箭头函数用法是什么，对比普通函数有何不同”就介绍到这了，如果大家觉得不错可以参考了解看看，如果想要了解更多，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• vue事件处理的基本实现及知识点有哪些

  Vue 事件处理是每个 Vue 项目的必要方面。它用于捕获用户输入，共享数据以及许多其他创造性方式。在本文中，我将介绍基础知识，并提供一些用于处理事件的代码示例。基本事件处理

• Reduce的使用常见哪些，有什么简单的示例

  目录累加/累积求最大/最小值格式化搜索参数反序列化搜索参数拉平嵌套数组实现 flat数组去重数组计数获取对象多个属性反转字符串不知道大家平常用 Reduce 多不多，反正本瓜用的不多。但实际上，Reduce 能做的，比我们能想到的要多得多，本篇带来 10 个Reduce 常用场景和技巧，一定有你不知道~冲ヾ(◍°∇°◍

• 基于vue如何制作签名组件，代码是什么

  这篇文章主要为大家详细介绍了VUE使用canvas实现签名组件，兼容PC移动端，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• 用JS如何实现文字轮播，用到哪些知识点

  本文实例为大家分享了js实现文字无缝轮播的具体代码，供大家参考，具体内容如下，所用到的知识点：innerHTML 获取或设置某个对象的内容scrollTop 滚动条滚动的距离，此属性是系统内置定义好的offsetHeight 获取或设置对象的高度setInterv...

• React Native本地服务器端口号修改的操作是怎样

  react native修改端口的方法：1、通过npm start命令启动React Native本地服务器的端口号；2、修改server.js文件；3、将默认的8081端口修改为你想要的端口号即可。