首页 > web前端 > 前端问答 > es6箭头方法中this的指向是什么

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

青灯夜游
发布: 2022-11-21 17:55:45
原创
2196 人浏览过

在es6中,箭头函数体内的this对象,就是定义该函数时所在的作用域指向的对象。箭头函数中this的指向就是上下文里对象this指向,偶尔没有上下文对象,this就指向window;即使是call、apply、bind等方法也不能改变箭头函数this的指向。

es6箭头方法中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的指向是什么的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板