javascript中apply、call和bind的区别_javascript apply call bind-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_39054337/article/details/118492129

这篇博客详细介绍了JavaScript中的call、apply、bind方法，它们都用于改变函数执行时的上下文（this）指向。call接受参数列表，apply接受参数数组，bind返回一个新函数保留了绑定的this。在ES6的箭头函数中，call和apply失去作用。通过示例展示了如何在不同场景下使用这三个方法，包括在数组最大值和最小值查找中的应用，以及与new运算符的结合使用。总结了call、apply、bind的区别，如bind返回函数便于后续调用，而call和apply则立即执行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

call、apply、bind的作用是改变函数运行时this的指向

call

call 方法第一个参数是要绑定给this的值，后面传入的是一个参数列表。
当第一个参数为null、undefined的时候，默认指向window。

var arr = [1, 2, 3, 89, 46]
var max = Math.max.call(null, arr[0], arr[1], arr[2], arr[3], arr[4])//89

apply

apply接受两个参数，第一个参数是要绑定给this的值，第二个参数是一个参数数组。
当第一个参数为null、undefined的时候，默认指向window。

var arr = [1,2,3,89,46]
var max = Math.max.apply(null,arr)//89

bind

bind接受两个参数，第一个参数是this的指向，从第二个参数开始是接收的参数列表
bind 方法不会立即执行，而是返回一个改变了上下文 this 后的函数。而原函数 printName 中的 this 并没有被改变，依旧指向全局对象 window。需调用触发

var arr = [1,2,3,89,46]
var max = Math.max.apply(null,arr)//89
var min = Math.min.apply(null,arr)//1


function fn(a, b, c) {
    console.log(a, b, c);
}
var fn1 = fn.bind(null, 'Dot');

fn('A', 'B', 'C');            // A B C
fn1('A', 'B', 'C');           // Dot A B
fn1('B', 'C');                // Dot B C
fn.call(null, 'Dot');      // Dot undefined undefined

call 是把第二个及以后的参数作为 fn 方法的实参传进去，而 fn1 方法的实参实则是在 bind 中参数的基础上再往后排。

call、apply和bind函数存在的区别

bind返回对应函数, 便于稍后调用； apply, call则是立即调用。
在 ES6 的箭头函数下, call 和 apply 将失效

const obj = {
  name: '数据',
};

function say (arg1, arg2) {
  console.log(`${this.name ? `多媒体${this.name}，` : ''}${arg1}，${arg2}`);
}

say('测试', '测试1'); // 测试，测试1

say.call(obj, '测试', '测试1') // 多媒体数据，测试，测试1

say.apply(obj, ['测试', '测试1']); // 多媒体数据，测试，测试1

const manualSay = say.bind(obj, '测试', '测试1'); 
manualSay(); // 手动执行，输出：多媒体数据，测试，测试1