【前端基础知识】this指向问题，箭头函数下，各种类型的this指向问题你都会了吗？内附【课后习题】|答案评论区见|

讲this之前我们先了解一下前面讲的四个规则的优先级
new > 显式绑定 > 隐式绑定 > 默认（window）

// 显式绑定优先级高于隐式绑定
function foo() {
    console.log(this.a)
}

var obj1 = {
    a: 1,
    foo: foo
}

var obj2 = {
    a: 2,
    foo: foo
}

obj1.foo();//1
obj2.foo();//2

//进行显示绑定
obj1.foo.call(obj2);//2
obj2.foo.call(obj1);//1

// new绑定优先级高于显式绑定
function foo(b) {
    this.a = b;
}

var obj1 = {};
var bar = foo.bind(obj1);
bar(2);

console.log(obj1.a);//2
var baz = new bar(3);
//如果bind的优先级高于new，那么obj1.a会变为3，但是obj1.a依旧是2，所以new的优先级更高
console.log(obj1.a);//2

console.log(baz.a);//3

箭头函数的this指向问题中最重要的就是“箭头函数内部没有this指向，由外层函数作用域决定的”

// 箭头函数的this指向问题
var a = 0;
function foo() {
    //箭头函数内部没有this指向，由外层函数作用域决定的
    var test = () => {
        console.log(this)
    }
    test();
}

var obj = {
    a: 1,
    foo: foo
}
obj.foo();//this=>obj


function foo() {
    //箭头函数内部没有this指向，由外层函数作用域决定的
    var test = () => {
        console.log(this)
    }
    return test;
}
var obj1 = {
    a: 2,
    foo: foo
}

var obj2 = {
    a: 3,
    foo: foo
}

var obj3 = {
    a: 4,
    foo: () => {
        console.log(this)
    }
}

//默认绑定规则（独立调用对箭头函数）无效
obj1.foo()();//this=>obj1
//显式绑定 无效
var bar = foo().call(obj2);//this=>window
//隐式绑定 无效
obj3.foo();//this=>window
//new不能实例箭头函数
new obj();//报错

这是一道课后习题，大家把自己的答案留言到评论区，让我来看看你们的水平吧，之后答案也会公布在评论区。

//课后习题
var name = 'window'
var obj1 = {
    name: '1',
    fn1: function () {
        console.log(this.name)
    },
    fn2: () => console.log(this.name),
    fn3: function () {
        return function () {
            console.log(this.name)
        }
    },
    fn4: function () {
        return () => console.log(this.name)
    }
}
var obj2 = {
    name: '2'
}

obj1.fn1();
obj1.fn1.call(obj2);

obj1.fn2();
obj1.fn2.call(obj2);

obj1.fn3()();
obj1.fn3().call(obj2);
obj1.fn3.call(obj2)();

obj1.fn4()();
obj1.fn4().call(obj2);
obj1.fn4.call(obj2)();

以上就是箭头函数()=>{}下的this指向问题。
我是前端Dai，一个会将自己平时项目中常见的问题以及笔试面试的知识在CSDN与大家分享的coder，希望大家一起进步，加油。