美文网首页
javascript call与apply关键字的作用

javascript call与apply关键字的作用

作者: 落雨飞尘 | 来源:发表于2017-08-31 10:45 被阅读0次

    javascript call与apply关键字的作用
    apply接受两个参数。第一个参数指定函数体内this对象的指向,第二个参数为一个带下标的集合。
    call则是apply的语法糖,如果参数数量固定,则可以不用带下标的集合传第二个参数。

    var func = function(a,b,c){
      alert(a + b + c);
    }
    func.apply(null,[1,2,3]);//弹出6
    func.call(null,1,2,3);//弹出6
    

    当apply与call传入的第一个参数为null时,函数体内的this会指向window。
    当apply与call传入的第一个参数为null时,函数体内的this会指向window。
    call与apply的用途
    1、改变this的指向

    var obj1 = {
     name = '刘备'
    }
     
    var obj2 = {
     name = '曹操'
    }
    var getName = function(){
       alert(this.name);
    }
    window.name = '三国';
    getName();//弹出"三国"
    getName.call(obj1);//弹出"刘备"
    getName.call(obj2);//弹出"曹操"
    

    所以,当在一些情况下this被莫名改变指向之后,可以使用call或apply来进行修正this的指向。

    document.getElementById('div1').onclick = function(){
       alert(this.id);//div1
       var fun1 = function(){
            alert(this.id);//window.id 即undefined
       }
       fun1();//普通函数的方式调用,this指代window,相当于window.id 即 undefined
    }
    

    由于是普通函数的方式调用,所以上面的例子中,this已经变成了window。下面看看如何使用call进行修正。

    document.getElementById('div1').onclick = function(){
       alert(this.id);
       var fun1 = function(){
            alert(this.id);
       }
       fun1.call(this);//强制函数内的this为外层的this,
    }
    

    2、调用其他对象的函数
    示例1:

    var obj1 = {
       a:1,
       b:2,
       add:function() {
          return this.a + this.b;
       }
    }
    var obj2 = {
       a:1,
       b:2,
    }
    var result = obj1.add.call(obj2);//用obj1的函数来计算obj2的两个属性的和
    alert(result);//输出3
    

    示例2:借用构造函数实现类似继承的效果

    var A = function(name){
       this.name = name;
    };
    var B = function(){
       A.apply(this,arguments)
    }
    B.prototype.getName = function(){
       return this.name;
    }
    var b = new B('刘备');
    alert(b.getName());
    

    相关文章

      网友评论

          本文标题:javascript call与apply关键字的作用

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