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

ES6箭头函数中的this指向

作者: 知名大学士 | 来源:发表于2020-03-13 22:56 被阅读0次

箭头函数中的this指向与一般function定义的函数的this不同,普通function定义的函数的this指向的是 调用者且可以改变,而箭头函数的this的指向与调用者无关,在定义时确定且不可改变,

1. 我们来看下面这个例子:

function定义的函数:
var x = 11;
var obj = {
    x: 22,
    say: function() {
        console.log(this.x)
    }
}
obj.say();
//console.log输出的是22

一般的定义函数跟我们的理解是一样的,运行的时候决定this的指向,我们可以知道当运行obj.say()时候,obj是函数的调用者,所以this指向的是obj对象。

箭头函数:
var x = 11;
var obj = {
  x: 22,
  say: () => {
    console.log(this.x);
  }
}
obj.say();
//输出的值为11

这样就非常奇怪了如果按照之前function定义应该输出的是22,而此时输出了11,那么如何解释ES6中箭头函数中的this是定义时的绑定呢?

2. 如何确定箭头函数this的指向谁?

一句话:扒掉外层的箭头函数,此时的this 指向谁,那么箭头函数 this 就永远指向谁。
我们还是以这段代码为例,此时函数的调用者为obj,我们拔掉这层皮,此时this实际指向Window,也就是this.x实际为Window.x,也就是我们所定义的var x = 11;中的x,所以输出结果为11而不是22

var x = 11;
var obj = {
  x: 22,
  say: () => {
    console.log(this.x);
  }
}
obj.say();
//输出的值为11

相关文章

  • 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--箭头函数

    概念:使用=>来定义,function(){}等于()=>{} es6的箭头函数是没有this指向,箭头函数内部t...

网友评论

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

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