this 详细介绍（MDN）

function f1(){
  return this;
}
//在浏览器中：
f1() === window;   //在浏览器中，全局对象是window
//在Node中：
f1() === globalThis;

function f2(){
  "use strict"; // 这里是严格模式
  return this;
}

f2() === undefined; // true

class Example {
  constructor() {
    const proto = Object.getPrototypeOf(this);
    console.log(Object.getOwnPropertyNames(proto));
  }
  first(){}
  second(){}
  static third(){}
}

new Example(); // [‘constructor‘, ‘first‘, ‘second‘]

class Base {}
class Good extends Base {}
class AlsoGood extends Base {
  constructor() {
    return {a: 5};
  }
}
class Bad extends Base {
  constructor() {}
}

new Good();
new AlsoGood();
new Bad(); // ReferenceError

// 对象可以作为 bind 或 apply 的第一个参数传递，并且该参数将绑定到该对象。
var obj = {a: ‘Custom‘};

// 声明一个变量，并将该变量作为全局对象 window 的属性。
var a = ‘Global‘;

function whatsThis() {
  return this.a;  // this 的值取决于函数被调用的方式
}

whatsThis();          // ‘Global‘ 因为在这个函数中 this 没有被设定，所以它默认为 全局/ window 对象
whatsThis.call(obj);  // ‘Custom‘ 因为函数中的 this 被设置为obj
whatsThis.apply(obj); // ‘Custom‘ 因为函数中的 this 被设置为obj

function add(c, d) {
  return this.a + this.b + c + d;
}

var o = {a: 1, b: 3};

// 第一个参数是用作“this”的对象
// 其余参数用作函数的参数
add.call(o, 5, 7); // 16

// 第一个参数是用作“this”的对象
// 第二个参数是一个数组，数组中的两个成员用作函数参数
add.apply(o, [10, 20]); // 34

function bar() {
  console.log(Object.prototype.toString.call(this));
}

bar.call(7);     // [object Number]
bar.call(‘foo‘); // [object String]
bar.call(undefined); // [object global]

var o = {
  f: function() {
    return this.a + this.b;
  }
};
var p = Object.create(o);
p.a = 1;
p.b = 4;

console.log(p.f()); // 5

function sum() {
  return this.a + this.b + this.c;
}

var o = {
  a: 1,
  b: 2,
  c: 3,
  get average() {
    return (this.a + this.b + this.c) / 3;
  }
};

Object.defineProperty(o, ‘sum‘, {
    get: sum, enumerable: true, configurable: true});

console.log(o.average, o.sum); // logs 2, 6

/*
 * 构造函数这样工作:
 *
 * function MyConstructor(){
 *   // 函数实体写在这里
 *   // 根据需要在this上创建属性，然后赋值给它们，比如：
 *   this.fum = "nom";
 *   // 等等...
 *
 *   // 如果函数具有返回对象的return语句，
 *   // 则该对象将是 new 表达式的结果。
 *   // 否则，表达式的结果是当前绑定到 this 的对象。
 *   //（即通常看到的常见情况）。
 * }
 */

function C(){
  this.a = 37;
}

var o = new C();
console.log(o.a); // logs 37


function C2(){
  this.a = 37;
  return {a:38};
}

o = new C2();
console.log(o.a); // logs 38

<button onclick="alert(this.tagName.toLowerCase());">
  Show this
</button>

<button onclick="alert((function(){return this})());">
  Show inner this
</button>

class Car {
  constructor() {
    // Bind sayBye but not sayHi to show the difference
    this.sayBye = this.sayBye.bind(this);
  }
  sayHi() {
    console.log(`Hello from ${this.name}`);
  }
  sayBye() {
    console.log(`Bye from ${this.name}`);
  }
  get name() {
    return ‘Ferrari‘;
  }
}

class Bird {
  get name() {
    return ‘Tweety‘;
  }
}

const car = new Car();
const bird = new Bird();

// The value of ‘this‘ in methods depends on their caller
car.sayHi(); // Hello from Ferrari
bird.sayHi = car.sayHi;
bird.sayHi(); // Hello from Tweety

// For bound methods, ‘this‘ doesn‘t depend on the caller
bird.sayBye = car.sayBye;
bird.sayBye();  // Bye from Ferrari