JS this总结

匿名函数的执行环境具有全局性，因此其this对象通常指向window
如果用apply call改变函数执行环境的情况下，this指向其他对象

全局环境下(Global context)this

浏览器环境

this === window

console.log(window === this) // true

模块环境

• ES6模块
  顶层this返回undefined，在模块顶层使用this是毫无意义的
  利用顶层this等于undefined这一点，可以判断代码是否在ES6模块中
• commonjs模块
  顶层this等于exports

函数环境(Function Context)的this

对于函数来说 this是运行时绑定的，取决于执行环境，每次调用this都可能不一样
浏览器环境下，在全局函数中，this等于window，而当函数作为某个对象的方法调用时，this等于那个对象
es5提供了bind()方法来设置函数的this，之后无论怎么调用都没法改变
es2015提供了箭头函数，它本身没有绑定this，而是保留它的外部作用域的this

全局函数内部的this

// 全局函数
function f1() {
  return this;
}
// 浏览器环境:
f1() === window; // true
// node环境:
// globalThis可以获取到当前环境的全局对象，node环境的全局对象相比浏览器环境的window少了很多浏览器相关的接口
f1() === globalThis; // true
// ES6模块内:
// ES6模块自动采用严格模式，所以全局函数内this不再指向全局对象，而是undefined
f1() === undefined

严格模式下全局函数的this为undefined;

// 全局函数
function f2() {
  'use strict'; // 严格模式
  return this;
}
f2() === undefined; // true

函数可以用call和apply方法来绑定this

function add(c, d) {
  return this.a + this.b + c + d;
}
var o = { a: 1, b: 3 };
add.call(o, 5, 7); // 16
add.apply(o, [10, 20]); // 34

非严格模式下，调用call和apply方法，如果传入的this值不是对象，会试图把该参数转化为对象
null和undefined转化为global object;
基本类型如7、'foo'会被转化为相应的包装类型如new Number(7)、new String('foo')
严格模式下，call、apply方法传入任何值都不会被转化

// 非严格模式
function getType() {
  console.log(typeof this !== 'object' ? typeof this : Object.prototype.toString.call(this));
}
getType.call(7); // [object Number]
getType.call('foo'); // [object String]
getType.call(true); // [object Boolean]
getType.call(undefined); // [object global]
getType.call(null); // [object global]
getType.call({ name: 'stan' }); // [object Object]
// 严格模式下
'use strict';
function getType() { ... } // 同上
getType.call(7); // number
getType.call('foo'); // string
getType.call(true); // boolean
getType.call(undefined); // undefined
getType.call(null); // [object Null]
getType.call({ name: 'stan' }); // [object Object]

构造函数里的this

构造函数里的this指的是new出来的实例对象

function Person(name) {
  this.name = name;
}
var p = new Person('stan');
console.log(p); // { name: 'stan' }
// 如果构造函数返回值为对象，则用该对象作为实例对象，否则返回this的值
function Person(name) {
  this.name = name;
  return {
    aa: 11
  };
}
var p = new Person('stan');
console.log(p);

类环境(Class context)下的this

在类的构造器(constructor)里，this指的是类的实例

派生类(Derived classes)的this

派生类没有初始this，调用super()方法会创建一个this，等同于以下代码

this = new Base();

原型链上的this

如果函数在某个对象的原型链上，在该对象上调用此方法时，this指的是此对象

var o = {f: function() { return this.a + this.b; }};
// 创建一个新对象，使用参数对象作为新对象的__proto__属性
var p = Object.create(o);
p.a = 1;
p.b = 4;

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

getter setter里的this

对象的属性的getter、setter里的this，就是该对象

var o = {
  a: 1,
  b: 2,
  c: 3,
  get average() {
    return (this.a + this.b + this.c) / 3;
  },
  set average(val) {
    this.a = this.b = this.c = val;
  }
};
console.log(o.average); // 2
o.average = 4;
console.log(o.a); // 4
console.log(o.b); // 4
console.log(o.c); // 4
Object.defineProperty(o, 'sum', {
  get: function () {
    return this.a + this.b + this.c;
  },
  set: function (val) {
    this.a = this.b = this.c = val / 3;
  },
  enumerable: true,
  configurable: true
});
console.log(o.sum); // 12
o.sum = 15;
console.log(o.a); // 5
console.log(o.b); // 5
console.log(o.c); // 5