js中继承的几种用法总结(apply,call,prototype)
来源:互联网 发布:甘肃启航网络待遇 编辑:程序博客网 时间:2024/05/20 14:42
一,js中对象继承
js中有三种继承方式
1.js原型(prototype)实现继承
<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>
2.构造函数实现继承
<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>
3.call , apply实现继承
<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>
二、call和apply的用法(详细介绍)
js中call和apply都可以实现继承,唯一的一点参数不同,func.call(func1,var1,var2,var3)对应的apply写法为:func.apply(func1,[var1,var2,var3])。
JS手册中对call的解释:
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);
另外,Function.apply()在提升程序性能方面有着突出的作用:
我们先从Math.max()函数说起,Math.max后面可以接任意个参数,最后返回所有参数中的最大值。
比如
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就是想要的结果
0 0
- js中继承的几种用法apply,call,prototype
- js中继承的几种用法apply,call,prototype
- [转载]js中继承的几种用法总结(apply,call,prototype)
- js中继承的几种用法总结(apply,call,prototype)
- js中继承的几种用法总结(apply,call,prototype)
- js中继承的几种用法总结(apply,call,prototype)
- js中继承的几种用法总结(apply,call,prototype)
- js中继承的几种用法总结(apply,call,prototype)
- js中继承的几种用法总结(apply,call,prototype)
- js中继承的几种用法总结(apply,call,prototype)
- 为您解惑:js中继承的几种用法总结(apply,call,prototype).........
- JS中apply与call的用法
- js中call和apply的用法
- JS中apply与call的用法
- JS中apply与call的用法
- js中call和apply的用法
- !!js中call、apply、bind的用法
- js中call与apply的用法
- ACM--虫子爬井--模拟--HDOJ 1049--Climbing Worm--水
- python学习五
- poj1067 取石子游戏
- 【树分治】poj1741 tree
- single-number、single-number2,数组中只出现一次的数字
- js中继承的几种用法总结(apply,call,prototype)
- 开篇利市,谢谢这么多年的CSDN
- Leetcode 217. Contains Duplicate
- js和html的结合方式及js的变量声明和数据类型
- 搭建Apache Server +Tomcat 简单集群环境,实现session复制
- Mysql 数据备份与还原
- 剑指Offer:二叉树的镜像
- hdu2795(线段树,节点更新)
- 第一次只出现一次的字符