JS call和apply方法使用

总是对call和apply方法使用存在迷惑，特此记录一下

一句话理解这两个方法：

　　call和apply是为了动态改变this而出现的，当一个object没有某个方法，但是其他的有，我们可以借助call或apply用其它对象的方法来操作

举个栗子：

　　我们都知道在函数中有一个伪数组 arguments ，其结构像数组，但是没有数组的（join，slice）等方法，因此我们用call借用数组中的这些方法操作 arguments

    function fn(){
        console.log(Array.prototype.join.call(arguments,'-'));
    }
    fn('abc','bdc','fgv');

　　输出：·abc-bdc-fgv·

再举一个栗子：

　　通过document.getElementsByTagName选择的dom 节点是一种类似array的array，它不能应用Array下的push,pop等方法

var domNodes =  Array.prototype.slice.call(document.getElementsByTagName("*"));

到此我们大概可以了解call和apply的使用场景了

接下来具体介绍一下这两个方法

在下面代码中，我们定义了猫和狗两个类，其各自有自己的属性（name、color），但是狗没有eat和say这两个方法，因此可以通过call调用猫，cat的say方法中this指向会指向dog

　　function cat(obj){        
　　　　this.color = obj.color;        
　　　　this.name = obj.name;
    }
    cat.prototype = {
        food : 'fish',
        say : function (){
            console.log('喵~ , 我的名字叫'+this.name);
        },
        eat : function(food1,food2){
            console.log('我是'+this.name+',我吃'+ food1 + food2);
        }
    }
    var xiaobai = new cat({name:'xiaobai',color:'white'});

    function dog(obj){
        this.color = obj.color;
        this.name = obj.name;
    }
    dog.prototype = {
        food : 'bone'
    }
    var xiaohei = new dog({name:'xiaohei',color:'black'});

    xiaobai.say.call(xiaohei);    //这里调用猫的say方法，this指向 xiaohei
　 　喵~ , 我的名字叫xiaohei

    xiaobai.eat.apply(xiaohei,['骨头','肉']);    //apply可以跟多个参数，以数组的形式
　　我是xiaohei,我吃骨头肉

引用网友的一段话，帮助记忆这两个方法

扫描二维码关注公众号，回复： 794355 查看本文章

猫吃鱼，狗吃肉，奥特曼打小怪兽。

有天狗想吃鱼了

猫.吃鱼.call(狗，鱼)

狗就吃到鱼了

猫成精了，想打怪兽

奥特曼.打小怪兽.call(猫，小怪兽)

JS call和apply方法使用

猜你喜欢