定义this的函数被作为参数传入,那这个this是指哪??

比如像这个,一个普通函数,一个箭头函数,被当作参数传入fn方法,那这俩函数的this指哪,怎么分析?顺便问下到底箭头函数this指向的定义是啥意思呀?什么叫指向父级作用域的this,求解释 不懂~

img


 比如像这个,一个普通函数,一个箭头函数,被当作参数传入fn方法,
 那这俩函数的this指哪,怎么分析?
 顺便问下到底箭头函数this指向的定义是啥意思呀?
 什么叫指向父级作用域的this,求解释 不懂~

<script>
    var name = "window";
    var fn = function(a){
        var name = "fn";
        a();
    }
    
    var fun1 = function(){
        console.log("@@",this.name);
    }
    
    var fun2 = () => {
        console.log("@@@",this.name);
    }
    
    let ooo = {
        name: "ooo",
         fn1 : function(){ 
            fn(function(){ 
                console.log("@@",this.name);
            })
        
            fn(() => {
                console.log("@@@",this.name);
            })
        },
        
        fn2 : function(){
            fn(fun1);
        
            fn(fun2);
        }
    }
    ooo.fn1();
    ooo.fn2();

 </script>

我对这种语法也不是很理解,但是就结果来说,如你所说,带箭头的回调函数里面的this指针的变量是第一父级的,而普通的回调函数是最顶层的
我在里面加了个fn2调用,结果都是一样。所以这可能就是带箭头语法的特殊性。

箭头函数的this指向比较特殊,指向父级作用域的this。这个父级作用域就是此函数外层的那个this执行,有点作用域提升的意思。
详细的关于this指向的问题建议看这位佬的文章:https://blog.csdn.net/MiemieWan/article/details/110471580

在函数内部,this指向取决于函数的调用方式。

代码中第一次传给fn()的参数是普通函数,所以最终this指向取决于fn()内部是怎么调用这个函数参数的。在fn()内部,是通过a()来调用的,这是a并没有关联其它上下文,所以是在全局执行环境调用的,此时this指向顶层对象window或global。

箭头函数中的this继承自外层词法作用域。

代码中第二次传给fn()的参数是箭头函数,箭头函数中的this继承自其外层词法作用域,跟这个函数最终在哪里被调用没有关系。代码中的箭头函数外层词法作用域就是fn1(),而fn1()是一个普通函数,它的this取决它的调用方式,fn1是作用ooo对象方法被调用的,所以this指向ooo,所以箭头函数中的this也同样指向ooo。

目前也在学习this知识点,以下是一些理解:

JavaScript中的this是在运行时绑定的。在不同的执行上下文中,this指向是不同的:

  • 在全局上下文,this指向顶层对象(window/global)。
  • 在函数上下文,this指向取决于函数调用方式:在全局执行环境调用函数时,this指向顶层对象(window/global);作为对象方法被调用时,this指向该对象。在es5中,通过apply()、call()、bind()在运行时改变this指向,apply()、call()仅对当前调用生效,bind()是固定绑定this,且无法修改。
  • 构造函数中的this指向正在创建的对象。
  • 箭头函数中的this继承自外层词法作用域。