前端学习笔记之八——js中的call()和apply()

      作业题目:

          自己写一个call 和 apply 的例子出来,并写出运行过程和结果。

----------------------------------------------------------------------

        印象中call()和apply()都是在函数运行过程中,改变调用对象的方法。具体用法还不太清晰。所以决定好好地查一查资料。通过阅读大量资料,差不多明白了这两个方法,他们的作用完全相同,用途都是在特定的作用域中调用函数,实际上等于设置函数体内this对象的值。第一个参数都为要替换的对象,不同点主要表现在第二个参数上。call()第二个参数为任意类型,如果为非数组也可以接收第三个、第四个参数,而apply()第二个参数必须是数组或者arguments,无第三个参数。

      call()和apply()作用完全相同,只是第二个参数传递参数的方式不一样。好吧,那就选择其中一个——call()方法来巩固知识吧。下面示例来自网络。

      示例1:

function Person(name,age) {  
   this.name=name;  
   this.age=age;  
   this.money = 500;
} 
function myFun(money) {        
    alert(this.money);
}
var money = 100;
myFun(money); //运行myFun函数时,this指向window,所以返回100。

  myFun.apply(window,[]);  //给myFun函数中的this指定了对象window,this即为window,这样结果同上。
  myFun.apply(new Person('zhangsan',23),[]); //给myFun函数中的this指定了对象new Person('zhangsan',23),而对象new Person('zhangsan',23)的money为500,所以返回值为500.
  myFun.call(new Person('zhangsan',23),money,300,'mycardId'); //返回值同上500,第二、三、四个参数为满足语法要求,此处无实际意义,不影响结果。

    结论:用call()或apply()第一个参数为一个对象,用来替换执行call()方法的函数中的this。

------------------------

    示例2:

    function add(a,b){
       alert(a+b); 
    } 
    function sub(a,b){
       alert(a-b); 
    }
    add.call(sub,3,1);//返回值为4。add()函数中没有this,这样就不需要sub来替换,于是忽略掉sub,这样就只剩下add(3,1),可以这样理解么?然后alert(3+1),结果为4。

-------------------------------

示例3:

function Animal(){   
    this.name = "Animal";   
    this.showName = function(){   
        alert(this.name);   
    }   
}     
function Cat(){   
    this.name = "Cat";   
}    
var animal = new Animal();   
var cat = new Cat();   
animal.showName.call(cat,",");//输出结果为Cat。同样,将call()的第一个参数cat去替换其前面animal函数内部的this,于是就相当于alert(cat.name)。第二个参数无实际意义,只是为了满足语法要求。

---------------------------------

示例4:

function Animal(name){     
    this.name = name;     
    this.showName = function(){     
        alert(this.name);     
    }
}
 function Cat(name){
    Animal.call(this, name);
}
var cat = new Cat("Black Cat");
cat.showName();//返回值为Black Cat。同样,还是将Cat()函数中的call()方法中的第一个参数this(指Cat本身)去替换Animal函数中的this。所以cat在执行showName()方法的时候就调用了Animal的showName()方法,这样的话,相当cat函数继承了Animal函数的所有属性和方法。

   结论,若call()第一个参数是this的时候,可实现继承,对调用call()方法的函数进行继承。

--------------------------------------

示例5: 

function Class10(){ 
    this.showSub = function(a,b){ 
        alert(a-b); 
    } 
}   
function Class11(){ 
    this.showAdd = function(a,b){ 
        alert(a+b); 
    } 
}   
function Class2(){ 
    Class10.call(this); 
    Class11.call(this); 
}
var class2=new Class2();
class2.showSub(1,2);  //返回值为-1。Class2()函数通过call()方法继承了 Class10()、 Class11()的所有方法和属性。

--------------------------------------------

    总之:call()的第一个参数如果是普通对象,那么这个对象就去代替调用call()方法的函数的内部的this;如果第一个参数是this(包含他的function),那么这个this就去代替调用call()方法的函数的内部的this,相当于这个function继承了调用call()方法的函数的所有属性和方法。

原文地址:https://www.cnblogs.com/vivian2016/p/5842315.html