您好,欢迎访问一九零五行业门户网

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

在es6中,箭头函数体内的this对象,就是定义该函数时所在的作用域指向的对象。箭头函数中this的指向就是上下文里对象this指向,偶尔没有上下文对象,this就指向window;即使是call、apply、bind等方法也不能改变箭头函数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();// 输出avar b = { name: 'b'}a.sayhello.call(b);//输出ba.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); //还是asayhello.call(); //还是a
ok,这样就做到了永远指向a对象了,我们再根据“该函数所在的作用域指向的对象”来分析一下:
该函数所在的作用域:箭头函数s 所在的作用域是sayhello,因为sayhello是一个函数。
作用域指向的对象:a.sayhello指向的对象是a。
所以箭头函数s 中this就是指向a啦 ~~
----------------finish-------------
最后是使用箭头函数其他几点需要注意的地方
不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
不可以使用yield命令,因此箭头函数不能用作 generator 函数。
【推荐学习:javascript视频教程】
以上就是es6箭头方法中this的指向是什么的详细内容。
其它类似信息

推荐信息