首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么箭头函数必须声明在调用者函数之上

箭头函数必须声明在调用者函数之上是因为箭头函数没有自己的作用域,它会继承父级作用域。当我们使用箭头函数时,它会捕获当前上下文的 this 值,并且无法通过 call()、apply() 或 bind() 方法来改变 this 的指向。

如果箭头函数在调用者函数之后声明,那么它将无法访问到调用者函数的作用域,因为它的作用域链已经确定了。这样会导致箭头函数无法正确地绑定 this,从而引发错误或产生意外的结果。

举个例子来说明,假设有以下代码:

代码语言:txt
复制
function outerFunction() {
  const arrowFunction = () => {
    console.log(this);
  };

  arrowFunction();
}

const obj = {
  name: 'John',
  outer: outerFunction
};

obj.outer();

在这个例子中,箭头函数 arrowFunction 声明在调用者函数 outerFunction 之内,因此它可以正确地访问到 outerFunction 的作用域,并且 this 的值将指向 obj 对象。如果我们将箭头函数的声明放在调用者函数之后,那么它将无法访问到 outerFunction 的作用域,this 的值也将变得不确定。

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

  • 云函数(Serverless):云函数是一种无需管理服务器即可运行代码的计算服务,可用于构建和扩展各种应用和后端服务。详情请参考:云函数产品介绍
  • 云开发(CloudBase):云开发是一套面向开发者的全栈云原生解决方案,提供了前后端一体化的开发能力和丰富的云端资源。详情请参考:云开发产品介绍
  • 云数据库 MySQL 版(TencentDB for MySQL):云数据库 MySQL 版是一种高性能、可扩展的关系型数据库服务,适用于各种规模的应用程序。详情请参考:云数据库 MySQL 版产品介绍
  • 云服务器(CVM):云服务器是一种弹性计算服务,提供了可靠、安全、灵活的云端计算能力,适用于各种应用场景。详情请参考:云服务器产品介绍
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

为什么我坚持使用 JavaScript 函数声明

时光溯回到上世纪 90 年代晚期,初次接触 JavaScript 时,老师教我们使用函数声明写下Hello World,它看上去是这样的······ function helloWorld() {...——那么简单的函数竟然要 3 行!那些多余的字符怎么看都扎眼! 如今你们内心戏大概是: ? 我对箭头函数绝对是真爱,但要声明一个顶级函数时,我仍用“土气”的函数声明为什么呢?...都退后,我要开始装逼了 Fair warning:接下来我要放大招了——下文“行话”连篇,但你只要明白声明之前不能使用常数就好。...实际上,代码顶端上面加一个 API 的小总结不是很好吗?用函数声明完全可以做到。...3 关于箭头函数 是的,箭头函数是真爱啊。 我一般会用箭头函数来通过一个小函数,将其作为更高阶函数的值。使用箭头函数时,还会使用地图、过滤器等,它们都是我的好朋友。

1.1K80

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

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

1.8K10

医疗数字阅片-医学影像-中间插播一下-es6-使用const加箭头函数声明函数相对于function声明函数有什么好处?

[OHIF-Viewers]医疗数字阅片-医学影像-中间插播一下-es6-使用const加箭头函数声明函数相对于function声明函数有什么好处?...,如下段代码所示: const fn=(foo,bar) => foo+bar 实际开发中,函数的参数不会只有一个,箭头函数中,多参数的语法跟普通函数一样,用括号包裹参数项。...相对于传统的function函数箭头函数简单的函数使用中更为简洁直观。...我们B位置内声明函数(C区域),this关键词的指向B区域的函数,由于B区域内没有doSomething函数声明,因此输出undefined,ES6之前我们如何修正此问题呢?...使用箭头函数时,我们一定要理解箭头函数和传统函数的区别,如果函数功能简单,只是简单的逻辑处理,尽量使用箭头函数。 const 有什么好处?

67020

Vue 中 data 为什么必须是一个函数

为什么 Vue 中的 data 必须是个函数? 官方文档的解释如下: ? ? 为什么会出现上述“影响到其它所有实例”的情况呢?...其实这个问题取决于 JS 原型链知识,而非 Vue 我们先来看不是函数的情况: function Component() { } Component.prototype.data = { name...componentB data 之间指向了同一个内存地址,age 都变成了 40,导致了问题 因此,data 如果单纯的写成对象形式,会使得所有组件实例共用了一份 data,造成一个变了全都会变的结果 接下来我们用函数改造以上代码...= new Component() componentA.data.age = 40 console.log(componentA, componentB) // 40 14 这就很好的解释了为什么...Vue 组件中的 data 需要用函数了,当 data 是函数的时候,每一个实例的 data 属性都是独立的,互不影响 总结 Vue 中的 data 必须是个函数,因为当 data 是函数时,组件实例化的时候这个函数将会被调用

1.2K20

我发现了华点:vue规定用普通函数定义方法,为什么react又要我用箭头函数

调用时分别打印this,结果如下: 箭头函数中this正确指向了组件实例,但普通函数中却指向了undefined,为什么?...但为什么使用箭头函数,this又可以正确指向组件实例呢?...,是被挂载到原型链上的;而使用箭头函数定义的方法,直接赋给了实例,变成了实例的一个属性,并且最重要的是:它是「构造函数的作用域」被定义的。...这样就可以解释为什么react组件中,箭头函数的this能正确指向组件实例。...结语 「为什么react中用箭头函数,vue中用普通函数」这是一个挺很有意思的问题,简单来说,这种差异是由于我们写的react是一个类,而vue是一个对象导致的。

75410

C语言为什么只需要include就能使用里面声明函数?

有人问:C语言为什么只需要include就能使用里面声明函数?这是一个看起来非常简单的问题,但是很多初学者,甚至学了很久的人都可能没有搞明白。 为什么包含即可用?...所以实际上,你只是在你的.c中声明了这些函数,既然声明了,那么你就可以使用。但是你要想真正用到它,还需要找到它的定义。这是链接阶段做的事情。...实际上,这一点我已经《一个奇怪的链接问题》中提到过了。...在这种情况下,你必须告诉它,我要用pow函数,并且你要去math库找,于是,按照下面的方式进行编译链接: $ gcc -o pow pow.c -lm 就可以了。...(-lm表示需要链接math库) 当然了,对于C++,使用pow函数不用链接math库也是可以的,为什么呢?请移步这里《C++为什么不需要单独链接math库?》。 不包含可以用吗?

1.3K20

Go语言必须支持多返回值函数,你知道为什么吗?

main函数中调用了calc函数。不过要注意,调用go函数时,用于接收函数返回值的变量个数必须函数返回值的个数相同,否则无法编译通过,并会显示如下图所示的错误信息。...,而且变量的数据类型和数量必须函数返回值的数据类型与数量完全相同,多一点不行,少一点也不行。...Go语言有一个规定,就是你代码中只要定义了变量,必须要使用,不使用你就别定义。...现在来回答本文最开始的提出的问题:Go语言的函数为什么需要返回多个值。...像Python语言是支持try...catch的,所以多返回值函数并不是必须的,当然,支持多返回值函数也会让程序变得更简洁。

1.5K30

深入理解Js中的this

深入理解Js中的this JavaScript作用域为静态作用域static scope,但是Js中的this却是一个例外,this的指向问题就类似于动态作用域,其并不关心函数和作用域是如何声明以及何处声明的...[[Scopes]]: Scopes[1] 0: Global ... */ // 可以看见声明的s函数运行的上下文环境是全局作用域 函数作用域 当声明一个函数后,函数内部声明的方法或者成员的运行环境就是此函数函数作用域...,obj --say--> funtion,那么此时问题来了,由于这种内存结构,我们可以使任何变量对象等指向这个函数,所以JavaScript的函数中是需要允许我们取得运行环境的值以供使用的,我们必须要有一种机制...this永远指向调用者,但箭头函数除外,接下来我们介绍一下五种this的使用情况。...箭头函数没有单独的this,箭头函数函数体中使用this时,会取得其上下文context环境中的this。

40510

通过vue.js 学习来总结es6语法中的箭头函数箭头函数原理分析。

版权声明:本文为博主原创文章,未经博主允许不得转载。...为什么叫Arrow Function?...因为它的定义用的就是一个箭头: x => x * x 上面的箭头函数相当于: function (x) { return x * x; } 箭头函数相当于匿名函数,并且简化了函数定义。...由于this箭头函数中已经按照词法作用域绑定了,所以,用call()或者apply()调用箭头函数时,无法对this进行绑定,即传入的第一个参数被忽略: var obj = { birth:...) // } //---总结--- //箭头函数一般用于函数嵌套时,防止this指向变化,箭头函数 //中this的指向一直是外层对象,即廖雪峰大神说的“箭头函数完全

1.6K20

js匿名函数箭头函数_函数式编程

js匿名函数箭头函数,以及他们的区别 匿名函数 箭头函数 区别 1.匿名函数 简单点说就是没有名字的函数声明函数时不写函数名称,(将函数赋值给变量)叫匿名函数。...匿名函数可以有效的保证页面上写入Javascript,而不会造成全局变量的污染。...function(){ console.log('立即执行匿名函数!'); }() 匿名函数不能够提前调用,会报错,需要在函数声明之后调用。...普通函数:this指向直接调用者,非严格模式下没有找到直接调用者就指向window(严格模式下this是undefined)。...4.* 没有调用者,捕获其所在(即定义的位置)上下文的this值, 作为自己的this值。this一旦被捕获,就不再发生变化。 版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。

1.8K10

踩坑经验 | 为什么不建议power bi 写dax的时候用search函数

12 2023-11 踩坑经验 | 为什么不建议power bi 写dax的时候用search函数 分享一个踩坑的经验,为什么不建议大家dax中使用search函数~ LEARN MORE 图片由通义万相绘制...明明什么都没有改,为什么dax函数突然就报空了么?...排查定位的过程比较无趣,这里就不赘述了,总之就是,鬼知道公司网络做了什么升级或者改动,导致USERPRINCIPALNAME()这个函数返回的值和之前不一样了。...search函数虽然好用,但是遇到这种情况真可谓是让人崩溃,毕竟一般情况下,咱也想不到另一个函数返回的值会发生变化。于是就翻车了。...然而现实中这种类似的在所有人意料之外的调整影响一直都有发生,search函数到了类似的常见中还是非常容易出问题的。 真心建议,这种用法以后还是别的,太坑了。

28940

为什么应该尽可能避免静态构造函数中初始化静态字段?

不同的是Foo以内联(inline)赋值的方法进行初始化,而Bar则将初始化操作定义静态构造函数中。...但是当我们调用一个并不涉及类型静态字段的Invoke方法时,定义Foo中的静态构造函数会自动执行,但是定义Bar中的则不会,由此可以看出一个类型的静态构造函数的执行时机与类型是否具有beforefieldinit...具体规则如下,这一个规则直接定义CLI标准ECMA-335中,静态构造函数在此标准中被称为类型初始化器(Type Initializer)或者.cctor。...: 第一次读取任何一个静态字段之前; 第一个执行任何一个静态方法之前; 引用类型:第一次调用构造函数之前; 值类型:第一次调用实例方法; 由于beforefieldinit标记只有没有显式定义静态构造函数的情况下才会被添加...四、关于“All-Zero”结构体 如果我们一个结构体中显式定义了一个静态构造函数,当我们调用其构造函数之前,静态构造函数会自动执行。

16410

为什么交叉熵和KL散度作为损失函数时是近似相等的

来源:DeepHub IMBA本文约900字,建议阅读5分钟本文中,我们将介绍熵、交叉熵和 Kullback-Leibler Divergence [2] 的概念,并了解如何将它们近似为相等。...尽管最初的建议使用 KL 散度,但在构建生成对抗网络 [1] 时,损失函数中使用交叉熵是一种常见的做法。这常常给该领域的新手造成混乱。...在这里我们将要验证为什么最小化交叉熵而不是使用 KL 散度会得到相同的输出。所以我们首先从正态分布中抽取两个概率分布 p 和 q。...大多数实际应用中,p 是实际数据/测量值,而 q 是假设分布。对于 GAN,p 是真实图像的概率分布,而 q 是生成的假图像的概率分布。...总结 本文中,我们了解了熵、交叉熵和 kl-散度的概念。然后我们回答了为什么这两个术语深度学习应用程序中经常互换使用。我们还在 python 中实现并验证了这些概念。

91140

分享一个关于this对象的编程小技巧,如何使用箭头函数避免this对象混淆?

为什么? 三 因为小程序接口的success回调函数中,简写等于带function关键字的写法。...为什么使用箭头可以呢? 四 因为箭头函数中,this对象与封闭词法环境中的this保持一致。换一句话,箭头函数中的this,是定义与执行它的函数中this对象。...或者我们可以理解为,箭头函数是没有this对象的。箭头函数中的this,取决于它身处何处。 那么,回顾一下,this是什么?...严格模式 对于这个代码: function f1(){ return this; } f1() === window; //浏览器中全局对象是window // 输出 true 但是如果仅添加一行声明...本质上这三个方法改变的是方法的调用者,所以方法内部的this也改变了。 六 最后总结一下,虽然bind等方法可以改变方法的调用者对象,借此改变this对象。

1.1K30

vue1

必须声明'use strict';后才能使用let声明变量否则浏览并不能显示结果, const:用于声明常量,也具有块级作用域 ,也可声明块级。...; function、箭头函数的区别 作用域: 箭头函数指向其定义环境,箭头函数内部的this的指向无法通过其他方式改变,指向的是外部的this,箭头函数中调用 this 时,仅仅是简单的沿着作用域链向上寻找...function指向其直接调用者,function内部的this就是调用者本身。...构造函数箭头函数不能当做构造函数 参数问题:箭头函数不存在arguments对象,用rest参数代替; 原型问题:箭头函数不存在原型; 箭头函数不能使用yield命令,因此箭头函数不能用作genertor...方法:定义vue类内部的methods内的箭头函数、function、方法,function可以作为类,内部会有this,箭头函数内部没有this,{}里面出现的函数称之为方法:方法名(){}。

55130
领券