广告
返回顶部
首页 > 资讯 > 前端开发 > 其他 >es6箭头方法中this的指向是什么
  • 536
分享到

es6箭头方法中this的指向是什么

箭头函数javascriptES6 2022-11-22 23:11:22 536人浏览 安东尼
摘要

本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。箭头函数相信大家在日常开发中用到的地方非常之多,因为它很简洁,可读性强,但是它最大的好处,其实是解决了匿名函数的this指向问题,有利于封装回调函数。先来

教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。

箭头函数相信大家在日常开发中用到的地方非常之多,因为它很简洁,可读性强,但是它最大的好处,其实是解决了匿名函数的this指向问题,有利于封装回调函数。

先来个总结

箭头函数体内的this对象,就是定义该函数时所在的作用域指向的对象,而不是使用时所在的作用域指向的对象。

es6箭头函数中this

  • (1)默认指向定义它时,所处上下文的对象的this指向。即ES6箭头函数里this的指向就是上下文里对象this指向,偶尔没有上下文对象,this就指向window

  • (2)即使是call,apply,bind等方法也不能改变箭头函数this的指向

下面是普通函数的列子:

var name = 'window'; // 其实是window.name = 'window'

var A = {
   name: 'A',
   sayHello: function(){
      console.log(this.name)
   }
}

A.sayHello();// 输出A

var B = {
  name: 'B'
}

A.sayHello.call(B);//输出B

A.sayHello.call();//不传参数指向全局window对象,输出window.name也就是window

从上面可以看到,sayHello这个方法是定义在A对象中的,当当我们使用call方法,把其指向B对象,最后输出了B;可以得出,sayHello的this只跟使用时的对象有关。

改造一下:

var name = 'window'; 
var A = {
   name: 'A',
   sayHello: () => {
      console.log(this.name)
   }
}
A.sayHello();// 还是以为输出A ? 错啦,其实输出的是window

我相信在这里,大部分同学都会出错,以为sayHello是绑定在A上的,但其实它绑定在window上的,那到底是为什么呢?

一开始,我重点标注了“该函数所在的作用域指向的对象”,作用域是指函数内部,这里的箭头函数,也就是sayHello,所在的作用域其实是最外层的js环境,因为没有其他函数包裹;然后最外层的js环境指向的对象是winodw对象,所以这里的this指向的是window对象。

那如何改造成永远绑定A呢:

var name = 'window'; 

var A = {
   name: 'A',
   sayHello: function(){
      var s = () => console.log(this.name)
      return s//返回箭头函数s
   }
}

var sayHello = A.sayHello();
sayHello();// 输出A 

var B = {
   name: 'B';
}

sayHello.call(B); //还是A
sayHello.call(); //还是A

OK,这样就做到了永远指向A对象了,我们再根据“该函数所在的作用域指向的对象”来分析一下:

  • 该函数所在的作用域:箭头函数s 所在的作用域是sayHello,因为sayHello是一个函数。

  • 作用域指向的对象:A.sayHello指向的对象是A。

所以箭头函数s 中this就是指向A啦 ~~

----------------finish-------------

最后是使用箭头函数其他几点需要注意的地方

  • 不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。

  • 不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。

  • 不可以使用yield命令,因此箭头函数不能用作 Generator 函数。

【推荐学习javascript视频教程】

以上就是es6箭头方法中this的指向是什么的详细内容,更多请关注编程网其它相关文章!

--结束END--

本文标题: es6箭头方法中this的指向是什么

本文链接: https://www.lsjlt.com/news/173540.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • es6箭头方法中this的指向是什么
    本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。箭头函数相信大家在日常开发中用到的地方非常之多,因为它很简洁,可读性强,但是它最大的好处,其实是解决了匿名函数的this指向问题,有利于封装回调函数。先来...
    99+
    2022-11-22
    箭头函数 javascript ES6
  • es6箭头方法中this指向实例分析
    这篇文章主要介绍“es6箭头方法中this指向实例分析”,在日常操作中,相信很多人在es6箭头方法中this指向实例分析问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”es6箭头方法中this指向实例分析”的疑...
    99+
    2023-07-04
  • ES6箭头函数及this指向怎么使用
    这篇文章主要介绍“ES6箭头函数及this指向怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“ES6箭头函数及this指向怎么使用”文章能帮助大家解决问题。1...
    99+
    2022-10-19
    es6 this
  • es6等号箭头指的是什么
    本文小编为大家详细介绍“es6等号箭头指的是什么”,内容详细,步骤清晰,细节处理妥当,希望这篇“es6等号箭头指的是什么”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。es6的等号箭头“=>”是指箭头函数,是...
    99+
    2023-07-04
  • ES6中箭头函数是什么
    这篇文章主要介绍ES6中箭头函数是什么,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!箭头函数ES6新增了使用箭头语法定义语法函数表达式的能力。很大程度上,箭头函数实例化的函数对象与正式的函数表达式创建的函数对象行为是...
    99+
    2023-06-14
  • php箭头号指的是什么
    这篇文章主要介绍“php箭头号指的是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“php箭头号指的是什么”文章能帮助大家解决问题。在php中,箭头号“->”被称为插入式解引用操作符,是调用...
    99+
    2023-07-05
  • es6箭头函数的概念是什么
    这篇文章主要介绍“es6箭头函数的概念是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“es6箭头函数的概念是什么”文章能帮助大家解决问题。 ...
    99+
    2022-10-19
    es6
  • php中箭头指的是什么意思
    小编给大家分享一下php中箭头指的是什么意思,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!php的箭头符号被称为箭头运算符,箭头运算符左侧是获取类的实例,右侧将指定左侧类的方法和属性并进行调用。本文操作环境:windows...
    99+
    2023-06-25
  • php的箭头是指什么意思
    本文操作环境:windows7系统、PHP7.1版、DELL G3电脑php的箭头是指什么意思php箭头的用法是什么?php中的“->”符号被称为箭头运算符,箭头运算符左侧是获取类的实例,右侧将指定左侧类的方法和属性并进行调用,本篇文...
    99+
    2018-01-12
    php 箭头
  • JS函数(普通函数,箭头函数)中this的指向问题详解
    目录普通函数箭头函数普通函数 具名普通函数、匿名普通函数,在不作为对象的属性值的情况下,其内部的 this 总是指向代码运行环境下的全局对象 ( 例如,浏览器中的 window )。...
    99+
    2022-11-13
    JS 箭头函数 this指向 JS 函数this指向 JS this 指向
  • this指向的含义是什么
    本篇内容主要讲解“this指向的含义是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“this指向的含义是什么”吧!如何讲清楚this指向?不得不说,要搞清楚this是需要一个前提的。  你首...
    99+
    2023-06-03
  • javascript中的this指向什么
    这篇文章主要介绍“javascript中的this指向什么”,在日常操作中,相信很多人在javascript中的this指向什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”...
    99+
    2022-10-19
    javascript
  • vue中的this指向有什么用
    小编给大家分享一下vue中的this指向有什么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!vue 中的this 指向?以上是...
    99+
    2022-10-19
    vue this
  • JavaScript中的箭头函数是什么
    这篇文章主要讲解了“JavaScript中的箭头函数是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript中的箭头函数是什么”吧!一、箭头...
    99+
    2022-10-19
    javascript
  • vue中computed的this指向有什么用
    这篇文章主要为大家展示了“vue中computed的this指向有什么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue中computed的this指向有什...
    99+
    2022-10-19
    vue computed this
  • javascript中this指的是什么
    这篇文章主要介绍javascript中this指的是什么,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! this的中文意思为“当前;这个”,是javasc...
    99+
    2022-10-19
    javascript this
  • es6中let指的是什么
    这篇文章主要介绍“es6中let指的是什么”,在日常操作中,相信很多人在es6中let指的是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”es6中let指的是什么”的疑惑...
    99+
    2022-10-19
    es6 let
  • es6中symbol指的是什么
    这篇文章主要介绍es6中symbol指的是什么,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! es6中的symbol是一种新的原始数据类型,用于表示独一无...
    99+
    2022-10-19
    es6 symbol
  • es6中=>指的是什么
    本篇内容主要讲解“es6中=>指的是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“es6中=>指的是什么”吧! es...
    99+
    2022-10-19
    es6
  • JavaScript this指向绑定方式及不适用情况是什么
    这篇文章主要讲解了“JavaScript this指向绑定方式及不适用情况是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript this指向绑定方式及...
    99+
    2023-07-06
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作