JS中不同情况下的this指向2

5.箭头函数

箭头函数的话，用得好的会很爽，如果理不清this指向的话有时候会很痛苦估计大家看过不少关于箭头函数this指向的文章，总结就一句话：箭头函数的this指向它所在的上下文

到底什么是上下文，理解了好久也没有理解透，大家是不是这样，不要想那么多，其实上下文的意思真的就仅仅只是字面意思，接下来用代码带大家理解

        console.log(this);//window
        let fn = () => {
            console.log(this);//window
        }
        console.log(this);//window

这段代码开起来有简单，不要嗤之以鼻，希望带大家进入感觉
再来一段

        function Create() {
            this.name = '孙悟空';
            this.skill = '七十二变';
            console.log(this);//obj
            let fn1 = () => {
                console.log(this);//obj
            }
            console.log(this);//obj
            let fn2 = function () {
                console.log(this);//window
            }
            fn1();
            fn2();
        }
        let obj = new Create();

首先分析下打印结果
箭头函数上面和下面的打印，因为实在构造函数里面，上一篇文章提到了，构造函数的this指向被它创造出来的那个对象，所以这两个打印直接打印出的是对象obj；
fn1中打印结果，因为箭头函数中的this指向的是它所处的上下文，这时是处于构造函数中，所以它的this指向构造函数创造出来的对象obj；
fn2中的打印结果，因为函数是window调用，所以它的this指向window；

这里注意两点

1.以上fn1和fn2中的打印充分体现了箭头函数与普通函数的区别，普通函数是最后是谁调用的就指向谁

2.箭头函数的this指向始终指向它的上下文，也就说它申明时在的地方的this指向是谁就是谁，如果还是不能理解，你就在像上面代码一样，在箭头函数的上面和下面分别加一个打印，上面的打印、下面的打印和箭头函数中的打印结果一定会一模一样

再来一段代码加深理解

        class Created {
            constructor(m, n) {
                this.name = m;
                this.skill = n;
            }
            doLog() {
                console.log(this);//obj
                let fn2 = () => {
                    console.log(this);//obj
                }
                console.log(this);//obj
            }
        }
        let obj = new Created('唐僧', '念经');
        obj.doLog();

三处的this打印相同都是指向实例

所以为什么在vue和react里面要比较多的适用箭头函数，因为我们希望指向的this是实例

6.改变this指向

看一个简单的案例

        let obj = {};
        function Create(a, b) {
            this.name = a;
            this.skill = b;
        }
        Create.call(obj, '唐僧', '念经');
        console.log(obj);

用法很简单，就是把原来的this换成自己需要指定的对象。

其他的还有apply、bind，用法也差不多；
区别是apply把其他参数融合在一个数组里面；bind的话不会立即执行，而是返回一个新函数

由于字数限制，其他的this指向写在另一篇文章中
JS中不同情况下的this指向1 #掘金文章# juejin.cn/post/686299…