JavaScript ES6 箭头函数与普通函数的区别详解【面试必备，值得收藏】

您所在的位置：网站首页 › cad上引箭头和下引箭头的区别是什么 › JavaScript ES6 箭头函数与普通函数的区别详解【面试必备，值得收藏】

JavaScript ES6 箭头函数与普通函数的区别详解【面试必备，值得收藏】

2024-07-12 13:40| 来源: 网络整理| 查看: 265

今天下午在面试的过程中，有一位面试官就问到了这道题目。说实话，如果不是今天问到了这个问题，我还不会去仔细对比分析一下这两个我们整天使用的函数声明方式，我们只有在不断总结中才会不断进步。同时，也非常感谢今天下午给我面试的这位面试官。

目录一、箭头函数基本使用1、关于箭头函数的参数2、关于箭头函数的函数体二、箭头函数与普通函数的区别1、语法不同2、箭头函数都是匿名函数3、箭头函数不能用于构造函数，不能使用 `new`4、箭头函数不会创建自己的 `this`5、`call()/apply()/bind()` 无法改变箭头函数中 `this` 的指向6、箭头函数不绑定 `arguments`，取而代之用`rest`参数`...`解决7、箭头函数没有原型 `prototype`8、其他区别总结

一、箭头函数基本使用

ES6 中允许使用箭头 => 来定义箭头函数，具体语法如下：

// 箭头函数 let fn = (name) => { // 函数体 return `Hello ${name} !`; }; // 等同于普通函数 let fn = function (name) { // 函数体 return `Hello ${name} !`; };

箭头函数要比普通函数在定义方面要简洁：箭头函数省略了 function 关键字，采用 => 来定义函数。函数的参数放在 => 前面的括号中，函数体跟在 => 后的花括号中。

1、关于箭头函数的参数

如果箭头函数没有参数，直接写一个空括号 () 即可。

// 没有参数 let fn = () => { console.log(111); };

如果箭头函数的参数只有一个，也可以省去包裹参数的括号。

// 只有一个参数，可以省去参数括号 let fn = name => { console.log(`Hello ${name} !`) };

如果箭头函数有多个参数，将参数依次用逗号,分隔，包裹在括号中即可。

// 有多个参数，用逗号分隔 let fn = (val1, val2, val3) => { return [val1, val2, val3]; }; 2、关于箭头函数的函数体

如果箭头函数的函数体只有一句代码，就是简单返回某个变量或者返回一个简单的JS表达式，可以省去函数体的大括号{}。

let fn = val => val; // 等同于 let fn = function (val) { return val }; let sum = (num1, num2) => num1 + num2; // 等同于 let sum = function(num1, num2) { return num1 + num2; };

如果箭头函数的函数体只有一句代码，就是返回一个对象，可以像下面这样写：

// 用小括号包裹要返回的对象，不报错 let getTempItem = id => ({ id: id, name: "Temp" }); // 但绝不能这样写，会报错。 // 因为对象的大括号会被解释为函数体的大括号 let getTempItem = id => { id: id, name: "Temp" };

如果箭头函数的函数体只有一条语句并且不需要返回值（最常见是调用一个函数），可以给这条语句前面加一个 void 关键字

let fn = () => void doesNotReturn();

箭头函数最常见的用处就是简化回调函数

// 例子一 // 正常函数写法 [1,2,3].map(function (x) { return x * x; }); // 箭头函数写法 [1,2,3].map(x => x * x); // 例子二 // 正常函数写法 var result = [2, 5, 1, 4, 3].sort(function (a, b) { return a - b; }); // 箭头函数写法 var result = [2, 5, 1, 4, 3].sort((a, b) => a - b); 二、箭头函数与普通函数的区别 1、语法不同

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

// 普通函数 function fn () { // code } // 箭头函数 let fn = () => { // code } 2、箭头函数都是匿名函数

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

// 普通函数 // 具名函数 function fn () { // code } // 匿名函数 let fn = function() { // code } // 箭头函数全都是匿名函数 let fn = () => { // 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); // 18

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

4、箭头函数不会创建自己的 this

箭头函数没有自己的 this，它会捕获自己在定义时所处的外层执行环境的this，并继承这个this值。所以，箭头函数中this的指向在它被定义的时候就已经确定了，之后永远不会改变。

实例一：

代码分析：

函数 fn1 中的 setTimeout 中使用普通函数，2秒后函数执行时，这时函数其实是在全局作用域执行的，所以 this 指向 Window 对象，this.id 就指向全局变量 id，所以输出 'Global'。函数 fn2 中的 setTimeout 中使用是箭头函数，这个箭头函数的 this 在定义时就确定了，它继承了它外层 fn2 的执行环境中的 this，而 fn2 调用时 this 被 call 方法改变到了对象 {id: 'Obj'} 中，所以输出 'Obj'。

实例二：

var id = 'GLOBAL'; var obj = { id: 'OBJ', a: function() { console.log(this.id); }, b: () => { console.log(this.id); } }; obj.a(); // 'OBJ' obj.b(); // 'GLOBAL'

代码分析：

对象 obj 的方法a使用普通函数定义的，普通函数作为对象的方法调用时，this 指向它所属的对象。所以，this.id 就是 obj.id ，所以输出'OBJ'。但是方法b是使用箭头函数定义的，箭头函数中的 this 实际是继承的它定义时所处的全局执行环境中的 this，所以指向 Window 对象，所以输出 'GLOBAL'。（这里要注意，定义对象的大括号{}是无法形成一个单独的执行环境的，它依旧是处于全局执行环境中！） 5、call()/apply()/bind() 无法改变箭头函数中 this 的指向

call()/apply()/bind() 方法可以用来动态修改函数执行时 this 的指向，但由于箭头函数的 this 定义时就已经确定且永远不会改变。所以使用这些方法永远也改变不了箭头函数 this 的指向，虽然这么做代码不会报错。

每一个普通函数调用后都具有一个 arguments 对象，用来存储实际传递的参数。但是箭头函数并没有此对象。

箭头函数与普通函数之间的区别，最重要的还是与 this 相关：

箭头函数不会创建自己的 this，永远指向其上下文的 this；箭头函数继承而来的 this 指向永远不变；普通函数的 this 指向调用它的那个对象。

参考文章： 1、https://blog.csdn.net/qq_42258904/article/details/110083064 2、https://www.jianshu.com/p/2e01b9fd210d

【本文地址】

JavaScript ES6 箭头函数与普通函数的区别详解【面试必备，值得收藏】

JavaScript ES6 箭头函数与普通函数的区别详解【面试必备，值得收藏】

今日新闻

推荐新闻