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 相关文章推荐
利用JS实现浏览器的title闪烁
Jul 08 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
Jul 02 Javascript
Javascript中的Callback方法浅析
Mar 15 Javascript
jquery实现简单的二级导航下拉菜单效果
Sep 07 Javascript
Bootstrap源码解读下拉菜单(4)
Dec 23 Javascript
详解vue中axios的封装
Jul 18 Javascript
微信小程序仿知乎实现评论留言功能
Nov 28 Javascript
小程序红包雨的实现示例
Feb 19 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
Oct 14 Javascript
浅谈Vue.set实际上是什么
Oct 17 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
Apr 08 Javascript
在Vue中使用HOC模式的实现
Aug 23 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
yii框架中的Url生产问题小结
2012/01/16 PHP
解析PHP 使用curl提交json格式数据
2013/06/29 PHP
2014过年倒计时示例
2014/01/31 PHP
php单链表实现代码分享
2016/07/04 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
js正文内容高亮效果的实现方法
2013/06/30 Javascript
获取表单控件原始(初始)值的方法
2013/08/21 Javascript
jQuery的text()方法用法分析
2014/12/20 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
2015/02/28 Javascript
JavaScript中for循环的使用详解
2015/06/03 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
2015/11/04 Javascript
BootStrap 附加导航组件
2016/07/22 Javascript
深入浅析JS Function()构造函数
2016/08/22 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
2016/12/02 Javascript
js实现产品缩略图效果
2017/03/10 Javascript
es7学习教程之Decorators(修饰器)详解
2017/07/21 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
2018/10/30 Javascript
原生js实现淘宝放大镜效果
2020/10/28 Javascript
vue3为什么要用proxy替代defineProperty
2020/10/19 Javascript
python开发之list操作实例分析
2016/02/22 Python
浅谈pycharm出现卡顿的解决方法
2018/12/03 Python
python3 写一个WAV音频文件播放器的代码
2019/09/27 Python
Python描述符descriptor使用原理解析
2020/03/21 Python
简约控的天堂:The Undone
2016/12/21 全球购物
Jowissa官方网站:瑞士制造的手表,优雅简约的设计
2020/07/29 全球购物
酒店办公室文员岗位职责
2013/12/18 职场文书
互联网创业计划书写作技巧攻略
2014/03/23 职场文书
公司应聘求职信
2014/06/21 职场文书
公共艺术专业自荐信
2014/09/01 职场文书
小学中队长竞选稿
2015/11/20 职场文书
2016年“世界气象日”广播稿
2015/12/17 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书
教你如何使用Python实现二叉树结构及三种遍历
2021/06/18 Python
pt-archiver 主键自增
2022/04/26 MySQL