zoukankan      html  css  js  c++  java
  • 前端学习笔记之八——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()方法的函数的所有属性和方法。

  • 相关阅读:
    windows 环境下 MySQL 8.0.13 免安装版配置教程
    mysql锁分析
    Sublime Text 安装sftp插件
    SecureCRT rz 上传文件失败问题
    java与javac版本不一致问题
    比较几种工具Python(x,y) Anaconda WinPython
    王石:没变强是因为你太舒服!
    网络爬虫urllib2 tornado
    R包介绍
    互联网金融必须知道:O2O、P2P、MRD、BRD、LBS、PV、UV、KPI、MRD、VP、UED....
  • 原文地址:https://www.cnblogs.com/vivian2016/p/5842315.html
Copyright © 2011-2022 走看看