JS this指向

window.onload = function() {
 // this指向
  // 简单函数
  function f() {

    //  console.log(this)  // 在非严格模式下 this => window
    //  "use strict"
    console.log(this) // 在严格模式下 this => undefiend
  }
  f()

  // 内置函数中 this => window
  setTimeout(f, 1000)

  // 回调函数 -- 一个函数被当做参数传递给另一个函数
  // this => window
  function test(v) {
    console.log(v)
  }

  function f2(callBack,v) {
    callBack(v)
  }

  f2(test, 'hello')

  // 另一种写法
  f2(function(v){console.log(v)},'world')
  // this => window
  f2(function(v){console.log(this)},'world')

  // 数组  this指向调用者
  function f3() {
    console.log(this)
  }
  var arr = [f3, 4,5,6]
  arr[0]()  // this -> [ƒ, 4, 5, 6]  this指向arr

  var f = arr[0]
  f()  // this => window


  // 对象
  var obj = {}
  obj.id = 123
  obj.init = function() {
    console.log(this)
  }
  obj.init()  // this => obj


  // 构造函数
  function Fun(name,age) {
    this.name = name
    this.age = age
    this.action = function() {
      console.log(this)
    }
  }
  var fun2 = new Fun('abc',17)
  fun2.action() // this指向的是新创建的对象，而不是构造函数本身

  var fun3 = new Fun('asd',27)
  fun3.action()


  // 如何改变this的指向  apply()  call()   bind()

  var a = 10
  function f5(x1, x2) {
    return this.a + x1 + x2
  }

  var obj5 = {
    a: 100,
    action: f5
  }
  console.log(obj5.action(1,2)) // 103 this指向 obj5

  console.log(obj5.action.apply(window,[1,2])) // 13 this指向window  全局

  console.log(obj5.action.call(window,1,2)) // 13 this指向window

  //  bind() 绑定this 也是改变作用域  绑定后不能再改变this的指向
  var obj6 = {
    a: 1000
  }
  var a8 = f5.bind(obj6,1,2)
  a8() // 1003
}