JS中的this指向问题（包括定时器中的this指向修改问题六、七）

 

目录

一、全局作用域中

二：闭包中指window

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

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

五：apply/call改变this的指向

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

七：bind改变this指向

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

---

https://blog.csdn.net/IMFaust/article/details/80569380

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

一、全局作用域中

  this在全局作用域中指window。

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

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

var name="xiawang",age=16;
var obj={
  name:"xiaozhang",
  obage:this.age,//this指向window

  fun:function(){
    console.log(this.name+"的年龄"+this.age+"l")//this指向obj
  }
}

console.log(obj.obage);//16
console.log(obj.fun())//xiaozhang的年龄undefined（obj中未定义这个属性）
 

二：闭包中指window

https://www.cnblogs.com/Renyi-Fan/p/9026943.html

var name='The Window';
     var obj={
       name:'my obj',
       get:function(){
         //这里的this指的是对象，这里为obj
         var self=this
          return function(){
            //闭包里的this指的是window
             return this.name;//return self.name--my obj
           }
         }
       }
 
       alert(obj.get()()) //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)
    }
}

但是平时很多场景下，都需要修改this的指向。这里总结了几种：

1、最常用的方法：在外部函数中将this存为一个变量，回调函数中使用该变量，而不是直接使用this。

 1 var name = 'my name is window';
 2 var obj = {
 3     name: 'my name is obj',
 4     fn: function () {
 5         var that = this;
 6         var timer = null;
 7         clearInterval(timer);
 8         timer = setInterval(function () {
 9             console.log(that.name);   //my name is obj
10         }, 1000)
11     }
12 }

在fn中加了var that = this; 回调函数中使用that代替this即可。这种方法最常见，使用也最广泛。

七：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指向

https://www.cnblogs.com/443855539-wind/p/6480673.html

Javascript定时器中的this指向
 var name = 'my name is window';
  var obj = {
     name: 'my name is obj',
     fn: function () {
         var timer = null;
          clearInterval(timer);
          timer=setInterval(function () {
             console.log(this.name);   //my name is obj
         }.bind(this), 1000)//bind(this)中的this指向调用外部函数fn的对象
     }
 }
 obj.fn();

 var name = 'my name is window';
  var obj = {
     name: 'my name is obj',
     
     timer:setInterval(function () {
             console.log(this.name);   //my name is window
         }.bind(this), 1000)//bind（this）中的this指向timer,是window对象的属性
     
 }
 obj.timer;

 

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

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

 var id = 21;

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

 1 var name = 'my name is window';
 2 var obj = {
 3     name: 'my name is obj',
 4     fn: function () {
 5         var timer = null;
 6         clearInterval(timer);
 7         timer = setInterval(() => {
 8             console.log(this.name);  //my name is obj
 9         }, 1000)
10     }
11 }

箭头函数没有自己的this，它的this继承自外部函数的作用域。所以，在该例中，定时器回调函数中的this，是继承了fn的this。当然箭头函数也有兼容问题，要是兼容低版本ie，需要使用babel编译，并且引入es5-shim.js才可以。