JS函数call与apply的区别及用法详解

作者:木棉

时间:2026-10-31

浏览:308

本文详细解析JavaScript中call和apply方法的异同。两者均用于改变函数执行时的this指向,但参数传递方式不同:call接受离散参数,而apply必须接收数组或类数组对象。文章通过代码示例说明了在不同参数数量下如何选择合适的调用方式,帮助开发者优化代码结构。

文章目录

方法示例

//apply用法
        function A(alpha,age){
            this.name = 'bob';
            alert(alpha + arguments[1] + this.name)
        }
        (function(){
            A.apply(this,['a',25])
        })()
        
        //call方法
        function B(alpha){
            this.name = 'alice';
            alert(alpha + this.name)
        }
        
        (function(){
            B.call(this,'b')
        })()
        
        //普通函数
        function love(alpha){
            this.name = 'alice';
            alert(alpha + this.name)
        }
        
        (function(){
            love.call(this,'love')
        })()
        //async函数
        async function create(alpha){
            this.name = 'op';
            var res = await compute();
            alert(alpha + this.name + res)
        }
        (function(){
            create.call(this,'b')
        })()
        //generator函数
        function * gen(num){
            console.log(num);
            num ++;
            yield 'first'
            yield 'then'
            yield 'final'
            return num
        }
        (function(){
            gen.call(this,0)
        })()
        
        let it = gen(3);

          console.log(it.next())  // {value: "first", done: false}
          console.log(it.next())   // {value: "then", done: false}
          console.log(it.next())   // {value: "final", done: false}
          console.log(it.next())   // {value: "4", done: true}
          
          
          function compute(){ 
              var num = 0;
              for(let i = 0; i < 10 ; i++){//1+2+3+4+5+ ... + 9 =>(1+9)*9/2 = 45
                  num += i;
              }
              return num
          }

apply和call方法的相同点

它们都能改变函数执行时的上下文环境。例如在第一个实例中,通过call或apply传入的第一个参数context(即上下文对象,通常称为this),将构造函数A的作用域绑定到该对象上,使得this指向当前构造函数A的实例。

不同点

主要区别在于参数传递的形式。call方法的第二个参数可以是任意数据类型,包括函数、数组等;而apply方法要求的第二个参数必须是数组或类数组对象。

两个方法该如何选择?

选择依据主要取决于传入参数的形式。当不需要传参或仅有一个参数时,建议使用call;当需要传入多个参数时,应使用apply,以便将参数封装为数组传递。

以上就是JS函数的call和apply的实现方法区别分析的详细内容,更多关于JS函数call apply方法的资料请关注本站其它相关文章!

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章