this指向问题

this指向本身不是什么难题,只是在不同环境中我们要区分开。下面是比较常见的几种情况

情况一:在浏览器环境下,直接使用this

console.log(this === window) //true

情况二:在new 关键字时,function作为构造函数,其function中的this指向为创建好的对象

function Hello(){
  this.value = 'hello'
}

let a = new Hello()

console.log(a.value) // 输出hello

小提示:构造函数中return了一个object类型时,那么就算调用了new方法,创建出来的对象也是 返回的对象

function Hello(){
  this.value = 'hello'
  return {b:'b'}
}

let a = new Hello()

console.log(a.value) // 输出undefined
console.log(a) //{b:'b'}

情况三:在调用对象方法时,this会指向调用方法的对象。同样以上面的Hello方法为例

function Hello(){
  this.value = 'hello'
}

let a = {}

a.hello = Hello

a.hello()

//这时由于Hello中的this会指向调用该方法的对象,所以this指向了a
console.log(a.value) //'hello'

情况四:指向方法所在,环境中的this,比较典型的就是ES6的匿名函数

//简单的对比
function test(){
   console.log(this)
   let b = function(){
      console.log(this)
   }
   b()
}
test() //输出两个window
//改变this的指向(可以使用对象赋值、或者通过使用 new 方法 )
let c =  {}
c.func = test
c.func() //输出一个func:f 一个 window

// 改成匿名函数
function test(){
   console.log(this)
   let b = () =>{console.log(this)} //仅这里做改动
   b()
}
test() //输出两个window
let c =  {}
c.func = test
c.func() //输出两个func:f

修改this的指向,可以通过使用bind、call、apply等Function原型链中自带的三个方法