开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

JavaScript普通函数与箭头函数-如何设置新范围

JavaScript普通函数与箭头函数是两种不同的函数定义方式，它们在设置新范围（设置函数内部的this值）方面有所不同。

普通函数是使用function关键字定义的函数，它具有自己的this值，该this值在函数被调用时根据调用方式动态确定。普通函数可以使用call()、apply()、bind()等方法来显式地设置函数内部的this值。

箭头函数是使用箭头（=>）语法定义的函数，它没有自己的this值，而是继承了外层作用域的this值。箭头函数的this值在定义时确定，不会被调用方式改变。因此，箭头函数无法使用call()、apply()、bind()等方法来改变this值。

在设置新范围方面，普通函数和箭头函数的区别主要体现在以下几个方面：

this值的指向：
- 普通函数的this值在函数被调用时动态确定，可以根据调用方式的不同指向不同的对象。
- 箭头函数的this值继承自外层作用域，指向定义时所在的上下文对象。

arguments对象：
- 普通函数内部可以使用arguments对象访问所有传入的参数。
- 箭头函数没有自己的arguments对象，它会继承外层作用域的arguments对象。
构造函数：
- 普通函数可以作为构造函数使用，通过new关键字创建实例对象。
- 箭头函数不能用作构造函数，不能通过new关键字创建实例对象。

总结起来，普通函数适用于需要动态确定this值、使用arguments对象或作为构造函数的场景；而箭头函数适用于需要继承外层作用域的this值、不需要使用arguments对象或不能作为构造函数的场景。

腾讯云相关产品和产品介绍链接地址：

云函数（Serverless Cloud Function）：https://cloud.tencent.com/product/scf
云开发（Tencent CloudBase）：https://cloud.tencent.com/product/tcb
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版（TencentDB for MySQL）：https://cloud.tencent.com/product/cdb_mysql
云存储（COS）：https://cloud.tencent.com/product/cos
人工智能（AI）：https://cloud.tencent.com/product/ai
物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
区块链（Blockchain）：https://cloud.tencent.com/product/baas
元宇宙（Metaverse）：https://cloud.tencent.com/product/metaverse

相关搜索:<select><option> (普通JavaScript)事件侦听器中的箭头函数 JavaScript excel API中的范围函数getCellProperties是如何工作的？如何为JavaScript箭头函数创建记录器？如何使用JavaScript设置函数参数？如何使类与带范围的std::span构造函数兼容？如何在chrome中将普通方法转换为箭头函数？如何在Django应用程序中使用普通Javascript调用Python函数如何在eventlister javascript中设置延迟函数？如何在javascript中获取箭头和curry函数的输出如何在javascript中设置回调函数

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

JavaScript的箭头函数与普通函数区别？

一、什么是箭头函数？...箭头函数用更简洁的方式，来完成普通函数的功能，但是不具备普通函数拥有的属性： this 、 arguments 、 super 、 new.target，有两种表达形式： 1、(...args...arguments正确使用： function foo(n) { // 隐式绑定 foo函数的参数与 arguments对象. // arguments[0] 表示传给foo函数的第一个参数...普通函数的this 等于 undefined，无法调用；对象方法的this，指向对象本身。箭头函数，不会定义自己的this，它只会继承自己上一层作用域的this。...的箭头函数与普通函数区别？

5723 0

普通函数与箭头函数

一、区别箭头函数是匿名函数，不能作为构造函数，不能使用new let FunConstructor = () => { console.log('lll'); } let fc = new...FunConstructor(); 箭头函数不绑定arguments，取而代之用rest参数...解决 function A(a){ console.log(arguments); } A(1,2,3,4,5,8...is not defined let C = (...c) => { console.log(c); } C(3,82,32,11323); // [3, 82, 32, 11323] 箭头函数不绑定...Generator函数,不能使用yield关键字二、JS this指向问题普通函数的this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象...箭头函数比较特殊没有调用者，不存在this.箭头函数()的概念，但是它内部可以有this，而内部的this由上下文决定例子1： var o = { user:"追梦子", fn:function

9614 0

探索 JavaScript 函数：普通函数、箭头函数和生成函数

JavaScript的动态领域中，函数是基本构建块，赋予开发者高效组织和执行代码的能力。理解普通函数、箭头函数以及相对较新的生成器函数之间的微妙差异，对于编写整洁、简明和高效的代码至关重要。...本文将深入探讨每种函数类型，探索它们的语法、行为和使用场景。普通函数：普通函数，也被称为传统函数或函数声明，在 JavaScript 自早期以来就一直是重要组成部分。...普通函数的使用广泛且适用于各种场景，使其成为 JavaScript 开发的重要组成部分。箭头函数：箭头函数是在 ECMAScript 6（ES6）中引入的，与普通函数相比，它们提供了更简洁的语法。...箭头函数的语法如下：const add = (a, b) => a + b;箭头函数的主要特点包括：无 function 关键字：箭头函数使用更简洁的语法，省略了需要 function 关键字的部分。...生成器函数适用于处理异步操作、惰性求值以及需要高效生成值序列的场景。结论：总之，理解普通函数、箭头函数和生成器函数之间的差异对于编写有效的 JavaScript 代码至关重要。

1120 0

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

说到箭头函数和普通函数的区别，大家都一定会觉得这是一道高频面试题，但许多人其实对它们的理解还不够到位，今天我就来帮大家打造一个更清晰的认知。...01 【从定义方式来看】【普通函数】定义普通函数的方式通常有函数声明和函数表达式：【箭头函数】箭头函数是普通函数的语法糖（使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会），书写要更加简洁...【箭头函数】无论是严格模式还是非严格模式下，this始终指向window：箭头函数没有自己的执行上下文，this指向是在定义函数时就被确定下来的，箭头函数中的this，永远指向外层作用域中最接近自己的普通函数的...箭头函数会忽略任何形式的this指向的改变（bind、call、apply等方式无法改变箭头函数的this指向），箭头函数的this指向是静态的： 03 【从构造函数来看】【普通函数】通过new关键字调用普通函数...（作为构造函数），this指向被创建出来的对象实例：【箭头函数】箭头函数不能当做构造函数来使用： 04 【从arguments对象来看】【普通函数】在普通函数中，arguments是类数组对象

7032 0

箭头函数与普通函数的区别？

箭头函数（Arrow Functions）和普通函数（Regular Functions）在语法和功能上有一些区别。...以下是箭头函数和普通函数的主要区别： 1：语法简洁性：箭头函数具有更简洁的语法形式，可以帮助减少代码量。它使用箭头（=>）来定义函数，省略了function关键字和大括号。...// 普通函数 function sum(a, b) { return a + b; } // 箭头函数 const sum = (a, b) => a + b; 2：this绑定：箭头函数没有自己的...这意味着在箭头函数内部，this的值与外部的上下文保持一致，并且无法通过调用方式来改变this的指向。...：普通函数可以用作构造函数来创建新的对象实例，而箭头函数不能使用new关键字来创建对象。

1542 0

Javascript中普通函数和箭头函数的区别

Javascript中普通函数和箭头函数的区别 1.在es6中运行使用“（=>）”来定义函数，比如： var fn = p=> p;//最精简模式 //等价 var fn = function (p)...var fn2 = (p1,p2)=>{ let p3 = p1+p2; return p3; } 2.箭头函数没有this对象，他会找到上层调用者作为this对象，直至window。...还有，由于箭头函数没有自己的this，所以call，apply，bing等方法都不能改变this指向。...4.箭头函数没有arguments，如果想要获取全部参数，就使用rest参数。...sum+=val; } return sum; } //普通函数,使用arguments function add1() { var sum=0; for(var

9681 0

箭头函数与普通函数的区别详解

箭头函数和普通函数的区别一.外形不同：箭头函数使用箭头定义，普通函数中没有代码实例如下： // 普通函数 function func(){ // code } // 箭头函数 let func...=()=>{ // code } 二.箭头函数都是匿名函数普通函数可以有匿名函数，也可以有具体名函数，但是箭头函数都是匿名函数。...let func=()=>{ // code } 三.箭头函数不能用于构造函数，不能使用new 普通函数可以用于构造函数，以此创建对象实例。...但是构造函数不能用作构造函数。四.箭头函数中this的指向不同在普通函数中，this总是指向调用它的对象，如果用作构造函数，this指向创建的对象实例。...总结： (1).箭头函数的 this 永远指向其上下文的 this ，任何方法都改变不了其指向，如 call() , bind() , apply() (2).普通函数的this指向调用它的那个对象

7592 0

热点面试题：箭头函数与普通函数的区别？

前言前端小菜鸡一枚，分享的文章纯属个人见解，若有不正确或可待讨论点可随意评论，与各位同学一起学习~ 箭头函数和普通函数的区别？ 1. 箭头函数比普通函数语法更加简洁： 1....箭头函数没有自己的 this 3....箭头函数不能作为构造函数使用：在构造函数 new 的步骤中，有一步是将函数中的 this 指向新的对象，在箭头函数中，因为没有自己的 this，且 this 指向外层的执行环境，且不能改变指向，所以不能当成构造函数使用...箭头函数没有自己的 arguments 7. 箭头函数没有原型 prototype 8....箭头函数不能用于语法糖 Generator，不能使用 yeild 关键字文章特殊字符描述 •问题标注 Q:(question)•答案标注 R:(result)•注意事项标准：A:(attention

1011 0

JavaScript闭包与箭头函数

闭包闭包是JavaScript中最强大的特性之一 JavaScript允许函数嵌套内部函数可以访问定义在外部函数中的所有变量和函数以及外部函数能访问的所有变量和函数外部函数不能够访问定义在内部函数中的变量和函数...两个新的类型的参数：默认参数(default parameters) 剩余参数(rest parameters) 默认参数在JavaScript中，函数参数的默认值是undefined function...箭头函数表达式（也称胖箭头函数, fat arrow function）具有较短的语法相比函数表达式和词法绑定此值。...箭头函数总是匿名的。...var a2 = a.map(function(s){ return s.length }); var a3 = a.map( s => s.length ); this 在箭头函数出现之前，每一个新函数都重新定义了自己的

8432 0

JavaScript函数篇之ES6箭头函数与匿名函数

当然可以，我们称这种函数为匿名函数，顾名思义，没有名字。箭头函数在ES6版本中，JavaScript加入了一个新的函数，箭头函数。箭头函数是 JavaScript 里的一种新的函数形式。...//普通函数 function add(x, y) { return x + y; } //箭头函数 var add = (x, y) => { return x + y;... } //箭头函数简写 var add = (x, y) => x + y; 其实，他出现的目的是为了简化我们的代码。...箭头函数的this 与常规函数相比，箭头函数对 this 的处理也有所不同。简而言之，使用箭头函数没有对 this 的绑定。...在常规函数中，关键字 this 表示调用该函数的对象，可以是窗口、文档、按钮或其他任何东西。对于箭头函数，this 关键字始终表示定义箭头函数的对象。

4222 0

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

基本不同 1.写法不同，箭头函数使用箭头定义，普通函数中没有 .箭头函数都是匿名函数，普通函数可以有匿名函数，也可以有具体名函数，但是箭头函数都是匿名函数。...在普通函数中，this总是指向调用它的对象，如果用作构造函数，this指向创建的对象实例。箭头函数中没有this,声明时捕获其所在上下文的this供自己使用。...所以箭头函数结合call(),apply()方法调用一个函数时，只传入一个参数对this没有影响。...，不能使用new 关键字，因为new关键字是调用函数对象的constructor属性，箭头函数中没有该属性，所以不能new function fn1(){ console.log...arguments，取而代之用rest参数…解决 6.箭头函数不可做Generator函数

1.8K1 0

JavaScript 严格模式

use strict 可以写在文件的许多位置，下面说一下在不同位置它起到的作用与作用范围。...那又如何实现上面的递归呢？...箭头函数与普通函数略有不同，箭头函数不会创建自己的 this，它只会从自己的作用域链的上一层继承 this。...严格模式中与 this 相关的规则都将被忽略。也就是说严格模式对箭头函数的 this 指向无效，顶层的箭头函数还是指向 window。箭头函数不绑定 arguments。...而且 "use strict" 严格模式标志可以写进 eval 函数中执行。严格模式下的 eval 不再为上层范围（包围 eval 代码块的范围）引入新变量。

9331 0

30道TypeScript 面试问题解析

它使用相同的范围规则，let并有助于降低整体程序的复杂性。 const num:number = 100; 10、在TypeScript中如何从子类调用基类构造函数？...Mixins 允许你通过组合以前类中更简单的部分类设置来构建新类。相反，类A继承类B来获得它的功能，类B从类A需要返回一个新类的附加功能。...与 JavaScript 类似，你可以使用parseInt或parseFloat函数分别将字符串转换为整数或浮点数。...这与JS相比如何？全局作用域：在任何类之外定义，可以在程序中的任何地方使用。函数/类范围：在函数或类中定义的变量可以在该范围内的任何地方使用。...23、TypeScript 中的箭头/lambda 函数是什么？胖箭头函数是用于定义匿名函数的函数表达式的速记语法。它类似于其他语言中的 lambda 函数。

4.3K2 0

30个小知识让你更清楚TypeScript

它使用相同的范围规则，let并有助于降低整体程序的复杂性。 const num:number = 100; 10、在TypeScript中如何从子类调用基类构造函数？...Mixins 允许你通过组合以前类中更简单的部分类设置来构建新类。相反，类A继承类B来获得它的功能，类B从类A需要返回一个新类的附加功能。...与 JavaScript 类似，你可以使用parseInt或parseFloat函数分别将字符串转换为整数或浮点数。...这与JS相比如何？全局作用域：在任何类之外定义，可以在程序中的任何地方使用。函数/类范围：在函数或类中定义的变量可以在该范围内的任何地方使用。...23、TypeScript 中的箭头/lambda 函数是什么？胖箭头函数是用于定义匿名函数的函数表达式的速记语法。它类似于其他语言中的 lambda 函数。

4.7K2 0

30个小知识让你更清楚TypeScript

它使用相同的范围规则，let并有助于降低整体程序的复杂性。 const num:number = 100; 10、在TypeScript中如何从子类调用基类构造函数？...Mixins 允许你通过组合以前类中更简单的部分类设置来构建新类。相反，类A继承类B来获得它的功能，类B从类A需要返回一个新类的附加功能。...与 JavaScript 类似，你可以使用parseInt或parseFloat函数分别将字符串转换为整数或浮点数。...这与JS相比如何？全局作用域：在任何类之外定义，可以在程序中的任何地方使用。函数/类范围：在函数或类中定义的变量可以在该范围内的任何地方使用。...23、TypeScript 中的箭头/lambda 函数是什么？胖箭头函数是用于定义匿名函数的函数表达式的速记语法。它类似于其他语言中的 lambda 函数。

3.6K2 0

JavaScript进阶-04

箭头函数箭头函数中的 this 与普通函数完全不同，也不受调用方式的影响，事实上箭头函数中并不存在 this ！箭头函数中访问的 this 不过是箭头函数所在作用域的 this 变量。...(this) // 该箭头函数中的 this 为函数声明环境中 this 一致 } // 普通对象 const user = { name: '小明', // 该箭头函数中的...this 与 sleep 中的 this 一致 } // 调用箭头函数 fn(); } } // 动态添加方法 user.sayHi = sayHi...this 默认值的情形，不仅如此 JavaScript 中还允许指定函数中 this 的指向，有 3 个方法可以动态指定普通函数中 this 的指向： call 使用 call 方法调用函数，同时指定函数中...> 注：bind 方法创建新的函数，与原函数的唯一的变化是改变了 this 的值。

2995 0

JavaScript 进阶

作用作用域规定了变量能够被访问的范围，离开这个范围变量就不能被访问作用域分为：局部作用域局部作用域分为函数作用域和块作用域。...，并自动做为返回值被返回加括号的函数体返回对象字面量表达式箭头函数参数：普通函数有 arguments 动态参数箭头函数没有 arguments 动态参数，但是有剩余参数 ..args 箭头函数...this：在箭头函数出现之前，每一个新函数根据它是被如何调用的来定义这个函数的 this 值箭头函数不会创建自己的 this ,它只会从自己的作用域链的上一层沿用 this 。...一般公共特征的属性或方法静态成员设置为静态成员静态成员方法中的 this 指向构造函数本身内置构造函数在 JavaScript 中最主要的数据类型有 6 种，分别是字符串、数值、布尔、undefined...指向-箭头函数箭头函数中的 this 与普通函数完全不同，也不受调用方式的影响，事实上箭头函数中并不存在 this ！

1.2K2 0

JavaScript 进阶 - 第1天

理解作用域对程序执行的影响能够分析程序执行的作用域范围理解闭包本质，利用闭包创建隔离作用域了解什么变量提升及函数提升掌握箭头函数、解析剩余参数等简洁语法一、作用域了解作用域对程序执行的影响及作用域链的查找机制...作用域（scope）规定了变量能够被访问的“范围”，离开了这个“范围”变量便不能被访问，作用域分为全局作用域和局部作用域。 1.1 局部作用域局部作用域分为函数作用域和块作用域。...，f 函数内部创建的新函数 g，会产生新的函数作用域，由此可知作用域产生了嵌套的关系。...二、函数知道函数参数默认值、动态参数、剩余参数的使用细节，提升函数应用的灵活度，知道箭头函数的语法及与普通函数的差异。...是语法符号，置于最末函数形参之前，用于获取多余的实参借助 ... 获取的剩余实参 2.3 箭头函数箭头函数是一种声明函数的简洁语法，它与普通函数并无本质的区别，差异性更多体现在语法格式上。

7892 0

JavaScript进阶-01

理解作用域对程序执行的影响能够分析程序执行的作用域范围理解闭包本质，利用闭包创建隔离作用域了解什么变量提升及函数提升掌握箭头函数、解析剩余参数等简洁语法一、作用域了解作用域对程序执行的影响及作用域链的查找机制...作用域（scope）规定了变量能够被访问的“范围”，离开了这个“范围”变量便不能被访问，作用域分为全局作用域和局部作用域。 1.1 局部作用域局部作用域分为函数作用域和块作用域。...，f 函数内部创建的新函数 g，会产生新的函数作用域，由此可知作用域产生了嵌套的关系。...二、函数知道函数参数默认值、动态参数、剩余参数的使用细节，提升函数应用的灵活度，知道箭头函数的语法及与普通函数的差异。...获取的剩余实参，是个真数组 2.3 箭头函数箭头函数是一种声明函数的简洁语法，它与普通函数并无本质的区别，差异性更多体现在语法格式上。

6932 0

一年前端面试打怪升级之路_2023-02-27

1、首先创建了一个新对象 2、设置原型，将对象的原型设置为函数的prototype对象 3、让函数的this指向这个对象，执行构造函数的代码（为这个新对象添加属性） 4、判断函数的返回值类型，如果是值类型...同源策略限制了从同一个源加载的文档或脚本如何与另一个源的资源进行交互。这是浏览器的一个用于隔离潜在恶意文件的重要的安全机制。同源指的是：协议、端口号、域名必须一致。...如何阻止事件冒泡普通浏览器使用：event.stopPropagation() IE浏览器使用：event.cancelBubble = true; PWA使用过吗？...箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？普通函数通过 function 关键字定义， this 无法结合词法作用域使用，在运行时绑定，只取决于函数的调用方式，在哪里被调用，调用位置。...（取决于调用者，和是否独立运行）箭头函数使用被称为 “胖箭头” 的操作 => 定义，箭头函数不应用普通函数 this 绑定的四种规则，而是根据外层（函数或全局）的作用域来决定 this，且箭头函数的绑定无法被修改

4552 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭