函数绑定是 JavaScript 中常用的一种技巧，可以解决 this 指向不明确的问题。也就是说，通过函数绑定，可以指定函数中 this 的指向。ES6 中新增了一些函数绑定的语法，本文将详细介绍这些语法，以及如何使用它们来提高前端开发效率。
1. 绑定 this
在 ES5 中，通常使用 bind 方法来手动绑定函数中的 this，示例如下：
// javascriptcn.com 代码示例
var obj = {
x: 1,
logX: function() {
console.log(this.x);
}
};
var logX = obj.logX.bind(obj);
logX(); // 输出 1上述代码中，obj.logX.bind(obj)将使得 logX 函数中的 this 指向 obj 对象，调用 logX 就会输出它的 x 属性值。
在 ES6 中，我们可以使用箭头函数来自动将函数中的 this 绑定到当前执行上下文。这意味着，箭头函数中的 this 指向它所在的作用域。
// javascriptcn.com 代码示例
var obj = {
x: 1,
logX: function() {
var log = () => console.log(this.x);
log();
}
};
obj.logX(); // 输出 1上述代码中，log 箭头函数中的 this 指向它所在的作用域，也就是 logX 函数中的 this，因此输出了 1。
2. 解决 this 指向问题
在 ES5 中，call 和 apply 方法也可以用来手动绑定函数中的 this，示例如下：
// javascriptcn.com 代码示例
var obj1 = { x: 1 };
var obj2 = { x: 2 };
function logX() {
console.log(this.x);
}
logX.call(obj1); // 输出 1
logX.call(obj2); // 输出 2在 ES6 中，call 和 apply 方法已经可以被写成箭头函数的形式。这意味着箭头函数中的 this 仍然可以被手动绑定，并且可以使用 ES6 的展开操作符 ... 来方便地传递参数。
// javascriptcn.com 代码示例
var obj1 = { x: 1 };
var obj2 = { x: 2 };
var logX = () => console.log(this.x);
logX.call(obj1); // 输出 undefined
logX.call(obj2); // 输出 undefined
var logX2 = (a, b, ...args) => {
console.log(this.x, a, b, ...args);
};
logX2.call(obj1, 1, 2, 3, 4); // 输出 1, 1, 2, 3, 4
logX2.call(obj2, 5, 6, 7, 8); // 输出 2, 5, 6, 7, 8上述代码中，logX 箭头函数中的 this 指向全局作用域，因此输出了 undefined。而 logX2 箭头函数中的 this 能够手动绑定，因此输出了正确的值。
3. 进一步优化函数绑定
在实际开发中，我们通常需要把函数作为回调函数传递给其他函数。这时候，如果我们每次都手动绑定函数中的 this，会显得非常麻烦。
在 ES5 中，通常需要借助闭包来解决这个问题，示例如下：
// javascriptcn.com 代码示例
function Greeter(name) {
this.name = name;
}
Greeter.prototype.sayHi = function() {
console.log('Hi ' + this.name);
};
Greeter.prototype.start = function() {
setTimeout(function() {
this.sayHi();
}.bind(this), 1000);
};
var greeter = new Greeter('John');
greeter.start(); // 一秒钟后输出 "Hi John"上述代码中，setTimeout 回调函数中的 this 需要手动绑定到 Greeter 对象上，因此需要使用 bind 方法。这将导致代码非常啰嗦。
在 ES6 中，我们可以使用箭头函数来进一步简化代码，示例如下：
// javascriptcn.com 代码示例
function Greeter(name) {
this.name = name;
}
Greeter.prototype.sayHi = function() {
console.log('Hi ' + this.name);
};
Greeter.prototype.start = function() {
setTimeout(() => {
this.sayHi();
}, 1000);
};
var greeter = new Greeter('John');
greeter.start(); // 一秒钟后输出 "Hi John"上述代码中，setTimeout 回调函数被写成了箭头函数的形式，内部的 this 指向 Greeter 对象，因此无需再手动绑定 this。
总结
本文详细介绍了 ES6 中的函数绑定技巧，包括箭头函数、call 和 apply 方法的使用。这些技巧可以帮助开发者解决函数中 this 指向不明确的问题，并且能够优化代码的编写。
希望本文对于前端开发者们有所帮助，让大家在实际开发中更加得心应手。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653f897c7d4982a6eb919ba6