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 `.`, youre
// implicitly setting the function context to `null`.
const myFn = obj.fn;
myFn() == null; // true in strict modeTLDR： 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; // truebind(), 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© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
请登录后查看评论内容