彻底理解javascript中this指向大全

在学习javascript过程中，难免会遇到this指向问题而掉入很多坑，以下就谈谈学习过程中遇到的this指向问题进行归类总结，希望可以帮到更多同学弃坑，哈哈。

一、全局作用域或者纯函数中this指向全局对象window。

//在脚本直接打印
console.log(this) //window

//function声明函数
function foo () {console.log(this)}
foo() //window

//function声明函数赋给变量
var bar = function () {console.log(this)}
bar() //window

//立即执行函数
(function () {console.log(this)})(); //window

//在setTimeout或setInterval 中
setTimeout(function(){
    console.log(this); //window
}, 1000)
setInterval(function(){
    console.log(this); //window
}, 1000)

二、谁调用了方法this指向谁

//对象方法调用
var person = {
    name: "老王",
    fighting: function () {console.log(this)}
}
person.fighting() // person

//事件绑定
var oBox = document.getElementById("box")
oBox.onclick = function () {
    console.log(this) // oBox
}

//事件监听
var oBox = document.getElementById("box")
oBox.addEventListener('click', function () {
   console.log(this) //oBox
})

三、在构造函数中this指向构造函数的实例

//使用new
function Person (name) {
      this.name = name;
      console.log(this); //people
  }
var people = new Person('老王')
//这里new改变了this指向，将this由window指向Person的实例对象people

四、call/apply中this指向绑定的对象

//this指向绑定的对象，即call或apply括号里的对象
var name = 'this is window'; //定义window的name属性,看this.name是否会调用到 
var person1 = { 
 name : 'this is 老赵', 
 getName:function(){ 
 console.log(this); //person2 
 console.log(this.name); //this is 隔壁老王
 } 
}
var person2 = { 
 name: 'this is 隔壁老王'
}
testObj1.getName.apply(person2); 
testObj1.getName.call(person2);

希望可以帮到大家，希望掉坑的同学可以早日脱离苦海，哈哈哈。