js中继承的几种用法总结(apply,call,prototype)

浏览数：23 / 时间：2015年06月11日

本篇文章主要介绍了js中继承的几种用法总结(apply,call,prototype) 需要的朋友可以过来参考下，希望对大家有所帮助

一，js中对象继承

js中有三种继承方式

1.js原型（prototype）实现继承

<SPAN style="<SPAN style="FONT-SIZE: 18px"><html>

<body>
<script type="text/javascript">
    function Person(name,age){
        this.name=name;
        this.age=age;
    }
    Person.prototype.sayHello=function(){
        alert("使用原型得到Name："+this.name);
    }
    var per=new Person("马小倩",21);
    per.sayHello(); //输出：使用原型得到Name:马小倩


    function Student(){}
    Student.prototype=new Person("洪如彤",21);
    var stu=new Student();
    Student.prototype.grade=5;
    Student.prototype.intr=function(){
        alert(this.grade);
    }
    stu.sayHello();//输出：使用原型得到Name:洪如彤
    stu.intr();//输出：5
</script>
</body>
</html></SPAN></SPAN>

2.构造函数实现继承

复制代码代码如下:

<SPAN style="FONT-SIZE: 
18px"><html>  
<body>  
<script 
type="text/javascript">  
    function  Parent(name){  
        
this.name=name;  
        this.sayParent=function(){  
            
alert("Parent:"+this.name);  
        }  
    }  

    function  
Child(name,age){  
        this.tempMethod=Parent;  
        
this.tempMethod(name);  
        this.age=age;  
        
this.sayChild=function(){  
            
alert("Child:"+this.name+"age:"+this.age);  
        }  
    }  


    var parent=new Parent("江剑臣");  
    parent.sayParent(); 
//输出：“Parent:江剑臣”  
    var child=new Child("李鸣",24); //输出：“Child:李鸣 age:24”  

    child.sayChild();  
</script>  
</body>  

</html></SPAN> 

3.call , apply实现继承

什么情况下用apply,什么情况下用call

在给对象参数的情况下,如果参数的形式是数组的时候,比如apply示例里面传递了参数arguments,这个参数是数组类型,并且在调用的时候参数的列表是对应一致的就可以采用 apply , 如果我的一个对象的参数列表是这样的(age,name),而另外一个对象的参数列表是(name,age,grade),这样就可以用call来实现了,也就是直接指定参数列表对应值的位置(***.call(this,age,name,grade));

代码如下:

<SPAN style="FONT-SIZE: 
18px"><html>  
<body>  
<script 
type="text/javascript">  
    function  Person(name,age,love){  

        this.name=name;  
        this.age=age;  
        
this.love=love;  
        this.say=function say(){  
            
alert("姓名："+name);  
        }  
    }  

    //call方式  
    
function student(name,age){  
        Person.call(this,name,age);  
    }  


    //apply方式  
    function teacher(name,love){  
        
Person.apply(this,[name,love]);  
        //Person.apply(this,arguments); 
//跟上句一样的效果，arguments  
    }  

    //call与aplly的异同：  
    
//1,第一个参数this都一样,指当前对象  
    
//2,第二个参数不一样：call的是一个个的参数列表；apply的是一个数组（arguments也可以）  

    var per=new 
Person("武凤楼",25,"魏荧屏"); //输出：“武凤楼”  
    per.say();  
    var stu=new 
student("曹玉",18);//输出：“曹玉”  
    stu.say();  
    var tea=new 
teacher("秦杰",16);//输出：“秦杰”  
    tea.say();  

</script>  

</body>  
</html></SPAN>  

调用一个对象的一个方法，以另一个对象替换当前对象。

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

参数
thisObj
可选项。将被用作当前对象的对象。

arg1, arg2, , argN
可选项。将被传递方法参数序列。

说明
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。</SPAN>

说简单一点，这两函数的作用其实就是更改对象的内部指针，即改变对象的this指向的内容。这在面向对象的js编程过程中有时是很有用的。下面以apply为例，说说这两个函数在 js中的重要作用。如：

复制代码代码如下:

<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>  

另外，Function.apply()在提升程序性能方面有着突出的作用：
我们先从Math.max()函数说起，Math.max后面可以接任意个参数，最后返回所有参数中的最大值。
比如

代码如下:

<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> 