美文网首页
ES6中箭头函数的this指向问题

ES6中箭头函数的this指向问题

作者: 前端小菜花 | 来源:发表于2018-04-11 15:45 被阅读0次

首先,我想先说明一下,我们在普通的函数中的this指向

1. 普通函数中的this 总是指向她的调用者.

2. 像 call, apply, bind这些函数是能够去改变当前的this指向的,及她的宿主对象(什么是宿主对象,嘿嘿,不要想歪,以后会有文章专门介绍)

3. 在严格模式和非严格模式下(‘use strict'), this指向是有变化的, 非严格模式下,this总向上去寻找她的宿主, 而严格模式下并不会


现在,我们再来说说箭头函数中的this

首先先了解下,什么是箭头函数. 

let a = ()=>{}

这就是最简单的箭头函数


我们再来看一个例子图1

图1

a.b()此时this.a 为undefined, 为什么呢?因为虽然当前的this是有a来调用的,但是再匿名函数中, 她里面的this指向的不是她的调用者,而是她的宿主对象,及定义改函数的上下文, 是window对象在这里.

我们再看一个例子图2

图2

这a.d()的结果是什么呢, 居然是‘123’, 不是说匿名函数中this 不是指向她的调用者,而是她的宿主对象吗, 其实并没有矛盾,再setTimeout中,她的this确实指向的是宿主对象, 而这里的this,声明环境是a, 是在a对象中声明的,所以她的this,指向的就是a.

相关文章

  • ES6新特性(更新篇)

    首先感谢Carnia帮我指出ES6箭头函数中this指向的错误,此次主要更新箭头函数中this指向问题。 ECMA...

  • 箭头函数

    1,箭头函数定义 2,Es6 中箭头函数参数与返回值简写 补充 3,箭头函数中 this 指向 注:箭头函数中的t...

  • es6、js、css、jquery、vue以及程序设计 知识点总

    es6 列举常用的es6特性。 箭头函数this的指向。 eg:箭头函数的特性 箭头函数内部没有construc...

  • es6的this的指向性问题详解(接着上一篇文章)

    我们都知道在es6中函数的扩展多了箭头函数,那么箭头函数中的this如何指向呢? 下面我们来看一看: 其实es6的...

  • 关于ES6箭头this的指向问题

    ES6 允许使用 “ 箭头 ” (=>)定义函数。 箭头函数 填 坑。 this的指向是 向上查找 非箭头函数的...

  • 关于箭头函数 this的指向问题

    ES6 允许使用 “ 箭头 ” (=>)定义函数。 箭头函数 填 坑。 this的指向是 向上查找 非箭头...

  • 关于箭头函数 this的指向问题

    ES6 允许使用 “ 箭头 ” (=>)定义函数。 箭头函数 填 坑。 this的指向是 向上查找 非箭头函数的函...

  • bug

    ES6中的this 箭头函数中,this指向的固定化,并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函...

  • 更改this的指向

    首先说明一下,对于ES6新推出的箭头函数(() => {}),是无法改变this指向的,因为箭头函数中的this在...

  • es6箭头函数

    es6新增了箭头函数, 先来看一个以前的例子 使用了箭头函数 如果是上面这样还可以简写为 this指向问题 箭头函...

网友评论

      本文标题:ES6中箭头函数的this指向问题

      本文链接:https://www.haomeiwen.com/subject/sgxzhftx.html