您的位置:首页 > Web前端 > JavaScript

JS面向对象基础篇(封装 继承 多态)

2017-11-08 14:57 597 查看

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>
转载自:http://www.jianshu.com/p/a66f1ce2145a

                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  继承 对象 面向对象