(八) 简单理解js中的this指向

this指向问题

---

this的行为有时候会显得极其诡异，让人感到困惑，但只需要记住 this的值要等到代码真正执行时才能确定
同时this的值具体有以下几种情况：

1. new 调用时指的是被构造的对象
2. call、apply调用，指向我们指定的对象
3. 对象调用，如执行obj.b()，this指向obj
4. 默认的，例如fun(), 指向全局变量window(相当于执行window.fun())

---

在函数中直接使用

function get(content) {
  console.log(content)
}

get('你好')
// 上面是下面的语法糖
get.call(window, '你好')

---

函数作为对象的方法被调用 (谁调用,指向谁)

var Person = {
  name: '张三',
  run: function(time){
    console.log(`${this.name} 在跑步,最多${time}min就不行了`)
  }
}

Person.run(30)
Person.run.call(Person,30)

将函数方法赋值给外部变量

var obj = { a: 1, b: function () { alert(this.a) } };
var fun = obj.b;				// 引用赋值
fun();

笔试题

var name = 222
var a = {
  name: 111,
  say: function() {
    console.log(this.name)
  }
}

var fun = a.say
fun()           // 222
a.say()         // 111

var b = {
  name: 333,
  say: function(fun) {
    fun()
  }
}

b.say(a.say)        // 222
b.say = a.say      
b.say()             // 333

箭头函数中的this指向问题

• 箭头函数中的this是在定义函数的时候绑定, 而不是在执行函数的时候绑定
• 实际上, 箭头函数根本没有自己的this, 导致内部的this就是外层代码块的this, 所谓的外层代码块, 是指继承自父执行上下文的this
• 正因为它没有this, 所以也就不能作为构造函数

    var x = 11
    var obj = {
      x: 22,
      say: () => {
        console.log(this.x)
      }
    }
    obj.say()     // 11

• 本案例中, 箭头函数与say平级, 也就是箭头函数所在的对象为obj, 而obj的父执行上下文是window

    var obj = {
      birth: 1990,
      getAge: function() {
        var b = this.birth
        var fn = () => new Date().getFullYear() - this.birth
        return fn
      }
    }
    obj.getAge()    // 

• 例子中箭头函数时在getAge中定义的, getAge的父执行上下文是obj, 因此这里的this指向obj对象

forEach中的this问题

    var obj = {
      items: [1, 2, 3],
      print: function () {
        console.log(this);				// obj

        this.items.forEach(function (item) {
          console.log(this);			// window
        })
      }
    }
    obj.print()