深入理解JavaScript中的call、apply、bind方法的区别

在JavaScript 中，this的指向是动态变化的，很可能在写程序的过程中，无意中破坏掉this的指向，所以我们需要一种可以把this的含义固定的技术，于是就有了call，apply 和bind这三个方法，来改变函数体内部 this 的指向，因为函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念 apply、call apply：应用某一对象的一个方法，用另一个对象替换当前对象 call：调用一个对象的一个方法，以另一个对象替换当前对象 function person() {} person.prototype = { attr: {age:18,sex:' JavaScript中的call、apply和bind方法都是用来改变函数体内`this`指向的重要工具。它们的核心区别在于参数传递方式和即时执行性。 1. **call方法**： - `call`允许你将一个函数作为另一个对象的方法来调用，同时可以自定义`this`的值。 - 函数调用格式：`func.call(thisArg, arg1, arg2, ..., argN)` - `thisArg`是你要绑定到函数内的`this`，后面的`arg1, arg2, ..., argN`是传递给函数的实际参数，它们是直接按照位置传递的。 - 如果没有提供`thisArg`，那么Global对象（在浏览器中是`window`）将被用作`this`。 2. **apply方法**： - `apply`与`call`类似，也能改变`this`的指向，但其参数传递方式不同。 - 函数调用格式：`func.apply(thisArg, [argsArray])` - `thisArg`同样用于绑定`this`，`argsArray`是一个数组或类数组对象，它的元素将作为参数传递给函数。 - 如果`argsArray`不是一个有效的数组或者`arguments`对象，将会抛出`TypeError`。 - 如果没有提供`argsArray`和`thisArg`，则`Global`对象会被用作`thisObj`，并且无法传递任何参数。 3. **bind方法**： - `bind`与前两者不同，它不会立即执行函数，而是返回一个新的函数，在新的函数中`this`已经被预先绑定到指定的对象。 - 函数调用格式：`func.bind(thisArg[, arg1[, arg2[, ...]]])` - `thisArg`是绑定到函数内的`this`，后续的`arg1, arg2, ..., argN`可以预设函数调用时的部分参数，但不会立即执行函数。 - 返回的新函数在之后任何时候调用都会使用绑定的`this`，预设的参数也会一并传入，但额外的参数可以在调用时添加。 举例说明： ```javascript function add(x, y) { return x + y; } let obj1 = {x: 1}; let obj2 = {x: 2}; // 使用call add.call(obj1, 2, 3); // returns 5, `this` in add is obj1 // 使用apply add.apply(obj1, [3, 4]); // returns 7, `this` in add is obj1 // 使用bind创建新函数 let boundAdd = add.bind(obj2); boundAdd(5, 6); // returns 11, `this` in add is obj2 ``` 在处理参数数量不确定的情况下，`apply`通常更合适，因为它可以接受一个数组作为参数。例如，当你需要将数组中的元素作为参数传递给函数时，`apply`能方便地处理这种情况。而`call`则适用于参数数量已知的情况，可以按位置直接传递。 `call`和`apply`都是立即执行的，用于临时改变`this`的指向，而`bind`则返回一个新函数，用于永久绑定`this`的值。在编写JavaScript代码时，根据实际需求选择合适的方法，能够更好地控制函数的行为。