在 JavaScript 中，作用域和上下文是非常重要的概念。理解这些概念以及它们在代码中的作用是非常有帮助的。
在 ES6 中，我们可以使用默认绑定、显式绑定和隐式绑定来处理上下文。本文将详细介绍这些绑定方式以及它们在代码中的应用。
默认绑定
默认绑定是指当一个函数被调用时，如果没有显式指定 this 的值，那么 this 就会被绑定到全局对象上。
例如：
function foo() {
console.log(this);
}
foo(); // 输出全局对象这种默认绑定的行为有着很大的问题，因为很容易在开发过程中忘记显式绑定 this，导致代码出现莫名其妙的错误。为了避免这种问题，我们可以在代码中使用严格模式。
在严格模式下，如果没有指定 this 的值，它将被绑定到 undefined，而不是全局对象。这样就可以避免一些潜在的问题。
'use strict';
function foo() {
console.log(this);
}
foo(); // 输出 undefined显式绑定
显式绑定是指我们手动指定 this 的值。我们使用 call 或 apply 方法来完成这个操作。
function foo() {
console.log(this);
}
foo.call({name: 'Alice'}); // 输出 {name: 'Alice'}
foo.apply({name: 'Alice'}); // 输出 {name: 'Alice'}在 ES6 中，我们也可以使用一个新的语言特性——箭头函数来完成显式绑定：
const obj = {name: 'Alice'};
const foo = () => console.log(this);
foo.call(obj); // 输出 {name: 'Alice'}
foo.apply(obj); // 输出 {name: 'Alice'}需要注意的是，箭头函数的 this 始终指向箭头函数声明所在的作用域，而不是被调用时的作用域。
隐式绑定
隐式绑定是指在函数调用时，this 自动被绑定到一个对象上。
const obj = {
name: 'Alice',
foo() {
console.log(this.name);
}
}
obj.foo(); // 输出 'Alice'当函数被调用时，JavaScript 引擎会根据调用表达式中的上下文来判断 this 的值。在上面的例子中，this 的值被隐式绑定到 obj 上。
需要注意的是，如果函数不是通过对象属性访问调用的话，隐式绑定就会失效。
const obj = {
name: 'Alice',
foo() {
console.log(this.name);
}
}
const bar = obj.foo;
bar(); // 输出 undefined在上面的例子中，bar 函数的 this 已经不再是 obj，而是全局对象。因此，调用 bar 函数时会输出 undefined。
为了解决这个问题，我们可以使用显式绑定或者硬绑定。
const obj = {
name: 'Alice',
foo() {
console.log(this.name);
}
}
const bar = obj.foo.bind(obj);
bar(); // 输出 'Alice'在这个例子中，我们使用硬绑定把 bar 函数的 this 值强制绑定到 obj 上。
总结
本文介绍了 ES6 中的默认绑定、显式绑定和隐式绑定。了解这些绑定方式以及它们在代码中的应用非常重要。在代码中，我们应该尽可能地使用显式绑定或硬绑定，避免使用默认绑定或隐式绑定，从而避免出现一些隐藏的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6466cff1968c7c53b073d5fb