js函数中的this指向

写代码的时候遇到这个问题了，在这里复习一下

2023.3.09：忽然发现写的有点绕口，再总结一下，普通函数this指向调用他的那个对象（动态的，this不是一定的），箭头函数this指向其父级作用域上下文（静态的，定义时就确定）
大家可以自己试一试，有问题随时交流

1. 非箭头函数
   非箭头函数的this指向比较好理解，就是调用这个函数的对象，举个栗子：

var obj = {
    foo: {
        bar: 3,
        foo:{
            bar: 4,
            foo: function a() { console.log(this.bar) },
        },
    },
    bar: 2
};

var foo = obj.foo.foo.foo;
var bar = 1;

obj.foo.foo.foo(); //由obj.foo.foo调用，所以此时this指向它，所以打印的this.a为4
foo(); //由window调用，所以this指向window，打印1

2. 箭头函数
   箭头函数的this指向，网上看到有一种说话是：箭头函数的this指向定义他的对象，这样理解是错误的。。。
   严格来讲应该是：箭头函数的this指向定义它的上下文对象，更通俗一点来说就是指向定义箭头函数的那个形成函数作用域的函数所在对象（个人理解，有疑问的话可以在评论区讨论一下）
   举个栗子

var obj = {
    foo: {
        bar: 3,
        foo() {
            var bar = 4;
            return () => { console.log(this.bar) };
        },
    },
    bar: 2
};

var foo = obj.foo.foo;
var bar = 1;
obj.foo.foo()() // 此时this指向obj.foo对象，打印3
foo()()  // 此时this指向window，打印1

需要注意的是，执行函数的时候箭头函数才被定义，所以下面这个栗子打印结果才会不一样
下面这段代码最后打印出来都是3

var obj = {
    foo: {
        bar: 3,
        foo() {
            var bar = 4;
            return () => { console.log(this.bar) };
        },
    },
    bar: 2
};

var foo = obj.foo.foo(); // 改了这里
var bar = 1;
obj.foo.foo()() // 3
foo() // 3

最后，看一下把箭头函数换成普通函数的写法

var obj = {
    foo: {
        bar: 3,
        foo() {
            var bar = 4;
            return function() { console.log(this.bar) };
        },
    },
    bar: 2
};

var foo = obj.foo.foo;
var bar = 1;

obj.foo.foo()() // 1
foo()() // 1

总之就是，使用箭头函数的this需要考虑它被定义的时候所在函数作用域的this，使用普通函数只用看谁调用了它。

热门相关：地球第一剑   大神你人设崩了   寂静王冠   天启预报   薄先生，情不由己