手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >javascript 对象定义方法 简单易学
javascript 对象定义方法 简单易学
摘要:工厂模式:初级开发者可能会这样定义对象:varobj=newObject();obj.name="hero";obj.showName=fu...

工厂模式:

初级开发者可能会这样定义对象:

var obj = new Object();

obj.name = "hero";

obj.showName=function (){alert(this.name);}

这里存在一个问题就是如果我们要在多个地方用obj对象,可能在程序中类似的代码要写好多遍,于是产生了工厂方法

function createObj()

{

var obj = new Object();

obj.name="hero";

obj.showName=function (){alert(this.name);}

return obj;

}

var obj1 = createObj();

var obj2 = createObj();

和另外一种方法 构造函数法

function obj (name)

{

this.name=name;

this.showName= function (){alert(this.name);}

}

把生成对象的代码封装起来,避免出现重复new的代码,当然也可以进一步改进,就是createObj传递一些参数,而不是给obj赋默认固定值:

function createObj(name)

{

var obj = new Object();

obj.name=name;

obj.showName=function (){alert(this.name);}

return obj;

}

var obj1 = createObj("hero");

var o'b'j2=createObj("dby");

但是存在一个问题,就是我们每次调用createObj函数都会创建新的函数 showName.意味着每个对象都有自己版本的showName,所以要改进避开这个问题.

function showName()

{

alert(this.name)

}

function createObj(name)

{

var obj = new Object();

obj.name=name;

obj.showName=showName;

return obj;

}

这样就解决了 重复创建函数的问题, 哈哈哈,大功告成 .

原型方式:

主要是利用对象的prototype属性.

function obj()

{}

obj.prototype.name="hero";

obj.prototype.showName=function()

{

alert(this.name);

}

看起来似乎比刚才的工厂还完美,但是 有一个问题,该函数没有构造函数,属性是通过prototype指定的,这一点在实际应用中很让人头疼,所有的实例的属性都一样实在是不能让人接受.尤其还存在一个安全隐患,那就是当对象中有引用时,例如 加上这样一段

obj.prototype.nameArray = new Array("hero","dby");

然后

obj1 = new obj();

obj2 = new obj();

obj1.nameArray.push("lxw");

在obj2的nameArray中将也会看到这个属性,因为两个对象的nameArray指向的是同一个引用.

所以这种方式并不是理想方法.

需要 改进

结合构造函数,在构造函数定义属性,用原型定义方法

例如

fuction obj(name)

{

this.name = name

this.nameArray = new Array("hero","dby");

}

obj.prototype.showName = function(){alert(this.name)}

所有的非函数属性都在构造函数里创建,函数属性用prototype方式创建,obj1 中改变nameArray的值,不会影响到obj2对象的nameArray的值, 而且只有一个showName函数,所以没有内存浪费.

基本上完美了,剩下的基本都是一下其他的修饰了.有兴趣的可以自己改着玩玩.

笔者在这里加上一个单例 玩了一下:

function obj (name)

{

this.name = name;

this.nameArray=new Array("hero","dby");

if(typeof obj._initialized=='undefined')

{

obj.prototype.showName=function(){alert(this.name);}

obj._initialized="true";

}

}

其实不算是单例, 只不过是在构造对象的时候,先判断一个属性是否被定义,如果没有定义,那么用原型方法继续定义对象,如果已经定义了属性,那么就不在重复定义函数了. 该prototype方法只被创建一次,病赋值一次.

又差不多完美了,大功告成 .

这是个人的理解,,希望对大家有帮助,不完善的地方请qq联系,及时改正。

这是一个完整的实例:

function Rectangle(name,color,width,heigth){

this.name=name;

this.color=color;

this.width=width;

this.heigth=heigth;

}

Rectangle.prototype.area=function(){

return this.width*this.heigth

}

Rectangle.prototype.show=function(){

document.write(this.name+" "+this.color+" "+this.width+" "+this.heigth+"<br/>");

document.write(this.area());

}

var obj1= new Rectangle("Rectangle","red",15,20);

obj1.show();

【javascript 对象定义方法 简单易学】相关文章:

javascript实现查找数组中最大值方法汇总

JavaScript基本语法讲解

在JavaScript中使用NaN值的方法

javaScript中with函数用法实例分析

javascript中DOM复选框选择用法实例

javascript动态创建链接的方法

JavaScript中的sub()方法的使用介绍

javascript先序遍历DOM树的方法

JavaScript检测鼠标移动方向的方法

javascript用函数实现对象的方法

精品推荐
分类导航