四川盐亭网站制作公司

es6箭头方法中this指向实例分析

这篇文章主要介绍“es6箭头方法中this指向实例分析”，在日常操作中，相信很多人在es6箭头方法中this指向实例分析问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”es6箭头方法中this指向实例分析”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

创新互联公司为企业提供：品牌网站建设、网络营销策划、成都微信小程序、营销型网站建设和网站运营托管，一站式网络营销整体服务。实现不断获取潜在客户之核心目标，建立了企业专属的“营销型网站建设”，就用不着再为了获取潜在客户而苦恼，相反，客户会主动找您，生意就找上门来了！

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

箭头函数相信大家在日常开发中用到的地方非常之多，因为它很简洁，可读性强，但是它最大的好处，其实是解决了匿名函数的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 函数。

到此，关于“es6箭头方法中this指向实例分析”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！


标题名称：es6箭头方法中this指向实例分析
文章转载：http://scyanting.com/article/ggdhhh.html

其他资讯