谈谈call、apply和bind方法的用法以及区别_coocs creator中call,apply,bind的用法和区别-优快云博客

本文链接：https://blog.youkuaiyun.com/cskiss2012/article/details/91983507

本文详细解析了JavaScript中apply、call与bind方法的使用技巧及区别，通过实例展示了如何利用这些方法改变函数调用的this指向，适用于数组最大最小值计算、对象属性访问等场景。

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

这三个方法的作用都是改变函数的执行上下文也可以说成这三个方法都是改变函数调用的this指向
比较典型的就是数组中求最大值和最小值
直接上代码：

const number = [1,23,34,55]
const maxInNumber = Math.max.apply(Math, number)
const maxInNumber2 = Math.max.call(Math, 12,123,-23,900)

console.log(maxInNumber, maxInNumber2)   // 55, 900

值得注意的一点：apply 传入的是数组 call传入的是数组参数
再来看一下bind:

const fn = {
   n: 2,
    func: function() {
        document.getElementById('box').onclick = (function() {
            console.log(this.n)
        }).bind/* call, apply*/(this) 
    }
}
fn.func()  // bind的调用不会立即执行 所以要加上()

注意：bind的调用不会立即执行，而 apply，call会立即执行

再来一个经常会用的例子：

const fn1 = {
   name: 'dean',
   age: 18,
   show() {
       console.log(this.name +':'+this.age)
   }
}
const fn2 = {
   name: '张三',
   age: 20
}
fn1.show();
fn1.show.call(fn2)
fn1.show.apply(fn2)
fn1.show.bind(fn2)()  //  bind的调用不会立即执行 所以要加上()

当有参数时也是一样的调用，把参数传入即可，看下面的例子：

const fn1 = {
    name: 'dean',
    age: 18,
    show(grate,classes){
        console.log(this.name +':'+this.age+'在'+grate+'上'+classes)
    }
}
const fn2 = {
    name: '张三',
    age: 20
}
fn1.show('广州', '幼儿园');
fn1.show.call(fn2, '广州', '幼儿园小班')
fn1.show.apply(fn2, ['广州', '幼儿园中班'])
fn1.show.bind(fn2)('广州', '幼儿园大班')