箭头函数与普通函数(function)的区别使什么?构造函数(function)可以使用new生成实例，那么箭头函数可以吗？为什么？

最新推荐文章于 2025-01-20 20:57:40 发布
原创 最新推荐文章于 2025-01-20 20:57:40 发布 · 510 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

本文详细探讨了JavaScript中箭头函数与普通函数的主要区别，包括语法简洁性、this的指向以及ARGUMENTS对象的缺失。箭头函数不绑定自己的this，其this值继承自外层作用域，这与普通函数不同，也无法通过call或apply改变。此外，回调函数的概念也被介绍，阐述了其作为函数参数被其他函数调用的特性，并指出在回调函数中，this通常指向全局对象。同时，箭头函数无法用作构造函数，因为它们没有prototype。

区别:

1.箭头函数语法上比普通函数更加简洁（ES中每一种函数都可以使用形参赋默认值和剩余运算符）

2.箭头函数没有自己的this ，只和所处上下文有关系，它里面能出现的this从属于所处上下文（使用call/Apply都无法改变this的指向）

回调函数中的this一般都是WINDOW

回调函数：把一个函数B作为实参转嘀给另外一个函数A，函数A在执行的时候，可以把传递进来的函数B去执行（执行n次，可传值，可改this）

3.箭头函数中没有ARGUMENTS（类数组），只能基于…arg获取传递的参数集合（数组）

箭头函数不能被new执行，因为箭头函数没有this，也没有prototype，重点是没有prototype
【面试】new原理、箭头函数和普通函数区别
wusq的博客
09-13 1441
常考面试题 箭头函数与普通函数的区别 new原理
前端面试题：箭头函数和普通函数的区别？ 箭头函数为什么不能用作构造函数？
薇z的博客
06-29 918
前端面试题：箭头函数和普通函数的区别？ 箭头函数为什么不能用作构造函数？
2020面试准备11----箭头函数与普通函数的区别是什么？构造函数（function）可以使用new生成实例，箭头函数可以吗？
yangling_123的博客
03-14 1021
箭头函数与普通函数的区别是什么？构造函数（function）可以使用new生成实例，箭头函数可以吗？ 1.箭头函数和普通函数的区别 （1）箭头函数语法上比普通函数更加简洁 （2）箭头函数没有自己的this，它里面出现this是继承函数所处上下文中的this,(使用call,apply等任何方式都无法改变this的指向) （3）箭头函数中没有arguments(类数组)，只能基于…ARG获取传递的参...
箭头函数与普通函数(function)的区别是什么？构造函数(function)可以使用new生成实例，那么箭头函数可以吗？为什么？
mafeilong618的博客
08-12 864
箭头函数和普通函数的区别 1.箭头函数语法上比普通函数更加简洁(ES6中每一种函数都可以使用形参赋默认值和剩余运算符) 2.箭头函数没有自己的THIS，它里面的THIS是继承函数所处上下文中的THIS（使用CALL/APPY等任何方式都无法改变THIS的指向） 3.箭头函数中没有ARGUMENTS(类数组)，智能基于。。。ARG获取传递的参数集合（数组） 4.箭头函数不能被NEW执行（因为：箭头函数没有THIS也没有prototype） function fn(x){ return function(y){
箭头函数与普通函数function的区别是什么？构造函数（function）可以使用new生城实例，那么箭头函数可以吗？为什么？
weixin_42709466的博客
04-10 222
箭头函数与普通函数function的区别是什么？构造函数（function）可以使用new生城实例，那么箭头函数可以吗？为什么？
箭头函数和普通函数（function）的区别是什么？
qq_38432842的博客
04-18 563
箭头函数和普通函数的区别是什么 提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录箭头函数和普通函数的区别是什么一、箭头函数和普通函数的区别是什么？二、箭头函数带来的好处 一、箭头函数和普通函数的区别是什么？ 箭头函数没有this，它会从自己的作用域链的上一层继承this，因此无法使用apply/call/bind进行绑定this值； 不绑定arguments，当在箭头函数中调用arguments时同样会向作用域链中查询结果。 不可以使用yield命令，因此箭头函数不能作Ge
ES6中的箭头函数实例详解
08-30
2. **不支持`new`操作**：由于箭头函数没有`constructor`和`prototype`，因此不能作为构造函数使用，尝试用`new`调用箭头函数会导致错误。 3. **不能使用`arguments`对象**：箭头函数没有自己的`arguments`对象，...
ECMAScript6的新特性箭头函数（Arrow Function）详细介绍
12-09
此外，箭头函数不能用作构造函数，即不能使用`new`关键字来实例化。尝试这样做会导致错误，因为箭头函数没有自己的`prototype`属性。同时，由于`this`的静态绑定，`arguments`对象在箭头函数中也是不可用的。这意味...
箭头函数与普通函数相比有哪些优势？使用场景是什么？底层原理是什么？
长风破浪会有时的博客
01-20 487
箭头函数为我们提供了一种书写函数的新方法，尤其适合于那些简短且不需要复杂逻辑的情况。它们的主要优点在于语法简洁、自动绑定this以及与现代 JavaScript 特性更好的兼容性。
Javascript 使用function定义构造函数
10-29
构造函数通常与关键字`new`一起使用来创建对象实例。在使用`new`运算符后，JavaScript会执行以下几个步骤： 1. 创建一个空对象； 2. 将这个新对象的原型设置为构造函数的`prototype`属性所指向的对象； 3. 将构造...
箭头函数为何不能作为构造函数使用？
ll8239的博客
05-22 702
相反，它们会捕获其所在上下文的`this`值作为自己的`this`值。这意味着箭头函数内部的`this`实际上是指向定义该函数时的外部作用域中的`this`，而不是指向调用它的上下文或者新创建的对象实例。当函数被用作构造函数（即使用`new`操作符调用）时，`this`会指向新创建的对象实例。综上所述，由于箭头函数不绑定自己的`this`且没有`prototype`属性，它们不适合作为构造函数来使用。此外，箭头函数也没有`prototype`属性，这是传统函数所具备的另一个特性。
【1】今日知识点：箭头函数为什么不能作为构造函数
qq_64634797的博客
07-31 942
【1】今日知识点：箭头函数为什么不能作为构造函数
箭头函数和普通函数有什么区别？
joker的博客
10-01 569
1.箭头函数是匿名函数箭头函数不能作为构造函数使用不能使用new 2.箭头函数的this,始终指向父级上下文 3.箭头函数不能通过callapplybind改变this指向,但是可以通过这些方法传递参数 4.箭头函数没有原型属性 5.箭头函数没有arguments属性,可以用...展开运算符来接收所有的参数集合 一、箭头函数没有自己的this对象 箭头函数的this是在定义函数时绑定的，不是在执行过程中绑定的，箭头函数内的this就是箭头函数外的那个this var a = '自行车...
箭头函数和普通函数有什么区别
友人C君的博客
05-01 1377
函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象，用callapplybind也不能改变this指向 不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。 不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用rest参数代替。 不可以使用yield命令，因此箭头函数不能用作Generator函数。 箭头函数没有原型对...
bind\call\apply、构造函数、箭头函数中的this指向（二）
小帅的编程笔记
02-11 510
在上一篇文章中搞明白this指向，走遍天下都不怕（一）我们讲了全局环境中的this和对象调用中的this。 今天我们接着来看剩下其他的bind\call\apply、构造函数、箭头函数中的this指向问题。 bind\call\apply改变this指向 一般面试都会很喜欢问bind\call\apply的区别，这个问题也比较基础，总结来说就是它们都是用来改变函数this指向的，call和apply是直接进行函数调用；bind不会立即执行函数，而是返回一个新的函数，这个新函数已经自动绑定了新的this指向。
ES6箭头函数
Start_t的博客
11-30 1049
ES6箭头函数写在前面1.箭头函数语法2.this的指向3.构造函数4.变量提升5.换行 写在前面 缺点： 箭头函数是不能new的，它的设计初衷就跟构造函数不太一样 箭头函数如果要返回一个JSON对象，必须用小括号包起来 var test = ()=>({id:3, val=20}) 对代码的可读性伤害太大 1.箭头函数语法 原有方法的声明函数 //function普通函数 ...
ES6 箭头函数
m0_60703077的博客
02-17 265
简单用法 箭头函数是函数表达式的写法。 之前的函数表达式 var foo = function (a, b) {return a + b}; 使用箭头函数 var foo = (a, b) => {return a + b}; 还可以更简单 var foo = (a, b) => a+ b; 一个参数还可以更省 var foo = a => a; 箭头函数带来什么好处？ 书写更加的方便了，我们可以直接从书写形式上看出来 function foo(a) { retu
ES6之箭头函数
lf811的博客
10-02 666
什么是箭头函数 1.提起箭头函数,我们不免不想,普通函数用的好好的,为什么es6新增了箭头函数?箭头函数的语法是什么?与普通函数对比,有哪些区别?接下来,就让我们一起康康吧 起因:es5中如果函数中嵌套或调用其他的函数,在控制台中就会出现 ...is not a function的报错,这时就是由于this的指向的问题 诞生的原因:箭头函数的出现就是为了解决es5中的this指向的问题 注意:值得一提的是,箭头函数中没有this,它的this来自父级上下文,并且永远指向父级上下文; let ob
深入解析JavaScript中new Function语法
爱蹦跶的全栈大A阿
01-16 3785
Function是JavaScript中非常重要的内置构造函数,可以用来动态创建函数。new Function语法就是其中一种函数创建方式。但是new Function也有一定的缺点需要注意。本文将带您深入解析new Function语法,了解其应用场景以及需要注意的问题。​new Function是动态创建函数的一种方式,但也有缺点。为了更好的代码质量和性能,应该慎用或避免使用。对JavaScript函数和作用域有深入理解,可以编写出更简洁、高效、稳定的代码。​。
JavaScript中箭头函数和普通function函数在使用上有哪些区别？
最新发布
09-10
JavaScript 中箭头函数和普通 `function` 函数在使用方面存在以下区别： ### 语法简洁性 箭头函数的语法相对普通函数更加简洁。箭头函数使用箭头（`=>`）定义，可省略 `function` 关键字和大括号。例如： ```javascript // 普通函数 function add(a, b) { return a + b; } // 箭头函数 const add = (a, b) => a + b; ``` 若函数体只有一个表达式，箭头函数可省略大括号和 `return` 关键字；若只有一个参数，还能省略参数的括号 [^1][^2]。 ### `this` 指向 箭头函数的 `this` 只与代码块上下文有关，普通 `function` 函数的 `this` 与调用者有关。例如： ```javascript // 普通函数 function Person() { this.age = 0; setTimeout(function () { console.log(this.age); // 这里的 this 指向全局对象（在浏览器中是 window） }, 1000); } // 箭头函数 function Person2() { this.age = 0; setTimeout(() => { console.log(this.age); // 这里的 this 指向 Person2 实例 }, 1000); } ``` 在普通函数中，`this` 的值取决于函数的调用方式；而箭头函数没有自己的 `this`，它继承自外层函数的 `this` 值 [^3]。 ### 参数获取 箭头函数不能使用 `arguments` 对象，但可以使用剩余参数语法来获取函数的参数。普通函数声明可以使用 `arguments` 对象来获取函数的参数。例如： ```javascript // 普通函数 function sum() { let total = 0; for (let i = 0; i < arguments.length; i++) { total += arguments[i]; } return total; } // 箭头函数 const sumArrow = (...args) => { let total = 0; for (let i = 0; i < args.length; i++) { total += args[i]; } return total; }; ``` ### 构造函数使用 箭头函数不能使用 `new` 关键字作为构造函数来创建对象，而普通函数可以。例如： ```javascript // 普通函数 function Person(name) { this.name = name; } const person = new Person('John'); // 箭头函数 const PersonArrow = (name) => { this.name = name; }; // 以下代码会报错，因为箭头函数不能作为构造函数 // const personArrow = new PersonArrow('John'); ``` ### 生成器函数使用 箭头函数不能使用 `yield` 关键字，因此不能用作生成器函数。普通函数声明可以使用 `yield` 关键字来定义生成器函数 [^3]。例如： ```javascript // 普通函数生成器 function* generator() { yield 1; yield 2; yield 3; } const gen = generator(); console.log(gen.next().value); // 1 // 箭头函数不能使用 yield，以下代码会报错 // const generatorArrow = () => { // yield 1; // }; ``` ### 函数命名 箭头函数是匿名的，普通 `function` 函数可以有名称 [^3]。 ### 适用场景 在使用 Vue2 时，为避免 `this` 指向混乱，一般使用箭头函数。在非 Vue2 框架和 Vue2 框架下的非 Vue 文件中，使用 `function` 声明函数，因为 `function` 更易读，一看就是函数。匿名函数、回调函数一般用箭头函数。当函数调用出现在函数声明之前时，使用 `function` 声明函数，因为有变量提升机制，运行时可以把函数提升到作用域顶部 [^4]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值