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


Posted in Javascript onDecember 26, 2013

一,js中对象继承

js中有三种继承方式

1.js原型(prototype)实现继承

<SPAN style="BACKGROUND-COLOR: #ffffff"><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实现继承
<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和apply的用法(详细介绍)

js中call和apply都可以实现继承,唯一的一点参数不同,func.call(func1,var1,var2,var3)对应的apply写法为:func.apply(func1,[var1,var2,var3])。

JS手册中对call的解释:

<SPAN style="FONT-SIZE: 18px">call 方法  
调用一个对象的一个方法,以另一个对象替换当前对象。      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> 
Javascript 相关文章推荐
JSQL SQLProxy 的 php 版本代码
May 05 Javascript
xml转json的js代码
Aug 28 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
Jul 09 Javascript
纯js简单日历实现代码
Oct 05 Javascript
textarea 控制输入字符字节数(示例代码)
Dec 27 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
Oct 11 Javascript
jquery实现表格本地排序的方法
Mar 11 Javascript
浅谈javascript原型链与继承
Jul 13 Javascript
基于jQuery倒计时插件实现团购秒杀效果
May 13 Javascript
javascript 中iframe高度自适应(同域)实例详解
May 16 Javascript
Vue.js样式动态绑定实现小结
Jan 24 Javascript
Vue的Options用法说明
Aug 14 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
Dec 26 #Javascript
js中Math之random,round,ceil,floor的用法总结
Dec 26 #Javascript
js浮点数精确计算(加、减、乘、除)
Dec 26 #Javascript
js整数字符串转换为金额类型数据(示例代码)
Dec 26 #Javascript
Jquery解析json数据详解
Dec 26 #Javascript
Jquery getJSON方法详细分析
Dec 26 #Javascript
JQuery判断HTML元素是否存在的两种解决方法
Dec 26 #Javascript
You might like
用php实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
PHP flock 文件锁详细介绍
2012/12/29 PHP
深入mysql_fetch_row()与mysql_fetch_array()的区别详解
2013/06/05 PHP
php使用cookie显示用户上次访问网站日期的方法
2015/01/26 PHP
php中使用url传递数组的方法
2015/02/11 PHP
js url传值中文乱码之解决之道
2009/11/20 Javascript
jquery中ajax学习笔记一
2011/10/16 Javascript
jQuery实现的原图对比窗帘效果
2014/06/15 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
jQuery中通过ajax的get()函数读取页面的方法
2016/02/29 Javascript
Javascript中的几种继承方式对比分析
2016/03/22 Javascript
深入浅析JavaScript中的constructor
2016/04/19 Javascript
jQuery Mobile操作HTML5的常用函数总结
2016/05/17 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
2016/06/18 Javascript
Bootstrap风格的WPF样式
2016/12/07 Javascript
js实现楼层导航功能
2017/02/23 Javascript
video.js使用改变ui过程
2017/03/05 Javascript
JS身份证信息验证正则表达式
2017/06/12 Javascript
浅谈Vue.nextTick 的实现方法
2017/10/25 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
Python3 中作为一等对象的函数解析
2019/12/11 Python
Python要如何实现列表排序的几种方法
2020/02/21 Python
Python列表嵌套常见坑点及解决方案
2020/09/30 Python
分享一枚pycharm激活码适用所有pycharm版本我的pycharm2020.2.3激活成功
2020/11/20 Python
利用css3画个同心圆示例代码
2017/07/03 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
2020/04/16 HTML / CSS
美国最好的保健品打折网店:Swanson
2017/08/04 全球购物
大四毕业生学习总结的自我评价
2013/10/31 职场文书
汽车维修工岗位职责
2014/02/12 职场文书
社会稳定风险评估方案
2014/06/02 职场文书
落实八项规定专题民主生活会对照检查材料
2014/09/15 职场文书
中学生旷课检讨书2篇
2014/10/09 职场文书
老人再婚离婚协议书范本
2014/10/27 职场文书
分享几个JavaScript运算符的使用技巧
2021/04/24 Javascript
Java实现超大Excel文件解析(XSSF,SXSSF,easyExcel)
2022/07/15 Java/Android