关于this

this 是我们在开发中常常用到的关键字，在全局环境中，也就是代码最外层，this 对象始终指向全局对象，在浏览器中就是 window ，而在函数内，this 的指向取决于函数被调用的方式，函数通常有以下几种调用情况：

作为 普通函数 调用
作为 对象的方法 调用
作为 构造函数 调用
call 和 apply 调用
bind 方法
作为 Function.prototype 上添加的自定义方法调用
作为 dom事件 处理函数调用
作为 内联事件 处理函数调用

作为普通函数调用

window.a = 1
function f(){
  let a = 2
  console.log(this.a)
}
f() // 1

当函数直接调用时，此时函数中的 this 指向的是全局对象，在浏览器环境中就是 window 对象，因此打印的 this.a 就是 window.a 。

而在严格模式下，作为普通函数调用中的 this 则为 undefined

window.a = 1
function f(){
  "use strict"
  let a = 2
  console.log(this)
}
f() // undefined

作为对象的方法调用

当函数作为对象的方法被调用时，this 指向调用该函数的对象。

let o = {
  a:1,
  f(){
    console.log(this.a)
  }
}
o.f() //1

作为构造函数调用

let Con = function(){
  this.a = 1
}
let instance = new Con()
console.log(instance.a) //1

在使用 new 操作符调用构造函数 Con 创建实例时，会经历四个步骤：

创建一个空对象 {}
将这个空对象链接到构造函数(空对象的 __proto__ 链接到 Con的 prototype)
绑定 this 到新创建的对象并执行构造函数
如果构造函数没有返回对象，则返回 this 也就是新创建的对象

但是如果上面的第4步中构造函数返回了一个对象的话，那么最终就不会返回 this

const Con = function(){
  this.a = 1
  return {b : 1}
}
const instance = new Con()
console.log(instance.a) //undefined
console.log(instance.b) //1

call和apply调用

如果函数通过 call 与 apply 调用的话，那么该函数指定一个 this对象

const a1 = {
  a:1,
  f(){
    return this.a
  }
}
const a2 = {
  a:2
}
console.log(a1.f()) //1
console.log(a1.f.call(a2)) //2
console.log(a1.f.apply(a2)) //2

bind

函数调用 bind 时，会创建一个新的函数，这个新的函数的 this 指向调用bind时传入的第一个参数。

const a1 = {
  a:1,
  f(){
    return this.a
  }
}
const a2 = {
  a:2
}
console.log(a1.f()) //1
console.log(a1.f.bind(a2)()) //2

要注意的是，多次 bind的情况下，永远只会指向第一次 bind 指定的 this

const a1 = {
 a:1,
 f(){
   return this.a
 }
}
const a2 = {
 a:2
}
const a3 = {
 a:3
}
console.log(a1.f()) //1
console.log(a1.f.bind(a2).bind(a3)()) //2

bind 可以理解为返回了一个包含了 apply 的函数，类似下面这样：

// 忽略传入arguments等实现细节
Function.prototype.likeBind = function(context){
 let _this = this
 return function f(){
   return _this.apply(context)
 }
}

那么多次 bind 就可以理解为下面这样：

// a1.f.bind(a2).bind(a3)() 相当于如下
const f2 = function(){
 return a1.f.apply(a2)
} 
const f3 = function(){
 return f2.apply(a3)
}
f3()

//合并两个函数相当于
const f4 = function(){
 return function(){
   return a1.f.apply(a2)
 }.apply(a3)
}
f4()

我们可以发现，多次bind最终执行的始终是 a1.f.apply(a2)，所以多次 bind 永远只会指向第一次 bind 指定的 this。

作为Function.prototype上添加的自定义方法调用

在模拟 bind 时，向 Function.prototype 添加了一个自定义方法 likeBind ，当它作为函数原型链上的方法被调用时，this指向调用它的那个函数

Function.prototype.likeBind = function(context){
  let _this = this
  console.log(_this) //这里指向 a 函数
  return function f(){
    return _this.apply(context)
  }
}
const a = function(){ }
const b = function(){ }
a.likeBind(b)

作为dom事件处理函数调用

在dom事件处理函数里，this 指向这个处理函数所绑定的dom节点

<ul id='ul' style='padding-bottom:20px;background-color: #d6d6d6;'>
  <li class='li'>1</li>
  <li class='li'>2</li>
</ul>

document.getElementById('ul').addEventListener('click',function(e){
  console.log(e.target)
  console.log(e.currentTarget)
  console.log(this)
  console.log('--------------------')
})

chrome调试

作为内联事件处理函数调用

在内联事件的处理函数中，跟dom事件类似，this 指向绑定该处理函数的 dom。

<ul id='ul' style='padding-bottom:20px;background-color: #d6d6d6;' onclick='console.log(event);
  console.log(this)'>
  <li class='li'>1</li>
  <li class='li'>2</li>
</ul>

箭头函数

箭头函数和一般的函数不同，它没有自己单独的 this，在箭头函数中的 this 取决于该箭头函数定义时的外部函数的 this。因为没有 this指针，所以对箭头函数使用bind，apply，call 这些修改 this 指向的方法是无效的。

const a1 = {
  a:1,
  f:()=>{
    return this.a
  }
 }
const a2 = {
  a:2
}
 console.log(a1.f()) //undefined
 console.log(a1.f.call(a2)) //undefined
 console.log(a1.f.apply(a2)) //undefined
 console.log(a1.f.bind(a2)()) //undefined

因为其 this 指向无法修改的问题，通常不太适合作为对象的方法来调用。

原文地址

参考

MDN - this