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

javascript面向对象编程封装

2012-09-19 16:52 661 查看
Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class类

1.生成对象的原始模式

var Dog={

name:'',

color:''

};

现在我们根据原型对象的schema 生成两个实例对象

var dog1={};

dog1.name='大黄';

dog1.color='黄色';

var dog2={};

dog2.name='二黄';

dog2.color='黑色';

这就是最简单的封装了,把两个属性封装在一个对象里面。但这样的写法有两个缺点,一如果多生成几个实例,写起来就非常麻烦;二实例与原型之间,看不出有什么联系。

2. 原始模式的改进

写一个函数,解决代码复用的问题

function Dog(name,color)

{

return {

name:name,

color:color

}

}

生成对象实例就是在调用函数

var dog1=Dog('大黄','黄色');

var dog2=Dog('二黄','黑色');

这种方法的问题是依然dog1与dog2没有内在的联系,不能反映出来他们是同一个原型对象的实例。

3.构造函数模式

为了解决从原型对象生成实例的问题,javascript 提供了一个构造函数(Contructor)模式

所谓“构造函数”就是内部使用this,使用new生成实例

现在对象可以写成这样

function Dog(name,color)

{

this.name=name;

this.color=color;

}

生成实例

var dog1=new Dog('大黄','黄色');

var dog2=new Dog('二黄','黑色');

此时实例dog1与dog2拥有一个constructor属性,指向他们的构造函数

alert(dog1.constructor==Dog);//true

alert(dog2.constructor==Dog);//true

javascript 还提供了一个关键字instanceof来验证圆形对象与实例之间的联系

alert(dog1 instanceof Dog);//true

alert(dog2 instanceof Dog);//true

4.构造函数模式的问题

构造函数好用但是存在一个耗费内存的问题,我们现在给Dog对象添加一个不变的属性type和一个方法“吃”

function Dog(name,color)

{

this.name=name;

this.color=color;

this.type='动物';

this.eat=function (){alert('吃');}

}

生成实例

var dog1=new Dog('大黄','黄色');

var dog2=new Dog('二黄','黑色');

alert(dog1.type);//动物

dog2.eat();//吃

这样写表面上没有任何问题,但是生成每一个实例时,都有type和eat都会生成一模一样的内容,每次生成都会增加一样的内存,效率不高

alert(dog1.eat==dog2.eat);//false

能不能让同样的type和eat在内存中生成一次,然后所有实例都指向那个内存地址,答案是可以的

5. Prototype模式

javascript 规定 每一个构造函数都有一个prototype属性,指向另一个对象,这个对象的所有属性和方法都会被构造函数的实例继承

这就意味着我们可以把那些不变的属性和方法定义在prototype上

function Dog(name,color)

{

this.name=name;

this.color=color;

}

Dog.prototype.type='动物';

Dog.prototype.eat=function(){alert('吃');}

生成实例

var dog1=new Dog('大黄','黄色');

var dog2=new Dog('二黄','黑色');

alert(dog1.type);//动物

dog1.eat();//吃

这个时候所有实例的type与eat()都是相同的内存地址,指向prototype对象

alert(dog1.eat==dog2.eat)//true

6. Prototype模式的验证方法

1.isPrototypeOf() 判断某个prototype对象与实例之间的联系

alert(Dog.prototype.isPrototypeOf(dog1));//true

2.hasOwnProperty() 每个实例都有一个hasOwnProperty() 方法 用来判断一个属性是本地的还是继承与prototype对象

alert(dog1.hasOwnProperty('name'));//false

alert(dog1.hasOwnProperty('type'));//true

3.in 可以用来判断某个实例是否含有某个属性,不管是不是本地属性

alert('name' in dog1);//true

alert('type' in dog1);//ture

还可以遍历对象的属性

for(var i in dog1){ alert(dog1[i]);}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: