亲宝软件园·资讯

展开

JS 箭头函数的this指向 JS 箭头函数的this指向详解

Blacktdfj 人气:0
想了解JS 箭头函数的this指向详解的相关内容吗,Blacktdfj在本文为您仔细讲解JS 箭头函数的this指向的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:JS,箭头函数,JS,this指向,下面大家一起来学习吧。

箭头函数是ES6中的新增特性,他没有自己的this,其this指向从外层代码库继承。

使用箭头函数时要注意一下几点:

PS: 实际开发环境中,React可以使用箭头函数解决一个经典问题,这里不细说了。

给一个例子看一下箭头函数的实际情况:

const obj = {
  fun1: function () {
    console.log(this);
    return () => {
      console.log(this);
    }
  },
  fun2: function () {
    return function () {
      console.log(this);
      return () => {
        console.log(this);
      }
    }
  },
  fun3: () => {
    console.log(this);
  }
}

let f1 = obj.fun1(); // obj
f1() // obj

let f2 = obj.fun2();
let f2_2 = f2(); // window
f2_2() // window

obj.fun3(); // window

针对每行输出的分析:

let f1 = obj.fun1() // obj

这里明显进行的是隐式绑定,fun1的this指向obj

f1() // obj

这里执行了上一行返回出来的箭头函数,我们分析上一层代码库的this指向obj,所以直接继承,箭头函数this指向

objlet f2 =obj.fun2()

fun2第一层执行的时候没有打印代码,而是返回了一个函数出来,赋值给f2,并且这里发生了绑定丢失,this指向由原来的obj指向了window(发生了赋值)

let f2_2 = f2() // window

f2()执行了,打印出了改绑后的this——window,然后将箭头函数返回出来,赋值给f2_2f

2_2() // window

执行打印出window,刚才的外层代码的this不是指向了window吗,所以这里就继承了window作为this

obj.fun3() // window

在字面量中直接定义的箭头函数无法继承该对象的this,而是往外再找一层,就找到了window,因为字面量对象无法形成自己的一层作用域,但是构造函数可以哦。

那我们怎么操纵箭头函数的this指向呢:

答案是修改外层代码库的this指向,在箭头函数定义之前就给this修改方向即可。

在以上代码的基础上:

let fun4 = f2.bind(obj)() // obj
fun4() // obj

我们发现修改的是第二层方法的this指向,并且箭头函数也继承了下来。

  fun2: function () {
    return function () { // 我们修改的是这里的this
      console.log(this);
      return () => { // 然后这里定义的时候就继承啦
        console.log(this);
      }
    }
  },

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注的更多内容!

加载全部内容

相关教程
猜你喜欢
用户评论