js中普通函数和箭头函数的this指向问题

js中普通函数和箭头函数的this指向问题

this指向问题，一直是困扰大家的难题，也是面试中常问的考题，今天就带领大家来攻克难关！（有问题欢迎大家批评指正）

1.普通函数中的this指向

普通函数中this，是当我们调用函数的时候确定的，调用方式的不同决定了this的指向不同，一般指向我们函数的调用者。

• 1.普通函数

//1.普通函数
    function fn() {
      console.log('普通函数的this' + this);
    }
    fn();//window   实际上，这里是window.fn();谁调用，this就指向谁

普通函数的调用，其实是window.fn（），所以这里的this指向window。

• 2对象的方法

//2.对象的方法
    var o = {
      sayHi: function () {
        console.log('对象的方法' + this); //object  this指向的是对象 o
      }
    }
    o.sayHi();

对象中方法的调用，是o.sayHi（），因此对象中的方法，this指向该方法所属的对象。

• 3构造函数

//3.构造函数  this指向实例对象ldh  
    function Star() {
      Star.prototype.sing = function () { }//原型对象中的this也是指向实例对象
    }
    var ldh = newStar();

构造函数和原型对象中的方法，它的调用者是实例对象（这里是ldh），因此在构造函数和原型对象中的方法，this都指向实例对象。

• 4绑定事件函数

 //4.绑定事件函数
    var btn = document.querySelector('button');
    btn.onclick = function () {
      console.log('绑定事件的this' + this); //指向btn 也是指向函数的调用者
    }

绑定事件的函数，同样遵循谁调用，this指向谁的原则，在这里是btn绑定了点击事件，因此这里的this指向函数的调用者btn。

• 5定时器函数

//5.定时器函数  this指向window 实际上为window. setTimeout(),也是指向函数的调用者
    setTimeout(function () {
      console.log('定时器的this' + this);
    }, 1000);

定时器函数的调用，实际上是window. setTimeout()，因此定时器函数的this指向window。

• 6立即执行函数
  立即执行函数相当于第一条普通函数，只是它不需要手动调用，因此它的this也指向window。

//6.立即执行函数  this指向window  相当于普通函数，只是不需要手动调用
    (function () {
      console.log('立即执行函数的this' + this);
    })();

调用方式	this指向
普通函数调用	window
构造函数调用	实例对象
对象方法调用	该方法所属对象
事件绑定方法	绑定事件的对象
定时器函数	window
立即执行函数	window

2.箭头函数的this指向

箭头函数不绑定this，没有自己的this关键字，如果在箭头函数中使用this，则指向箭头函数定义位置的this，下面分析了箭头函数定义在函数中、对象中、对象的方法中、定时器中的情况。

1. 箭头函数定义在函数中
   
   当箭头函数定义在函数中，函数中的this就是箭头函数的this，那么谁调用这个函数，箭头函数的this就指向谁。
2. 箭头函数定义在对象中
   
   当箭头函数定义在对象中，对象中的this就是箭头函数的this，因为对象没有自己的作用域，因此obj对象里的this指向window，所以箭头函数的this指向window
3. 箭头函数定义在对象的方法中
   
   箭头函数定义在对象的方法中，这类情况和上一种不同，对象中的方法有自己的作用域，因此对象方法中的this就是箭头函数的this。在上面我们说过，对象方法中的this指向该方法所属的对象，因此箭头函数this指向obj。
4. 箭头函数定义在定时器中
   
   箭头函数定义在定时器中，this指向箭头函数定义的位置，图中代码指向user实例对象。