首页 > 代码库 > JS面向对象基础篇(封装 继承 多态)
JS面向对象基础篇(封装 继承 多态)
首先我们要创建一个对象,我们可以利用javascript的语法特征,以类的思想来创建对象
一:封装
(1)原始方法,代码如下
<script> var obj=new Object(); obj.name=‘Tom‘; //给对象添加属性 obj.sex=22; obj.showName=function(){ //给对象添加方法 alert(this.name); } obj.showAge=function(){ alert(this.age); } obj.showName(); //‘Tom‘ obj.showAge(); //22 //上面的方式通过new关键字生成一个对象,然后根据javascript是动态语言的特性来添加属性和方法,构造一个对象。其中this表示调用该方法的对象。 这种方式的问题是如果需要多次创建对象,那么需要重复代码多次,不利于代码的复用。 </script>
(2)工厂加工, 代码如下
<script> function createObj(name,age){ var Obj=new Object(); obj.name=name; obj.age=age; obj.showName=function(){ alert(this.name); } obj.showAge=function(){ alert(this.age); } return obj; } var obj1=createObj(‘sun‘,22); var obj2=createObj(‘leo‘,21); obj1.showName(); //sun obj1.showAge(); //22 obj2.showName(); //leo obj2.showAge(); //21 //上面通过定义几个函数的对象,解决了不同对象持有函数对象的私有属性问题。现在所有对象的方法都持有上面两个函数的引用,但这么一来,对象的函数又和 对象相互独立了,这和面向对象中持有方法属于与特定类的思想不符。 </script>
(3)构造函数方式, 代码如下
<script> function person(name,age){ //var this=new Object(); //系统模拟创建对象 this.name=name; this.age=age; this.showName=function(){ alert(this.name); } this.showAge=function(){ alert(this.age); } //return this //系统模拟返回了对象 } var obj1=new person(‘sun‘,22); var obj2=new person(‘leo‘,21); obj1.showName(); //sun obj1.showAge(); //22 obj2.showName(); //leo obj2.showAge(); //21 //构造函数的方式与工厂加工方式一样,会为每个对象创建独享的函数对象,当然也可以将这些函数对象定义在构造函数外面,这样又有了对象和方法 相互独立的问题 </script>
(4)原型方法, 代码如下
<script> function person(){} //定义一个空构造函数,且不能传递参数 person.prototype.age=22; person.prototype.array=[‘sun‘,‘leo‘]; person.prototype.showAge=function(){ alert(this.age); } person.prototype.showArray=function(){ alert(this.array); } var obj1=new person(); //生成一个person对象 var obj2=new person(); obj1.array.push(‘blue‘); //向obj1的array属性添加一个属性 obj1.showArray(); //‘sun‘,‘leo‘,‘blue‘ obj2.showArray(); //‘sun‘,‘leo‘,‘blue‘ //上面的代码通过obj1向obj1的属性array添加元素时,obj2的array属性的元素也跟着受影响,原因是在于obj1和obj2对象的array属性引用的是同一个Array 对象,那么改变这个Array对象,另一个引用Array对象的属性自然也会受到影响 </script>
(5)混合的构造函数/原型方式, 代码如下
<script> function person(name,age){ this.name=name; this.age=age; } person.prototype.showName=function(){ alert(this.name); } person.prototype.showAge=function(){ alert(this.age); } var obj1= new person(‘sun‘,22); var obj2= new person(‘leo‘,21); obj1.showName(); //sun obj1.showAge(); //22 obj2.showName(); //leo obj2.showAge(); //21 //属性私有后,改变各自的属性不会影响别的对象。同时,方法也是由各个对象共享的。在语义上,这符合了面向对象编程的要求。 </script>
二:继承(主要包括属性的继承和方法的继承)
代码如下 <script> function person(name, sex){ this.name=name; this.sex=sex; } person.prototype.showName=function(){ alert(this.name); } person.prototype.showSex=function(){ alert(this.sex); } //////////////////////////////////////////////////// function worker(name,sex,job){ person.call(this,name,sex);//构造函数伪装 调用父级的构造函数--为了继承属性 this.job=job; } //原型链 通过原型来继承父级的方法 for(attr in person.prototype){ worker.prototype[attr]=person.prototype[attr]; } worker.prototype.showJob=function(){ alert(this.job); } var op=new person(‘blue‘,‘男‘); var ow=new worker(‘blue‘,‘男‘,‘程序员‘); op.showName(); //blue op.showSex(); //男 ow.showName(); //blue ow.showsex(); //男 ow.showjob(); //程序员 //继承的好处:父类新加的功能,子类也具备该功能,子类新加的功能不会影响父类的功能 </script>
JS面向对象基础篇(封装 继承 多态)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。