从call、apply、bind的用法及区别中解开javascript的秘密

在JavaScript中，call()、apply()和bind()都是用来改变函数的this指向的方法。这三个方法都可以接受一个对象作为第一个参数，该对象将被用作函数的this值。

call()

call()方法接受两个参数：第一个参数是作为函数的this值的对象，第二个参数是一个参数列表，这些参数将被传递给函数。

function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet.call({ name: 'John' }, 'Jane'); // Hello, Jane!

在上面的例子中，greet()函数被调用时，this的值被设置为{ name: 'John' }对象，因此函数中的name变量的值为"Jane"。

apply()

apply()方法也接受两个参数：第一个参数是作为函数的this值的对象，第二个参数是一个数组，其中包含要传递给函数的参数。

function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet.apply({ name: 'John' }, ['Jane']); // Hello, Jane!

在上面的例子中，greet()函数被调用时，this的值被设置为{ name: 'John' }对象，因此函数中的name变量的值为"Jane"。

bind()

bind()方法与call()和apply()方法不同，它不会立即调用函数，而是返回一个新的函数，该函数的this值被设置为第一个参数。

function greet(name) {
  console.log(`Hello, ${name}!`);
}

const greetJane = greet.bind({ name: 'John' });

greetJane('Jane'); // Hello, Jane!

在上面的例子中，greet()函数被调用时，this的值被设置为{ name: 'John' }对象，因此函数中的name变量的值为"Jane"。

区别

call()、apply()和bind()方法都可以用来改变函数的this指向，但它们之间还是有一些区别的。

• call()和apply()方法都会立即调用函数，而bind()方法不会立即调用函数，而是返回一个新的函数。
• call()方法接受两个参数：第一个参数是作为函数的this值的对象，第二个参数是一个参数列表，这些参数将被传递给函数。
• apply()方法也接受两个参数：第一个参数是作为函数的this值的对象，第二个参数是一个数组，其中包含要传递给函数的参数。
• bind()方法接受两个参数：第一个参数是作为函数的this值的对象，第二个参数是一个参数列表，这些参数将被传递给返回的新函数。

总结

call()、apply()和bind()方法都是用来改变函数的this指向的方法。这三个方法都可以接受一个对象作为第一个参数，该对象将被用作函数的this值。call()和apply()方法都会立即调用函数，而bind()方法不会立即调用函数，而是返回一个新的函数。