为什么调用箭头函数的方法不起作用？

调用箭头函数的方法不起作用的原因是箭头函数没有自己的this值。箭头函数的this值是在定义时绑定的，而不是在运行时绑定的。这意味着无论如何调用箭头函数，它的this值始终指向定义时所在的上下文。

由于箭头函数没有自己的this值，它也无法使用call()、apply()或bind()方法来改变this的指向。相反，它会继承外层作用域的this值。

这种特性使得箭头函数在某些情况下非常有用，特别是在需要保留当前上下文的场景下。然而，如果需要在函数内部使用this来引用当前对象或调用对象的方法，箭头函数就不适用了。

如果需要在函数内部使用this来引用当前对象或调用对象的方法，可以使用普通函数而不是箭头函数。普通函数的this值会根据调用方式动态绑定，可以灵活地改变this的指向。

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

云函数（Serverless）：https://cloud.tencent.com/product/scf
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版（CDB）：https://cloud.tencent.com/product/cdb
云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
云安全中心（SSP）：https://cloud.tencent.com/product/ssp
腾讯云音视频处理（MPS）：https://cloud.tencent.com/product/mps
人工智能（AI）：https://cloud.tencent.com/product/ai
物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mpns
云存储（COS）：https://cloud.tencent.com/product/cos
腾讯云区块链服务（TBC）：https://cloud.tencent.com/product/tbc
腾讯云元宇宙（Tencent Cloud Metaverse）：https://cloud.tencent.com/solution/metaverse

相关·内容

Js的箭头函数

更简短的函数并且不绑定this。箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。...箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。...elements.map(function(element) { return element.length; }); // 返回数组：[8, 6, 7, 9] // 上面的普通函数可以改写成如下的箭头函数...elements.map(element => { return element.length; }); // [8, 6, 7, 9] // 当箭头函数的函数体只有一个 `return` 语句时...，可以省略 `return` 关键字和方法体的花括号 elements.map(element => element.length); // [8, 6, 7, 9] 在这个例子中，因为我们只需要 length

1.5K1 0

ES6数组的高阶方法，箭头函数，对象

一.数组的高阶方法 forEach（遍历） var arr = ['我','和','我的','祖国']; arr.forEach(function(item,index,self){...age:7},{ age:14}]; arr1.sort(function(a,b){ return a.age>b.age}); console.log(arr1); 三.箭头函数...箭头函数就是函数简写方式组成: 参数 => 语句, 参数不是1个: (参数,参数2)=>语句语句不止一条: 参数 =>{语句1;语句2;return 返回值} 返回的对象格式: 参数=>({对象}...,index,self); }) 转换为箭头函数 var arr = ['我','和','我的','祖国']; arr.forEach(item => console.log(item)) 四.函数的三种参数...1.函数的默认参数 function add(a,b=10){ alert(a+b); } add(3,5); add(3) 2.函数的不定参数 function add(...args)

3422 0

面试官：箭头函数和普通函数的区别？箭头函数的this指向哪里？

一、箭头函数更直观、简洁箭头函数为匿名函数 let a = () => {} 有一个参数可省略（），多个的话不能省略（），用，号分开 let a = m => {} let b = (m, n...console.log(this, '箭头函数的 this 的执行环境') // window }, fn2: function () { console.log(this.name.../ undefined console.log(b.prototype); // {constructor: ƒ} 五、箭头函数参数不能用arguments，值是有外围非箭头函数所决定的 //...报错 let a = (m) => { console.log(arguments) } a(1,2,3) // arguments is not defined // 值是有外围非箭头函数所决定的...函数,不能使用yield关键字箭头函数的this指向为其上下文的this，一级一级往上找，直到找到 window 当然箭头函数与普通函数的区别还有很多，小编总结的也不是很齐全，有想法的，请各位看官大大多多交流指正

5193 0

箭头函数中的this值

其实那只是其中一个因素，还有一个因素就是在ZnHobbies方法中的this已经不属于上一个区块，而这里的this并没有name值。...所以解决办法的其中一个就是在ZnHobbies函数中写入 var that = this; 然后将this替换成that，所以输出的结果中，就有了lucifer的名字啦。...还有的一个办法就是将ZnHobbies函数下的map改写成箭头函数： ZnHobbies: function () { this.hobbies.map((hobby)=...为什么箭头函数可以达到这样的效果呢？是因为箭头函数没有它自己的'this'值。它的this值是继承于它的父作用域的。...所以它不会随着调用方法的改变而改变，所以这里的this值就指向它的父级作用域，而上一个this指向的是Lucifer这个Object。所以我们就能准确得到Lucifer的name值啦。

2.2K2 0

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

指向是动态的：从上面的例子可以看出，fn函数中的this本应指向window，后面我们通过bind方法将函数的this指向改变为了obj对象，所以打印出obj。...可以看出，普通函数的this指向可以通过bind、call、apply等方法进行改变，this指向是动态的。...this：从上面的例子中可以看出，普通函数fn作为obj的属性被调用，谁调用普通函数，那么函数中的this就指向谁，所以fn的this指向obj。...箭头函数会忽略任何形式的this指向的改变（bind、call、apply等方式无法改变箭头函数的this指向），箭头函数的this指向是静态的： 03 【从构造函数来看】【普通函数】通过new关键字调用普通函数...箭头函数不能被new关键字调用，不具有new.target 阅读原文了解老九学堂暑期线下就业班详情

7032 0

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

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

1542 0

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

感觉这里写多了，但比较喜欢把一个知识点讲清楚… 使用new调用箭头函数会报错无论箭头函数的thsi指向哪里，使用new调用箭头函数都会报错，因为箭头函数没有constructor let a = (...此属性主要：用于确定构造函数是否为new调用的。...this.array.push('全局对象下没有array，这里会报错'); // 找不到push方法 } }; obj.sum(); 上述例子使用普通函数或者ES6中的方法简写的来定义方法，就没有问题了...('this指向obj'); } 还有一种情况是给普通函数的原型定义方法的时候，通常会在普通函数的外部进行定义，比如说继承/添加方法的时候。...箭头函数的this指向普通函数时,它的argumens继承于该普通函数使用new调用箭头函数会报错，因为箭头函数没有constructor 箭头函数不支持new.target 箭头函数不支持重命名函数参数

8313 0

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

1、this指向问题（重要） MDN的描述是箭头函数不会创建自己的this他只会从自己的作用域链的上一层继承this，这里我们可以理解为this指向外层第一个普通函数（如果没有，则指向全局对象（可通过...globalThis访问））；而普通函数中this指向其调用者。...this指向不可以修改，通过 call() 或 apply() 方法调用一个函数时，只能传递参数（不能绑定 this---译者注），他们的第一个参数会被忽略。...console.log(Fn.prototype) // undefined let f = new Fn(); // Uncaught TypeError: Fn is not a constructor 以上就是关于箭头函数和普通函数的区别...，最重要的就是关于this指向问题，有更多的箭头函数的知识大家可以看看MDN上的内容，里面有很详细的讲解，希望本篇文章能够帮助大家解决一些疑惑，感谢您的观看。

3511 0

SpringBoot 内部方法调用，事务不起作用的原因及解决办法

在做业务开发时，遇到了一个事务不起作用的问题。大概流程是这样的，方法内部的定时任务调用了一个带事务的方法，失败后事务没有回滚。查阅资料后，问题得到解决，记录下来分享给大家。　　...我在这里模拟一个场景，大概的调用方式就如下面的代码这样。　　...内部方式使用this调用方式时，使用的是实例调用，并没有通过代理类调用方法，所以会导致事务失效。　　...通过ApplicationContext引入bean　　通过ApplicationContext获取bean，通过bean调用内部方法，就使用了bean的代理类。　　...(User user) {　　((UserService) AopContext.currentProxy()).invokeInsertUser(user);　　}　　以上就是内部方法调用时，事务不起作用的原因及解决办法

1.9K2 0

为什么我的样式不起作用？

还有一个Child的子组件，红底黑字。那么实际渲染出的样式是什么样子的呢。如下图: ? 实际看到的效果确实蓝底白字与红底白字，为什么与写的代码有出入呢。...究其原因 为什么子组件的字体颜色不是黑色确是白色? ?...为什么同样.parent .component 和.child .component是父级覆盖子级? ?...浏览器使用一种流式处理的方法，只需要一次绘制操作就可以布局所有的元素。将渲染树的各个节点绘制到屏幕上，这一步被称为绘制painting。 ?...最后文章首发于：为什么我的样式不起作用？参考：浏览器渲染原理与过程参考：CSS选择器从右向左的匹配规则 DEMO地址

4.1K2 0

JavaScript|箭头函数的用法

问题描述 JavaScript ES6标准新增了比较重要的一种新的函数：Arrow Function（箭头函数）,但大多数人都不能很好的了解箭头函数的用法，也不能区别箭头函数和function(),所以接下来我们就来介绍一下箭头函数...同时箭头函数看上去是匿名函数（它们没有用于递归或者事件绑定 / 解绑定的命名引用）的一种简写，但实际上，箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，由上下文确定。...如上例子，箭头函数中this总是指向语法作用域，也就是此处的外部调用者xiaoming对象，故而此处ming.getAge()的返回值为21。...也就是说，使用箭头函数，就不需要以前的那种hack写法了： var that = this; 由于this在箭头函数中已经按照词法作用域绑定了，所以用call()或者apply()调用函数的时候，无法对...3 箭头函数与function()函数的区别通过上面对于箭头函数的讲解就可以发现虽然有时候可以将function()函数变为箭头函数，但两者还是有很大的区别的： a.箭头函数体内的this对象，就是定义时所在的对象

7082 0

JavaScript中的箭头函数

箭头函数语法函数就像食谱一样，你在其中存储有用的指令，以完成你需要在程序中发生的事情，比如执行一个动作或返回一个值。通过调用函数，来执行食谱中包含的步骤。...为什么呢？...匿名箭头函数在上面的演示中，接下来要注意的是.setInterval()方法中的代码。在这里，你也会发现一个匿名函数，但这次是一个箭头函数。为什么？...它们有自己的局限性，这意味着在有些情况下你不想使用箭头函数。让我们看看更多的例子。箭头函数作为对象方法箭头函数作为对象上的方法不能很好地工作。...另一个需要注意的问题是，第三方库通常会绑定方法调用，因此this值会指向一些有用的东西。

2.1K2 0

Dart 匿名函数和箭头函数的思考

不管什么语言，不管是叫闭包，Block，lambda表达式还是箭头函数。其实都是函数的简单写法，为了更方便的在各种场景使用。学了太多的语言，感觉有点乱，整理一下Dart的函数当参数的写法。...定义为第一种方法 void printFunc(int element){ print(element); } main(List args) { //以forEach 函数调用为例...//箭头函数赋值 var f = (e) => print(e); //以forEach 函数调用为例 List array = [1,2,3]; //赋值传入箭头函数 array.forEach...(f); } 关于匿名函数和箭头函数的赋值，第一反应前面加一个返回值就行，But报错了，没有这种写法。...其实仔细想想函数的语法糖就是匿名函数，匿名函数的简写就是箭头函数。

7831 0

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

但是构造函数不能用作构造函数。四.箭头函数中this的指向不同在普通函数中，this总是指向调用它的对象，如果用作构造函数，this指向创建的对象实例。...（2）使用new调用wrap()函数之后，此函数作用域中的this指向创建的实例化对象。（3）箭头函数此时被声明，捕获这个this。（4）所以打印的是恩诺2，而不是恩诺1。...2.结合call()，apply()方法使用箭头函数结合call(),apply()方法调用一个函数时，只传入一个参数对this没有影响。...arguments，取而代之用rest参数…解决每一个普通函数调用后都具有一个arguments对象，用来存储实际传递的参数。...总结： (1).箭头函数的 this 永远指向其上下文的 this ，任何方法都改变不了其指向，如 call() , bind() , apply() (2).普通函数的this指向调用它的那个对象

7592 0

（十五）箭头函数的类型定义

# 一、箭头函数的类型定义说明箭头函数的参数定义，与普通函数的定义基本一直例 const add = (a: number, b: number): number => { return a...+ b } # 总结-写在最后总结当箭头函数为普通函数的时候，写法和普通函数写法是一样的当箭头函数作为一些内置函数的参数的时候，TypeScript 会自动推断它的类型，包括返回值 // 自动判断出...function(x: number): number // 因为数组的每一项都是 number 类型 [1, 2, 3].map((x) => x * x)

6182 0

简单说 JavaScript的箭头函数

=>({x:1}); 为什么会这样？...call()、apply()、bind()、这些方法也无法改变箭头函数 this 的指向。 3、箭头函数不能用 new 关键字来实例化对象，不然会报错。...call()、apply()、bind()、这些方法也无法改变箭头函数 this 的指向。...this的指向，而且更为重要的是，箭头函数内部并没有 [[Construct]] 方法，所以会没有原型属性（prototype），所以箭头函数没法当构造函数。...call()、apply()、bind()、这些方法也无法改变箭头函数 this 的指向。 3、箭头函数不能用 new 关键字来实例化对象，不然会报错。

5132 0

缩短箭头函数的小诀窍

基本语法完整版本的箭头函数声明包括：一对带有参数枚举的括号 (param1, param2) 后面跟随箭头 => 以函数体 {FunctionBody} 结尾典型的箭头函数如下所示： const...现在 JavaScript 将其视为包含对象文字的表达式。 4.粗箭头方法类字段提案（截至2019年8月，第3阶段）向类中引入了粗箭头方法语法。这种方法中的 this 总是绑定到类实例上。...getMessage 是 Greet 类中的一个方法，使用粗箭头语法定义。getMessage 方法中的 this 始终绑定到类实例。你可以编写简洁的粗箭头方法吗？是的你可以！...`是一个简洁的粗箭头方法定义。省略了其单个参数 who 周围的一对括号，以及大括号 {} 和 return关键字。 5. 简洁并不总是意味着可读性好我喜欢简洁的箭头函数，可以立即展示该函数的功能。...结论箭头函数以提供简短定义的能力而闻名。使用上面介绍的诀窍，可以通过删除参数括号、花括号或 return 关键字来缩短箭头函数。你可以将这些诀窍与粗箭头方法放在一起使用。

5772 0

创建子类对象时，父类构造函数中调用被子类重写的方法为什么调用的是子类的方法？

A对象的时候父类会调用子类方法？...但是：创建B对象父类会调用父类的方法？答案：当子类被加载到内存方法区后，会继续加载父类到内存中。...如果，子类重写了父类的方法，子类的方法引用会指向子类的方法，否则子类的方法引用会指向父类的方法引用。如果子类重载了父类方法，则子类重载方法引用还指向子类方法。...如果子类方法没有重写也没有重载父类方法，则方法引用会指向父类方法。当子类对象创建时，会先行调用父类的构造方法（构造方法也是方法），虚拟机会在子类方法区寻找该方法并运行。...其结果是当编译的时候，父类构造方法调用的方法的参数已经强制转换为符合父类方法的参数了。上边代码在编译前已经转换为下面这个样子的了。

6.1K1 0

thinkphp模版调用函数方法

thinkphp模版调用函数方法 {变量|函数1|函数2|函数3=参数1,参数2,参数3,###} ###为第4个参数，代表变量替换为第4个参数举例： {$username|substr...|date='Y-m-d H:i:s'，###}将times时间戳转换为日期格式 ================================================== 冒号执行函数的用法...：输出方法并执行返回值 {:U('user/insert')} 举例： {:time()} 会输出当前日期格式，会被解析成 ================================================== 波浪线函数的用法：执行方法但不输出 { ~function()} 举例： {...中的变量} {$Think.session.session中的id|md5} 如果需要的话还可以对值MD5一下 {$Think.cookie.cookie中的id} =========

4503 0

匿名函数调用方法_javascript匿名函数

大家好，又见面了，我是你们的朋友全栈君。...首先看一下普通函数和匿名函数的区别 //普通函数 function sum(a,b){ return a+b; console.log("我是一个普通函数") } //匿名函数，不能单独使用...function (a,b){ return a+b; console.log("我是一个匿名函数") } 没错，匿名函数简单来说就是普通函数去掉名字，但是他不能单独定义与使用，下面是匿名函数的一些使用场景...：用于函数表达式、作为返回值、用于定义对象方法、作为回调函数、用于立即执行函数、用于DOM元素注册事件 1.用于函数表达式 var sum = function (num1, num2) {...(function() { console.log('立即执行函数是基于匿名函数创建的'); }()); 常用形式二：将匿名函数包裹在一个括号运算符中，后面再跟一个括号 (function

1.5K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

为什么调用箭头函数的方法不起作用？

相关·内容

Js的箭头函数

ES6数组的高阶方法，箭头函数，对象

面试官：箭头函数和普通函数的区别？箭头函数的this指向哪里？

箭头函数中的this值

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

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

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

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

SpringBoot 内部方法调用，事务不起作用的原因及解决办法

为什么我的样式不起作用？

JavaScript|箭头函数的用法

JavaScript中的箭头函数

Dart 匿名函数和箭头函数的思考

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

（十五）箭头函数的类型定义

简单说 JavaScript的箭头函数

缩短箭头函数的小诀窍

创建子类对象时，父类构造函数中调用被子类重写的方法为什么调用的是子类的方法？

thinkphp模版调用函数方法

匿名函数调用方法_javascript匿名函数

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐