this是什么以及如何判断它

总结下对this的学习与理解

转眼前端的学习已有一年，日常写代码中经常碰到this这个东西。特别是在用vue的时候，this还是有点多的，哈哈。
在翻阅了一部分书籍和一堆大佬的博客后，决定总结一下这些东西，下面谈谈我对this的一些理解，如果有错误，欢迎大家批评指正。如果可以给你带来一些帮助，那是再好不过的了。

1.什么是this

this是在运行时基于函数的执行环境绑定的，它的上下文取决于函数调用时的各种条件。
当一个函数被调用时，会创建一个活动记录(有时候也称执行上下文)。这个记录会包含函数在哪里被调用，函数的调用方法、出今年入的参数等信息。this就是记录其中一个属性，会在函数执行的过程中用到 --你不知道的JavaScript(上)

this实际上是在函数被调用时发生的绑定

---

2 如何判断this绑定的对象是什么

var name = 'window'
const obj1 = {
  
  name:'obj1',
  fn(){
      console.log(this.name)      
  }
}
obj1.fn()//'obj1'

var name = 'window'
const obj1 = {
  
  name:'obj1',
  fn(){
//    "use strict"
   
      console.log(this.name)
       
  }
  
}
const obj2 = {
  name:'obj2',
  fn2:obj1.fn
}
obj2.fn2()//'obj2'
obj1.fn()//'obj1'

#this的绑定与函数声明的位置没有声明的位置没有任何关系，只取决于函数的调用方式
#一般来说，谁最终调用了函数，那么它就是this的绑定对象。
那在全局下调用函数，this的绑定对象也就是全局对象

var name = 'window'
function fn(){
 
  console.log(this.name)
}
fn()//'window'

下面这种情况为什么不是输出window呢？

var name = 'window'
function fn(){
 this.name = 'fn'
  console.log(this.name)
}
fn()// 'fn'

也是因为在全局调用这个函数的时候，this.name === window.name就把之前的值给覆盖了，所以输出就是 'fn'。

3. 那么如何判断最终是谁调用了函数

函数调用的形式

var name = 'window'
const obj1 = {
  
  name:'obj1',
  fn(){
//    "use strict"
   
      console.log(this.name)
       
  }
  
}
const obj2 = {
  name:'obj2',
  fn2:obj1.fn
}
obj2.fn2()//'obj2'
obj1.fn()//'obj1'

还是按照上面的代码为例，这里

obj2.fn2()//完全等价于下面的
obj2.fn2.call(obj2)

obj1.fn() 等于 obj1.fn.call(obj1)

同样的

var name = 'window'
function fn(){
 this.name = 'fn'
  console.log(this.name)
}
fn() 等于 fn.call()

这里面call不传入参数，既为undefined。在非严格模式下传入undefined和null，都默认是window。

 
var name = 'window'
function fn(){
  'use strict' //为函数开启严格模式
 this.name = 'fn'
  console.log(this.name)
}
fn() //则会报错,这也同样说明了函数在js内部调用的形式

改改前面的代码

var name = 'window'
const obj1 = {
  
  name:'obj1',
  fn(){
        this.name = 'fn'
      function inFn(){
        console.log(this.name)
      }
       inFn()
  }
  
}

obj1.fn()//'window '

上面的inFn()也等同于inFn.call()，在全局调用它，自然也就是输出window了。

关于箭头函数和定时器

首先箭头函数是没有this的 ，它的作用域是和父级的上下文绑定在一起的

var name = 'window'
const obj1 = {
  
  name:'obj1',
  fn(){
        this.name = 'fn'
     inFn= ()=>{
        console.log(this.name)
      }
       inFn()
  }
  
}

obj1.fn()//'fn'

它的this就是上一层第一个包裹它的普通函数的this
所以用call/bind/apply调用箭头函数的时候，是没有效果的。

var name = 'window'
const obj1 = {
  
  name:'obj1',
  fn(){
        this.name = 'fn'
     inFn= ()=>{
        console.log(this.name)
      }
       inFn()
  }
  
}

obj1.fn.call(window)//'fn'

这也是为什么在es6后，诸如_this=this这类写越来越少的原因

定时器对this的影响

setTimeout()调用的代码运行在与所在函数完全分离的执行环境上。这会导致，这些代码中包含的 this 关键字在非严格模式会指向 window (或全局)对象，严格模式下为 undefined，这和所期望的this的值是不一样的。--MDN

备注：在严格模式下，setTimeout( )的回调函数里面的this仍然默认指向window对象， 并不是undefined

this.name = 'window'
function Foo(){
this.name = 'Foo'
  this.fn = function(){
    console.log(this.name)
  }
  this.timer = function(){
    setTimeout(this.fn)
  }
}
var obj = new Foo()

obj.timer()//'window'

可以使用call/apply/bind调用改变this绑定对象。

this.name = 'window'
function Foo(){
this.name = 'Foo'
  this.fn = function(){
    console.log(this.name)
  }
  this.timer = function(){
    setTimeout(this.fn.call(this))
  }
}
var obj = new Foo()

obj.timer()//'Foo'

还有箭头函数

this.name = 'window'

const obj = {
  name:'obj',
  fn(){
    console.log(1)
    setTimeout(()=>{
      console.log(this.name)
    },1000)
  }
}

obj.fn()//'obj'

也就是说从优先级上说，有箭头函数和定时器就不判断是否由call/apply/bind调用

new对this的影响

new的优先级很高，在没有定时器影响的情况下是最高的

this.name = 'window'
function Foo(){
this.name = 'Foo'
  this.fn = function(){
    console.log(this.name)
  }
  this.timer = function(){
    setTimeout(this.fn)
  }
}
var obj = new Foo()

obj.timer() //'window'定时器

只要是由new调用的，就绑定到新创建的对象，其他情况似乎都无法再改变this绑定的对象。

1.箭头函数

function Foo(){
  this.name='Foo'
  this.fn = ()=>{
    console.log(this.name)
  }
  
}

var foo = new Foo()
this.name = 'window'  //设置一下window.name的值      
foo.fn()    //'Foo' 输出的是实例变量
console.log(this.name)//'window'  并没有改变window.name的值 

2.call/bind/apply

this.name = 'window'
function Foo(){
  this.name='Foo'
  this.fn = ()=>{
    console.log(this.name)
  }
  
}

var foo = new Foo()

foo.fn.call(window)//'Foo'  
const tes = foo.fn.bind(window)
tes()  //'Foo'

##也就是说判断一个运行中的this绑定，就要找到这个函数的直接调用位置。
##按照上面介绍的优先级顺序进行判断便可以找到this的绑定对象。