js函数中this的指向

this的指向一直是js中让人头晕的存在。

一、也许有些同学会搞晕，所以插个题外话，fn() 和 new fn() 这个一定要搞清楚：

function fn () {
  console.log('你好')
  this.hello = '你好'
}
fn.prototype.a = 1var o = fn()
console.log(o) // 若没有返回值，返回undefined

var obj = new fn()
console.log(obj) // 实例化一个对象 fn { hello: '你好' }
console.log(obj.a) // 1

• fn() ：执行了这个函数，是个执行动作，如果把这个动作赋值给一个变量，那么变量的值取函数的返回值
• new fn() ：可以理解为是创建一个拥有fn函数对象（函数也是个对象哦~）所有属性的对象，同时这个对象拥有fn函数的原型。
• 一个是执行动作，一个是创建对象动作

二、this要记住以下几种场景：

1、执行函数中的this

function test () {
  console.log(this) // this 指向window
}

test()

当直接调用一个函数，那么这个函数中的this指向window，node环境中指向global

ps：直接调用，属于执行，真正去执行test的是window/global环境

2、执行对象方法中的this

var obj = {
  test: function () {
    console.log(this) // 指向obj对象本身
  }
}
obj.test()

当调用一个对象的方法，这个方法中的this指向这个对象

ps：直接调用，真正调用test的是obj这个对象

3、构造函数中的this

var w = 'window'
function test() {
    this.w = 'obj'
    console.log(this)
}

var obj = new test() // this指向实例化后的对象

console.log(obj.w) // obj
console.log(w) // window

ps: 创建对象，this指向创建后的这个对象

小总结一下：this指向谁呢，谁是真正调用它使用它的，谁就是this。

 三、特殊情况——通过bind()、call()、apply()修改了this指向之后指向谁？

function test (one, two) {
  console.log(this.a, this.b) // 99 100
  console.log(one, two) // '1' '2'
}

var obj = {
  a: 99,
  b: 100,
}

test.call(obj, '1', '2') // 99 100  参数以字符串逗号分隔
test.apply(obj, ['1', '2']) // 99 100 参数是数组形式
test.bind(obj, '1', '2')() // 99 100 参数是字符串逗号分隔

// 第一个参数obj是this的新指向，后面是传递的参数

当执行了call、apply方法，相当于执行了替换this指向之后的函数

执行bind方法，返回的是个替换this指向之后的函数，还需要再次调用才是执行了替换后的函数。