call method calls a method of an object and replaces the current object with another object."/> call method calls a method of an object and replaces the current object with another object.">

Home  >  Article  >  Web Front-end  >  Detailed explanation of how to use call and apply to implement inheritance in javascript

Detailed explanation of how to use call and apply to implement inheritance in javascript

伊谢尔伦
伊谢尔伦Original
2017-07-20 15:02:301827browse

Both call and apply in js can be inherited. The only parameter difference is that the apply corresponding to func.call(func1,var1,var2,var3) is written as: func.apply(func1,[var1,var2 ,var3]).

Explanation of call in the JS manual:

d41813e6630d9f7e981ba6f409905b82call method
Call a method of an object to Another object replaces the current object.

call([thisObj[,arg1[, arg2[,   [,.argN]]]]])

Parameters
thisObj
Optional. The object that will be used as the current object.

arg1, arg2, , argN
Optional. A sequence of method parameters will be passed.

Description
The call method can be used to call a method instead of another object. The call method changes the object context of a function from the initial context to the new object specified by thisObj.

If the thisObj parameter is not provided, the Global object is used as thisObj. 0fe0b7695b8025b8365ca0c050e039db

To put it simply, the function of these two functions is actually to change the internal pointer of the object, that is, to change the content pointed to by this of the object. This is sometimes useful in object-oriented js programming. Let's take apply as an example to talk about the important role of these two functions in js. For example:

<SPAN style="FONT-SIZE: 18px"> function Person(name,age){   //定义一个类   
        this.name=name;     //名字   
        this.age=age;       //年龄   
        this.sayhello=function(){alert(this.name)};  
    }  
    function Print(){            //显示类的属性   
        this.funcName="Print";  
        this.show=function(){  
            var msg=[];  
            for(var key in this){  
                if(typeof(this[key])!="function"){  
                    msg.push([key,":",this[key]].join(""));  
                }  
            }  
            alert(msg.join(" "));  
        };  
    }  
    function Student(name,age,grade,school){    //学生类   
        Person.apply(this,arguments);//比call优越的地方   
        Print.apply(this,arguments);  
        this.grade=grade;                //年级   
        this.school=school;                 //学校   
    }  
    var p1=new Person("开化",80);  
    p1.sayhello();  
    var s1=new Student("云飞",40,9,"岳麓书院");  
    s1.show();  
    s1.sayhello();  
    alert(s1.funcName);</SPAN>

In addition, Function.apply() plays a prominent role in improving program performance:
Let’s start with the Math.max() function. Math.max can be followed by any number of parameters. , and finally returns the maximum value among all parameters.
For example

<SPAN style="FONT-SIZE: 18px">alert(Math.max(5,8));   //8   
    alert(Math.max(5,7,9,3,1,6));   //9   
    //但是在很多情况下,我们需要找出数组中最大的元素。   
    var arr=[5,7,9,1];  
    //alert(Math.max(arr));    // 这样却是不行的。NaN   
    //要这样写   
    function getMax(arr){  
        var arrLen=arr.length;  
        for(var i=0,ret=arr[0];i<arrLen;i++){  
            ret=Math.max(ret,arr[i]);  
        }  
        return ret;  
    }  
    alert(getMax(arr)); //9   
    //换用apply,可以这样写   
    function getMax2(arr){  
        return Math.max.apply(null,arr);  
    }  
    alert(getMax2(arr)); //9   
    //两段代码达到了同样的目的,但是getMax2却优雅,高效,简洁得多。   
    //再比如数组的push方法。   
    var arr1=[1,3,4];  
    var arr2=[3,4,5];  
    //如果我们要把 arr2展开,然后一个一个追加到arr1中去,最后让arr1=[1,3,4,3,4,5]   
    //arr1.push(arr2)显然是不行的。 因为这样做会得到[1,3,4,[3,4,5]]   
    //我们只能用一个循环去一个一个的push(当然也可以用arr1.concat(arr2),但是concat方法并不改变arr1本身)   
    var arrLen=arr2.length;  
    for(var i=0;i<arrLen;i++){  
        arr1.push(arr2[i]);  
    }  
    //自从有了Apply,事情就变得如此简单   
    Array.prototype.push.apply(arr1,arr2); //现在arr1就是想要的结果</SPAN>


The above is the detailed content of Detailed explanation of how to use call and apply to implement inheritance in javascript. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn