JavaScript函数的四种调用模式

  • 函数调用模式

  • 单独独立调用的就是函数:函数名(参数)

  • 任何自调用函数都是函数模式

  • this表示全局变量

  • 方法调用模式

  • 方法本身也是函数,但是方法不能单独调用,而是通过一个对象引导调用:对象.方法(参数)

  • this表示引导方法的对象

  • 构造器模式

  • 需要使用new关键字引导调用。

  • new 是一个运算符, 专门用来申请创建对象, 创建出来的对象传递给构造函数的 this

  • return返回值
    - 如果不写return语句,那么构造函数默认返回this
    - 如果构造函数中写上return语句,并且紧跟的是 基本数据类型return 123;),则忽略返回属性。
    - 如果构造函数中写上return语句,并且紧跟的是 引用类型 那么构造函数返回引用类型数据,忽略 this

  • 上下文模式

  • 不同环境下的不同调用模式(有统一的一种格式,可以实现函数模式与方法模式)

  • 语法(call与apply功能完全一样,区别在于参数不同)
    - call形式 -----> 函数名.call(参数1,参数2,参数3...);
    参数1:如果是null则为函数调用{函数名.call(null)/函数名.call()},如果为对象就是宿主对象,则为方法调用;
    参数2,参数3....:就是调用函数的所有参数
    - apply形式 ------> 函数名.apply(参数1,[参数2]);
    参数1:如果是null则为函数调用{函数名.call(null)/函数名.call()},如果为对象就是宿主对象,则为方法调用;
    参数2:是一个数组参数,将函数的参数依次放入数组.

             <script>    
                 //上下文调用模式,也叫方法借用模式
                 //call方法和apply方法的作用:改变一个函数在调用时的this指向。
                 function fn(a,b,c,d){
                     console.log(this)
                     console.log(a,b,c,d)
                 }
                 var obj = {}
                 //使用call方法和apply方法改变 fn函数内部的this指向,让其成为obj
                 var arr1 = [1,2,2,3]
                 fn.call(obj,1,2,2,3);
                 fn.apply(obj,arr1);
             </script>
    
  • 补充bind方法

  • 提到 callapply 方法,这里介绍 bind 方法

  • bind 方法会预先改变 this 指向,并且可以预先存入部分参数。

         <script>    
             function fn(a,b){
                 console.log(this)
                 console.log(a,b)
             }
             var obj = {};
             function listToArray(list){
                /* return [].slice.call(list,0)*/
                return [].slice.apply(list,[0])
             }
         
             //bind方法会预先改变this指向,并且可以预先存入部分参数。
         
             Function.prototype.bind=function(){
                 //缓存下this也就是调用bind方法的fn
                 var that = this;
                 //arguments的第一项是thisObj,也就是fn改变之后的this指向,要先存起来
                 var thisObj = arguments[0];
                 //arguments剩余的项是第一次传入的参数集合,把他们转化为一个数组保存起来。
                 var firstArg = listToArray(arguments).slice(1)
                 //bind方法返回一个新的函数,函数执行的结果就是fn执行的结果,因此return值就是fn执行的返回值
                 return function(){
                     //获取第二次传入的参数列表。
                     var secondArg = listToArray(arguments);
                     //把第一次传入的参数和第二次传入的参数合并成一个完整的参数数组。
                     var finalArg = firstArg.concat(secondArg)
                     //fn在这里才真正被调用,that就是fn,通过apply方法把fnthis指向变成thisObj,并且把参数一次性传入fn当中。
                     return that.apply(thisObj,finalArg)
                 }
             }
             var f = fn.bind(obj,1)
             f(2)
         </script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容