JS 普通函数和箭头函数中this的指向

JS 中this的指向问题

1. 普通函数的 this 指向

原文章地址
在了解this指向之前必须先知道 this的指向在函数定义的时候是确定不了的,只有在函数调用的时候才知道 this指向最终调用它的对象

小例子

function a() {
    var name = "小火车"
    console.log(this) // window
    console.log(this.name) // undefined
}
a()

• 可以看到在JS引擎创建阶段的时候this指向的是window
  
• 在调用a()函数的时候处于JS引擎的创建阶段, this指向还是window
  
• 其实 a()也可以看成是window.a(), 因此在调用函数的时候, this就指向了window

小例子2

var b = {
    name : "小火车",
    fn : function () {
        console.log(this) // 对象 b
        console.log(this.name)  // 小火车
    }
}
b.fn()
console.log(b.fn() === window.b.fn()) // true

• 当调用b.fn()的时候可以看到this的指向已经发生变化了, 不再是window,而是对象b
• 因为fn()函数是被对象b调用了, 函数里面的this就指向了对象b
• 疑问 这里的b.fn() === window.b.fn()为什么this没有指向window???

小例子3

var a = {
    name: "小火车",
    age: 24,
    b: {
        like: "况且况且",
        fn: function() {
            console.log(this) // 对象 b
            console.log(this.name) // undefined
        }
    }
}
a.b.fn()

• 这个例子说明了this的指向并不一定是指向了最终的调用对象
• 情况说明:

1. 如果一个函数中存在了this,但是this没有被调用, 那么这个this就指向的是window
2. 如果一个函数中存在了this,对象中存在这个函数, 并且这个函数被这个对象调用了, 那么这个this就指向该对象
3. 如果一个函数中存在了this,并且这个函数存在多个上级的对象, 尽管这个函数是被最外层的对象调用的, 但是this的指向也只会是这个函数的上一级的对象
4. 也可以理解为a.b.fn()最后调用fn()的是b

例子4

var a = {
    name: "小火车",
    age: 24,
    b: {
        like: "况且况且",
        fn: function() {
            console.log(this) // window
            console.log(this.name) // undefined
        }
    }
}
var c = a.b.fn
c()

this指向最终调用它的对象

• 匿名函数的this指向window

  (function() {
    console.log(this, 'this') // window
  })()
  

改变函数中的this指向 文章地址

2. 箭头函数的 this 指向

2.1 箭头函数的this 在函数定义的时候就会确定, 也就是说, 箭头函数内部的this指向是固定的, 指向箭头函数上层的作用域

2.2 call, apply, bind 都不可以改变箭头函数的this指向

箭头函数的定义: ES6中允许使用“箭头”（=>） 来定义函数。箭头函数相当于匿名函数，并且简化了函数定义

// 箭头函数
let foo = (name) => `我是${name}`
foo('小火车') // 我是小火车

// 等同于下面这个普通函数
let foo2 = function(name) {
    return `我是${name}`
}

3. 箭头函数和普通函数的this区别

var aaaa = '大火车'
var person = {
  aaaa: '小火车',
  say: function () {
    console.log(this.aaaa)
  },
  say2: () => {
    console.log(this.aaaa)
  }
}
person.say() // 小火车
person.say2() // 大火车

第一个函数say 因为定义的是一个普通的函数, 所有它的this指向是在调用的时候确认的, 函数被person调用, 所以this就指向person, 打印的结果就是小火车

第二个函数say2 是箭头函数, 因为箭头函数中的this是在函数定义的时候就确定了, 而且对象不构成单独的作用域, 因此箭头函数的this就指向了全局的window