前端学习笔记之八——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