从此不再纠结js中apply和call的区别

飞熊 • 2023年7月14日下午4:47 • 前端开发 • 阅读 246

函数原型链中的 apply，call 和 bind 方法是 JavaScript 中相当重要的概念，与 this 关键字密切相关，相当一部分人对它们的理解还是比较浅显，所谓js基础扎实，绕不开这些基础常用的API，这次让我们来彻底掌握它们吧！

call,apply的效果完全一样，它们的区别也在于：

参数数量/顺序确定就用call，参数数量/顺序不确定的话就用apply。
考虑可读性：参数数量不多就用call，参数数量比较多的话，把参数整合成数组，使用apply。
参数集合已经是一个数组的情况，用apply，比如上文的获取数组最大值/最小值。

下面是参数数量不确定的时候，应用apply的一个实例：

const obj1 = {
    age: 24,
    name: '小明',
}
const obj2 = {
    age: 22
}

// 根据某些条件来决定要传递参数的数量、以及顺序
function Obj(thisObj, fn) {
    let params = []
    if (thisObj.name) {
        params.push(thisObj.name)
    }
    if (thisObj.age) {
        params.push(thisObj.age)
    }
    fn.apply(thisObj, params) // 数量和顺序不确定 不能使用call
}

Obj(obj1, handle)
Obj(obj2, handle)

function handle(...params) {
    console.log('params', params) // do some thing
}

结果如下：

call和apply简洁明了的区别：

传给fun的参数写法不同：

apply是第2个参数，这个参数是一个数组：传给fun参数都写在数组中。
call从第2~n的参数都是传给fun的。

使用apply获取数组最大值最小值：

const arr = [15, 6, 12, 13, 16];

const max = Math.max.apply(Math, arr); // 16
const min = Math.min.apply(Math, arr); // 6  apply传入的是一个数组
const min1 = Math.min.call(Math, 15, 6, 12, 13, 16); // 6  call需传入数组中的一个个参数

console.log(max)
console.log(min)
console.log(min1)

输出结果为：