前言

面向对象语言中 this 表示当前对象的一个引用。
但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

如果单独使用，this 表示全局对象。
在方法中，this 表示该方法所属的对象。
在函数中，this 表示全局对象；但严格模式下，this 是未定义的(undefined)。
在事件中，this 表示接收事件的元素。
类似 apply()，bind()和call()方法可以将 this 引用到任何对象。

看了很多资料，基本上都让大家坚持一个原理：this 永远指向最后调用它的那个对象。那我们就看一下实际例子吧。

单独使用/全局（参考：globalThis 对象）

console.log(this, globalThis) // window

"use strict";
console.log(this, globalThis) // window，严格模式下，this也是指向全局(Global)对象

方法中的 this

// 创建一个对象
var person = {
  firstName: "John",
  lastName : "Doe",
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
person.fullName(); // "John Doe"
window.person.fullName(); // "John Doe"

fullName 是对象 person 调用的，所以打印的值就是 person 中的值。
this 永远指向最后调用它的那个对象”，最后调用它的对象仍然是对象fullName。
⚠️ 注意陷阱

var firstName = 'wang';
var lastName = 'qiang';
var person = {
  firstName: "John",
  lastName : "Doe",
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
var c = person.fullName;
c();

fullName() 最后仍然是被 window 调用的。所以 this 指向的也就是 window。打印结果为："wang qiang"

函数中使用 this

// 默认
function myFunction() {
  return this;
}
 myFunction() // this 表示 myFunction 函数的所有者

// 严格模式
"use strict";
function myFunction() {
  return this;
}
 myFunction() // undefined

函数中，默认情况下，this 指向全局对象。
严格模式下，this 为 undefined，因为严格模式下不允许默认绑定

事件中的 this（参考runoob）

<button onclick="this.style.display = 'none'">点我后我就消失了</button>
<button @click="$event.target.style.display = 'none'">点击消失</button> // Vue写法

<button onclick="myFunction(this)">点我后我就消失了</button>
<script>
function myFunction(t) {
  console.log(t) // <button onclick="this.style.display='none'">点我后我就消失</button>
}
</script>

在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素。

改变 this 的指向

显式函数绑定

var obj = {
  name: "小明",
  select: "芝芝芒芒",
  myFun: function() {
    console.log(
      this.name + "选择" + this.select
    );
  }
};
var db = {
  name: "大江",
  select: "杨枝甘露酸奶"
};
obj.myFun();  // 小明选择芝芝芒芒
// 大江选择杨枝甘露酸奶
obj.myFun.apply(db);
obj.myFun.bind(db)();
obj.myFun.call(db);

bind 返回的是一个新的函数，必须调用它才会被执行。
对比一下call 、bind 、 apply 传参情况：

var obj = {
  name: "小明",
  select: "芝芝芒芒",
  myFun: function(m,n) {
    console.log(
      this.name + "选择" + this.select + "加" + m + "加" + n
    ); 
  }
};
var db = {
  name: "大江",
  select: "杨枝甘露酸奶"
};
obj.myFun.apply(db, ["椰果", "珍珠"]); // 大江选择杨枝甘露酸奶加椰果加珍珠
obj.myFun.bind(db, "椰果", "珍珠")(); // 大江选择杨枝甘露酸奶加椰果加珍珠
obj.myFun.bind(db, ["椰果", "珍珠"])(); // 大江选择杨枝甘露酸奶加椰果,珍珠加undefined
obj.myFun.call(db, "椰果", "珍珠"); //大江选择杨枝甘露酸奶加椰果加珍珠

a-b-c:
第一个参数都是 this 的指向对象。
apply 的所有参数都必须放在一个数组里面。
bind 除了返回是函数以外，它的参数和 call 一样。
call 的参数全都用逗号分隔。
三者的参数不限定是 string 类型，允许是各种类型，包括函数、 object 等等！

在函数内部使用 _this = this

var name = "kevin";
var a = {
  name : "tom",
  func1: function () {
    console.log(this.name)     
  },
  func2: function () {
    var _this = this;
    setTimeout( function() {
      _this.func1()
    }, 1000);
  }
};
a.func2() // tom

箭头函数

var name = "kevin";
var a = {
  name : "tom",
  func1: function () {
    console.log(this.name)     
  },
  func2: function () {
    var _this = this;
    setTimeout(() => {
    _this.func1()
    }, 1000);
  }
};
a.func2() // tom

⚠️ 箭头函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
⚠️ 如果箭头函数被非箭头函数包含，则 this 绑定的是最近一层非箭头函数的 this，否则，this 为 undefined。
（参考：ECMAScript 6 入门 > 箭头函数）

构造函数

function Foo() {}
Foo.prototype.getName = function(){
  console.log(this.name);
}

var bar = new Foo();
bar.name = 'alex';
bar.getName(); // this 指向实例 bar

再看几个例子

🌰

var a = 10;
var obj = {
  a: 20
}
function myFun(){
  console.log('myFun this:', this);
  function foo(){
    console.log("foo this:", this.a)
  }
  foo();
}
myFun();
myFun.call(obj);

无论fn如何调用，foo都是独立调用，所以foo内部的this都是指向undefined，由于是非严格模式下(默认),因此自动指向window

🌰🌰

'use strict';
var a = 10;
function foo(){
  var a = 1;
  var obj = {
    a:20,
    c: this.a + 20
  }
  return obj.c;
}

console.log(window.foo()); // 30
console.log(foo()); // Uncaught TypeError:Cannot read property 'a' of undefined