详解JavaScript中的this指向

this是什么？

一些面向对象语言中 this 表示当前对象的一个引用，JavaScript中的this指向函数运行时所在的对象

也就是说this指向最后一个调用他的那个对象

1. 直接使用this

直接使用时，this代表全局对象，在浏览器中全局对象就是window

这里没有调用this的对象，那么就是全局对象windows

const a = this
console.log(a)  // window

2. 纯粹函数调用中的this

这时this表示的是函数所属者，也就是window对象

因为没有myFunction前面没有对象进行调用所以就是全局对象windows

  function myFunction() {
      return this;
  }
  console.log(myFunction())  // window

注意：严格模式下this表示undefined

3. 方法中的this

在对象方法中，this表示方法所属的对象，下面this表示的就是a这个对象

这里对象a调用了like()，所以this指向对象a

        let a = {
            age: 18,
            name: "阿花",
            like: function() {
                return this.name + "喜欢滑板"
            }
        }
        console.log(a.like())     // 阿花喜欢滑板

4. 事件绑定中的this

在绑定事件中，this 表示事件所属的元素

假如在html元素上绑定了一个点击事件，那么这个点击事件中this指向的就是绑定事件的html元素

    <div style="background-color: red;" onclick="this.style= 'background-color : green' ">
        点我变色
    </div>

5. 构造函数中的this

生成新的构造函数时，this表示这个新的对象。

这里最后一个调用a的是obj1，所以this指向的是obj1

  function obj() {
      this.a = 1;
  }

  var obj1 = new obj();
  obj1.a = 3
  console.log(obj1.a)   // 3

6. apply，call 调用

在 JavaScript 中函数也属于对象，有方法apply 和 call ，可以切换函数执行的上下文环境（context），即 this 绑定的对象。

var a = {
  name : "阿花",
  age : 18,
  fn : function() {
    return this.name + "今年" + this.age + "岁了";
  }
}
var b = {
  name:"张三",
  age: 21,
}
a.fn.call(b);  // 张三今年21岁了

这时this表示的是call的参数，也就是b对象。

7. setTimeout和setInterval

setTimeout和setInterval中的this默认指向window

因为setTimeOut和setInterval属于宏任务，执行时和同步任务分离，即使设置延迟时间为0，回调也会等待同步任务和微任务执行完成后再执行，那时this没有指向，默认指向window

const a = {
    name: 'ahua',
    fn:function(){
        console.log(this)
    }
}
a.fn()  // a
setTimeout(a.fn,100) // window

解决办法：可以将this存在变量中，然后通过变量去获取当时的执行环境下的this，this就不会因为执行环境的改变而改变了

function obj () {
    const that = this
    this.fn = function(){
        console.log(that)
    }
}
var obj1 = new obj()
obj1.fn()  // obj
setTimeout(obj1.fn,100) // obj

也可以用bind，让this指向原来的构造函数obj，因为bind方法会创建一个新函数，并将第一个参数作为新函数运行时的this，call不能是因为调用后会立即执行

8. 箭头函数中的this

它没有自己的this对象，内部的this是函数定义时上层作用域对象中的this

function obj() {
    this.name = '阿花'
    setTimeout(() => {
        console.log(this.name);
    }, 100);
}
var name = 'ahua';
obj() // 阿花

本来执行setTimeout后this指向应该是window，但是箭头函数中this指向定义时的上层作用域，也就是obj对象

因为箭头函数this固化，所以比较合适做回调函数