web前端

创建对象的几种方式

2017-05-25  本文已影响3人  南蓝NL

真是百看不如一练啊

/*var box= new Object(); //创建一个对象

box.name= "xiaoju";  //给对象添加一个属性

box.age = 100;

box.run = function(){  //定义一个方法

return this.name + this.age + "运行中...";

}

var box1 = new Object();

box1.name = "nanlan";

box1.age = 200;

box1.run = function(){

return this.name +this.age;

}*/

/*alert(box.run());*/


//object构造函数创建多个对象,容易造成代码冗余

var box= new Object(); //创建一个对象

box.name= "xiaoju";  //给对象添加一个属性

box.age = 100;

box.run = function(){  //定义一个方法

return this.name + this.age + "运行中...";

}

var box1 = box;

box1.name = "nanlan";

box1.age = 200;

box1.run = function(){

return this.name +this.age;

}

alert(box.run());

alert(boxbdnare 1.run());

*/


//工厂模式,用函数封装特定接口创建对象的细节。工厂模式虽然解决了多个对象相似的问题,但是并没有解决对象识别的问题

function createObject(name,age){

varobj =newObject();

obj.name = name;

obj.age = age;

obj.run =function(){

return this.name +this.age +"运行中";

};//方法必须加上分号

returnobj;//返回对象引用,在工厂模式当中,必须有返回语句

}//函数可以不用

function createObject2(name,age){

varobj =newObject();

obj.name = name;

obj.age = age;

obj.run =function(){

return this.name +this.age +"运行中";

};//方法必须加上分号

return obj;//返回对象引用,在工厂模式当中,必须有返回语句

} //函数可以不用加分号

varbox =  createObject("nanlan",20);

varbox1 =  createObject("xiaoju",21);

varbox2 = createObject("yunju",22);

/*

alert(box.run());

alert(box1.run());*/

alert(boxinstanceofObject);

alert(box1instanceofObject);

alert(box2instanceofObject);

//这三个提示框都是ture,可是怎么它们是谁的对象呢,box 、box1是createObject的对象,box2是createObject2的对象,所以有了以下的方式——构造函数模式


//构造函数模式,解決了Object多个实例的问题和工厂模式对象识别的问题

function  Box(user,age){

this.user = user;

this.age = age;

this.run = run;

}

function  Desk(user,age){

this.user = user;

this.age = age;

this.run = function(){

return this.name + this.age;

}

}

function run(){   //把构造内部的方法通过全局实现

return this.user + this.age;

}

//构造函数没有new Object() ,但它后台自动 var obj = new Object;

//必须使用new构造函数名,new Box(),Box第一个字母也是大写的

//必须使用new 运算符

var box1 = new Box("nanlan",20);

var box2 = new Box("xiaoju",21);

alert( box1 instanceof  Object); 

alert( typeof box2);

alert(box1 instanceof  Box);

alert(box2 instanceof  Box);

alert(box3 instanceof  Box); //构造函数能够弥补工厂模式的缺点,即对象识别的问题,这句代码已经得到体现,这三个提示框的输出结果是ture,ture,false

var o = {};  //对象冒充

Box.call(o,"juju",20);

alert(o.run());*/

alert(box1.run() == box2.run()); //结果是false,因为他们比较的是地址


原型模式

function Box(){}

Box.prototype = {

constructor:Box,

name:'Lee',

age:100,

family:['哥哥','姐姐','妹妹'],

run: function(){

return this.name + this.age +"运行中"

}

};

var box1 = new Box();

/!*alert(box1.family);*!/

//box1.family=["苹果","香蕉","梨子"];

box1.family.push("苹果","香蕉","梨子");

box1.name="xiaoju";

alert(box1.family);

var box2 = new Box();

//alert( box2.family); //结果是 哥哥、姐姐、妹妹

alert(box2.family); // 结果是哥哥、姐姐、妹妹,苹果,香蕉,梨子

*/

//我的天那,这是原型模式的一个缺点。按道理来说实例是不能修改原型当中的实例属性和方法的,但是

//很明显在这里被修改了。原因是原型中所有属性是很多实例共享的,共享对于函数非常合适,对于包含基本类型的

//也還可以,但是如果属性包含引用类型,就存在一定的问题。解决办法是通过组合构造函数+原型模式去写


/*/组合构造函数 + 原型模式*/

function Box(name,age){  //保持独立的用构造函数

this.name = name;

this.age = age;

this.family = ["哥哥","姐姐","妹妹"];

}

Box.prototype = {  //保持共享的用原型

constructor: Box,

run:function(){

return this.name + this.age;

}

}

var box1 = new Box('nanlan',20);

box1.family.push('弟弟');

alert(box1.family);

var box2 = new Box("xiaoju",21);

alert(box2.family); //结果是哥哥、姐姐、妹妹


/*//寄生构造函数 = 工厂模式+构造函数模式

function Box(name,age){

var obj = new Object();

obj.name = name;

obj.age = age;

obj.run = function(){

return this.name + this.age;

}

return obj;

}

var box1 = new Box('Lee',100);

alert(box1.run());

var box2 = new Box('Jack',200);

alert(box2.run());*/


//稳妥构造函数

function Box(name,age){

var obj =new Object();

obj.name = name;

obj.age = age;

obj.run = function(){

return this.name +this.age;

}

return obj;

}

varbox1 = Box('nanlan',200);

alert(box1.run());

varbox2 = Box('xiaoju',100);

alert(box2.run());

上一篇下一篇

猜你喜欢

热点阅读