美文网首页
深入理解apply,call的区别及应用场景

深入理解apply,call的区别及应用场景

作者: fangdown | 来源:发表于2017-03-03 23:54 被阅读0次

    带着以下问题看文章:

    什么是apply、call,有什么区别

    apply、call是用来做什么的,在哪些场景下应用

    方法定义:

    call方法:call(obj,x,y,z,.....)

    调用一个对象的一个方法,以另一个对象替换当前对象

    call方法可以用来代替另一个对象调用一个方法(本身无该方法,才选择调用)。call方法可以将一个函数的上下文从初始的对象转成obj指向的新对象。

    如果没有提供obj对象,那么Global对象被指做obj。

    apply方法:apply(obj,[x,y,z])

    应用某一对象的一个方法,用另一个对象替换当前对象。

    如果第二个参数不是一个有效的数组或者不是arguments对象,将会报错TypeError

    如果没提供obj对象,那么Global对象被指做obj。

    应用场景:

    1,函数之间的相互调用

    function add(a,b){

          alert(a+b);

    }

    function sub(a,b){

        alert(a-b);

    }

    add.call(sub,5,6); //弹出11,对象替换,等等这不是函数吗??  其实函数名是Function对象的引用。

    思考:用apply怎么写呢?

    add.apply(sub,[5,6]); 也是弹出11,从这里可以看出apply和call的参数方式是不一样的,call的参数适合用于可明确值,且简短的参数,apply的参数适合用于数组元素较多的场景

    2,构造函数之间的调用

    function Person(){

         this.age = 50;

         this.showAge= function(){

                alert(this.age);

        }

    }

    function Son(){

        this.age  = 20;

    }

    var father  = new Person();

    var xiaoming = new Son();

    此时 father.showAge()是正常执行的,xiaoming.showAge()是undefined,为啥undefined呢,属性不存在均为undefined

    xiaoming 是没有showAge方法的,那如果想要知道xiaoming的年龄呢?

    father.showAge.apply(xiaoming) //立即执行显示20

    father.showAge.call(xiaoming)//立即执行显示20

    xiaoming.showAge();报错,会说showAge() is not a function

    此时说明将方法应用于另一个对象时,仅仅是对另一个对象执行此方法,结束之后,该对象不拥有此方法,

    那么如果想要另一个对象也拥有这个方法呢?

    还是刚刚的例子,我们在Son方法中添加代码:

    function Son(){

        this.age  = 20;

        Person.call(this);

       //Person.apply(this)

    }

    这里需要注意的是重新定义Son方法之后,需给xiaoming重新赋值,不然获取不到刚刚修改的showAge,

    再执行xiaoming.showAge(),结果显示可以使用这个方法了,但是弹出的值是50,想想看为什么?

    多重继承

    使用多个call 或者apply 即可。

    场景1:找出一个数组的最大值或最小值,数组值很多且不定

    var arr  = [1,2,3,.......n]

    Math.min.apply(this,arr),this可随便换,但需是一个对象

    为什么不用call?参数不定且太多,无法书写,

    场景2:var arr1= [1,2,3],arr2= [5,6,7,8]。将arr2的值放入到arr1中

    首先想到的是什么方法,contact?for循环 然后push?

    用apply可一行代码解决:Arrray.prototype.push.apply(arr1,arr2)

    contact方法返回的是新数组,而不是直接改变arr1的值。

    引入另外一个话题:数组方法哪些是改变原数组的,哪些是不会改变原数组的

    相关文章

      网友评论

          本文标题:深入理解apply,call的区别及应用场景

          本文链接:https://www.haomeiwen.com/subject/hdfdgttx.html