JS中this的指向问题（全）

this关键字在js中的指向问题不管是工作还是面试中都会经常遇到，所以在此对它进行一下总结。

一、全局作用域中

  this在全局作用域中指window。

    //全局作用域中
    console.log(this)//window
    a =1;
    console.log(this.a) //相当于window.a 1

    //普通函数中
    function fn(){
        console.log(this)
    }
    fn()//window

二：闭包中指window

    function fn(){
        function fn2(){
            console.log(this)
        }
        return fn2
    }
    fn()()   //window

三：函数调用模式：谁调用就指谁

这里obj.fn()是obj去调用fn，而obj.name=”b”,所以this.name=”b”;
而var fn=obj.fn的时候，fn是window.fn，因此fn()的结果是”a”.
注意：this指向的是上一级调用它的对象，比如obj.fn()与window.obj.fn()都是输出b.

    var name="a"
    var obj ={
        name:'b',
        fn:function () {
            console.log(this.name)
        }
    }
    obj.fn() //b
    var fn=obj.fn
    fn()     //a

四：构造函数中，this指实例对象。

    function Person(name,age) {
        this.name=name;
        this.age=age;
    }
    Person.prototype.sayHi=function () {
        console.log('I am '+this.name+',I am '+this.age+' years old.')
    }
    var p1=new Person('张三',20)
    p1.sayHi() //I am 张三,I am 20 years old.

五：apply/call改变this的指向

参考博客：https://blog.csdn.net/ganyingxie123456/article/details/70855586

六：定时函数中：this指向window

var name = 'window';
var obj = {
    name: 'obj',
    fn: function () {
        var timer = null;
        clearInterval(timer);
        timer = setInterval(function () {
            console.log(this.name);   //window
        }, 1000)
    }
}

七：bind改变this指向

var name = 'window';
var obj = {
    name: 'obj',
    fn: function () {
        var timer = null;
        clearInterval(timer);
        timer = setInterval(function () {
            console.log(this.name);   //obj
        }.bind(this), 1000)
    }
}

//bind()的作用类似call和apply，都是修改this指向。但是call和apply是修改this指向后函数会立即执行，
//而bind则是返回一个新的函数，它会创建一个与原来函数主体相同的新函数，新函数中的this指向传入的对象。
//也因此call/apply不适用于定时函数改变this指向

八：ES6箭头函数：函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

  function foo() {
   setTimeout(() => {
     console.log('id:', this.id);
   }, 100);
 }

 var id = 21;

 foo.call({ id: 42 });
 // id: 42