JS中关于this指向问题

当我们使用JavaScript开发的时候，有时候会遇到this的指向的问题。而且在面试题的时候，也会经常问到这个知识点，比如call，bind的this，箭头函数的this。今天就来讲讲这个this指向的问题，先记住最主要的一句：哪个对象调用函数，函数里面的this就指向这个对象。
这里先做个思维大纲：
1.作为对象的属性调用–this指向这个对象
2.作为普通函数被调用–this总是指向全局对象（浏览器中通常为window）；在严格模式下：this指向undefined
3.作为构造器调用：通常情况下，this指向被构造函数返回的实例。
4：call与aplly的调用：作用–动态改变·this指向，使用一个指定的this值和单独给出一个或者多个参数来调用一个函数。
本质–允许不同对象分配和调用属于一个对象的函数或方法
call与apply的区别：call： 改变this指向然后一一传多个参数；apply：改变this的指向然后传多个参数的数组。
5：箭头函数：箭头函数不会创建自己的this，但是会沿着自己的作用域链的上一层继承this。

1.作为对象的方法调用

函数作为对象方法被调用时，this指向该对象

  var obj = {
            a:'wzw',

            name:function(){
                console.log(this);  //obj该对象
                console.log(this === obj); // true
                console.log(this.a);    //wzw
            }
        }

        obj.name();

2.作为普通函数调用

函数不作为对象的属性被调用，而是以普通函数的方式，this总是指向全局对象（在浏览器中，通常是Window对象）

  var a = 'lebron'
        var obj = {
            a: 'wzw',

            name: function () {
                console.log(this.a);
            }
        }

        var fn = obj.name;
        fn();    //lebron

3.作为构造器使用

大部分Js中的函数都可以成为构造器，它们与普通函数没什么不同。主要区别在于：被调用的方式，当new运算符调用函数时，总是返回一个对象，this通常也指向这个对象。

  var myName = function () {
            this.name = 'wzw';
        }
        
        var obj = new myName();
        obj.name; // wzw

4.call与apply

跟普通的函数调用相比，用call和apply可以动态的改变函数的this指向。

var obj1 = {
            a: 1,
            getName: function (num = '') {
                return this.a + num;
            }
        };

        var obj2 = {
            a: 2,
        };
        
        console.log(obj1.getName()); // 1
        console.log(obj1.getName.call(obj2, 3));  //传进去的是一个3 3+2=5
        console.log(obj1.getName.apply(obj2, [3]));  //3+2=5

不管是call还是apply 都可以理解为可以理解成在 obj2的作用域下调用了 obj1.getName()函数。只是传参数的方式不同–call是一个个参数传，apply是以一个数组传。

扩展bind方法：
bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用 —— MDN。

function f(y, z) {
            return this.x + y + z;
        }
        var m = f.bind({ x: 1 }, 2);
        console.log(m(3));   //6

这里bind方法会把它的第一个实参绑定给f函数体内的this，所以这里的this即指向{x : 1}对象，从第二个参数起，会依次传递给原始函数，这里的第二个参数2，即是f函数的y参数，最后调用m(3)的时候，这里的3便是最后一个参数z了，所以执行结果为1 + 2 + 3 = 6

5.箭头函数

箭头函数不会创建自己的this，它只会从自己的作用域链的上一层继承this。

this.a = 2;
var obj = {
    a: 1,
    getVal: () => {
        console.log(this.a);
    }
}

obj.getVal(); // 2

6.在延时器与计时器里的this指向

  var a=1;
        var time = setInterval(function(){
            var a=2;
            console.log(this.a) //1
        },1000)

代码里面可以看到a指向的是window，所以输出的是1