JS函数的call和apply的实现方法区别分析

 更新时间:2023年10月15日 15:23:44   作者:阳哥  
这篇文章主要为大家介绍了JS函数的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传递的是必须是数组或者类数组。

两个方法该如何选择?

根据你要传入的参数来做选择,不需要传参或者只有1个参数的时候,用call,当要传入多个对象时,用apply

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

相关文章

  • js下写一个事件队列操作函数

    js下写一个事件队列操作函数

    异步操作可能会产生你不希望的事件触发顺序。这个问题以前也遇到过,当时没想太多,也就是直接多层嵌套(在ajax返回以后嵌套下一个事件)来解决。
    2010-07-07
  • js 使用方法与函数 总结

    js 使用方法与函数 总结

    js使用方法小结,比较不错,无论是新手,还是老手都是不错的。
    2009-05-05
  • 原创javascript小游戏实现代码

    原创javascript小游戏实现代码

    javascript小游戏实现代码,喜欢用javascript实现游戏效果代码的朋友可以参考下。
    2010-08-08
  • js和css写一个可以自动隐藏的悬浮框

    js和css写一个可以自动隐藏的悬浮框

    用js和css写一个可以自动隐藏的悬浮框。css肯定是用来控制样式的,js用来控制器显示与隐藏的,需要的朋友可以参考下
    2014-03-03
  • 查看QQ是否在线状态的网页代码

    查看QQ是否在线状态的网页代码

    这个其实就是利用qq官方提供的东西,简单的通过图片来测试是否在线,隐身也是不在线状态。纯粹学习使用。
    2010-04-04
  • Javascript动手实现call,bind,apply的代码详解

    Javascript动手实现call,bind,apply的代码详解

    这篇文章主要为大家详细介绍了Javascript动手实现call,bind,apply的代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-02-02
  • JavaScript实现离开页面前提示功能【附jQuery实现方法】

    JavaScript实现离开页面前提示功能【附jQuery实现方法】

    这篇文章主要介绍了JavaScript实现离开页面前提示功能,结合具体实例形式分析了javascript实现针对关闭页面的事件响应原理与操作技巧,并附带jQuery的相应实现方法,需要的朋友可以参考下
    2017-09-09
  • JS实现的DOM插入节点操作示例

    JS实现的DOM插入节点操作示例

    这篇文章主要介绍了JS实现的DOM插入节点操作,结合实例形式分析了javascript针对页面dom元素动态操作相关实现技巧,需要的朋友可以参考下
    2018-04-04
  • Cropper.js进阶之实现圆形头像裁剪功能示例

    Cropper.js进阶之实现圆形头像裁剪功能示例

    这篇文章主要为大家介绍了Cropper.js进阶之实现圆形头像裁剪功能示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • js实现放大镜效果的思路与代码

    js实现放大镜效果的思路与代码

    这篇文章主要为大家详细介绍了js实现放大镜效果的思路与代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10

最新评论