JavaScript 中的 this 关键字

Question

this 关键字 允许您引用函数的 执行上下文，这是一种花哨的说法 this 指调用函数时函数作为其属性的对象。

// `this` is an implicit parameter to the function
const fn = function() {
  return this;
};

// One way that `this` is set is by attaching the function
// to an object.
const obj1 = { fn };
const obj2 = { fn };

obj1.fn() === obj1; // true
obj1.fn() === obj2; // false

obj2.fn() === obj1; // false
obj2.fn() === obj2; // true

需要注意的重要一点是，由于函数在 JavaScript 中是普通的旧变量， this 可能会改变。 一种破坏价值的常见方法 this 就是给一个对象分配一个函数，然后在没有关联对象的情况下调用该函数。这被非正式地称为 失去其上下文 。

const fn = function() {
  return this;
};

const obj = { fn };

// If you call `fn()` without a property access `.`, you're
// implicitly setting the function context to `null`.
const myFn = obj.fn;
myFn() == null; // true in strict mode

TLDR： this 是 隐式参数 函数调用，它包含该函数在调用时的属性的任何对象。

和 Class 类一起使用

你会经常看到 this 在 ES6 类方法中。 在类方法中， this 指调用该方法的对象的实例。

class MyClass {
  myFunction() {
    return this;
  }
}

const obj = new MyClass();

obj.myFunction() === obj; // true

箭头函数

箭头函数很特殊，因为与其他函数不同，它们具有 词法上下文 。 这意味着 this 在箭头函数中与 this 在箭头函数之外，无论您如何调用箭头函数。

const arrow = () => this;

arrow() == null; // true

const obj = { arrow };

// Even though `arrow()` is attached to an object, it still
// has the same context as the surrounding block.
obj.arrow() == null; // true
obj.arrow() == this; // true

bind(), call() 和 apply()

每个 JavaScript 函数都有一个 Function#call() 功能 和一个 Function#apply() 函数 可让您设置值的 this 没有明确地将函数附加到对象。 你可以想到 call() 和 apply() 让你设置隐式参数 this 明确地。

还有一个 Function#bind()，创建具有预设上下文的函数副本的函数。

const fn = function() {
  return this;
};

const obj = {};

fn.call(obj) === obj; // true
fn.apply(obj) === obj; // true

const copy = fn.bind(obj);
copy() === obj; // true
copy === fn; // false

Answer 1

感谢您的收藏，又什么疑问可以在这里留言讨论，也可以在前端开发社区提问，获取更多帮助（这里有很多大牛 :) ）。