美文网首页
call()和apply()方法

call()和apply()方法

作者: 如真似梦 | 来源:发表于2016-11-16 09:36 被阅读0次

    call()和apply()方法

    1.方法定义

    说明: call和apply方法使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法

    call和apply两个方法其作用基本相同,但是也略微有一些区别。

    比如call的语法
    call([thisObj[,arg1[, arg2[, [,.argN]]]]])
    而apply的语法 
    apply([thisObj[,argArray]]) 
    

    其实也就是传递参数不同 , call和apply第一个参数为 ** 执行函数内部的指针引用对象 ** 或者this,上下文什么的。
    第二个参数就有点区别了 , call传入的参数是一个个分别传入 ,而apply是将参数以一个数组形式传入。

    2.实例

    
    var test = {
            a: 10,
            b: 20,
            sum: function(){
                return this.a + this.b
            }
        };
    var test2 = {
            a: 100,
            b: 200
        }
    
    

    上面两个对象,我想让test2也拥有test的sum方法该怎么办呢, 给test2增加一个sum方法? 那等于又歇了重复的代码, 这自然是不够优雅
    这个时候我们就可以用到call()方法了

    test.sum.call(test2) // => 300
    

    是不是很方便,这可以让我们在很多时候节省很多时间, 不必要的重复写相同的代码,那么下面来说一个复杂点的

    function Animal(type, legs) {
        this.type = type;
        this.legs = legs;
        this.logInfo = function() {
            console.log(this === myCat); // => false
        }
    }
    var myCat = new Animal('Cat', 4);
    setTimeout(myCat.logInfo, 1000);
    

    上面的代码 , 我们创建了一个Animal的构造函数并创造它的实例了myCat,然后再定时器里1秒后调用logInfo的方法
    但是结果并不是我们想象中的那样,为什么呢,因为在logInfo这个方法在作为参数传递给setTimeout时已经从原对象上分离了,所以1秒后发生的 是一个函数调用。
    那么这个logInfo作为函数调用的时候 , 它的this是全局对象,浏览器环境下也就是window,严格模式下是undefined,反正就不是myCat;

    setTimeout(myCat.logInfo.call(myCat), 1000);   // => true
    

    这样,我们就把logInfo方法的this 又指回myCat了,得到的也就是我们想要的结果。
    继承也就如上面的例子一样。

    相关文章

      网友评论

          本文标题:call()和apply()方法

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