`

javascript 创建对象的五种方式

阅读更多

我们知道javascript中没有像java那样的类和对象,但是它也可以实现一些对象功能。现在分别介绍javascript中五种创建对象的方法并介绍各自利弊。

 

1.工厂模式

 

利用javascript的Object对象方法创建优点是可以用构造方法创造很多对象,缺点是不能判断对象的所属“类”

function createUser(name,age){

var o = new Object();

o.name = name;

o.age = age;

o.sayName = function(){

return this.name;

};

return o;

}

 

var u1 = createUser("tom",23);

alert(u1 instanceof User);//缺点不知道对象类型 User undefined

 

2.构造函数模式化

 

类似于构造方法,可以用new进行创建对象;缺点是对象的方法被创建多次,占用内存大

function User(name,age){

this.name = name;

this.age = age;

this.sayName = function(){

alert(this.name);

}

}

var u1 = new User("alice",22);

var u2 = new User("tom",23);

alert(u1 instanceof User);//true // 可以判断u1 是属于User“类”

//缺点 对象的方法被创建多次

 

alert(u1.sayName == u2.sayName) //false  可以判定u1和u2的sayName 不相等

 

3.原型模式

利用javascript的prototype属性创建对象;克服了构造函数的缺点,却失去了构造函数方法的优点,即不能在new 的时候传递对象属性值;

还有一个致命缺点,那就是:属性引用对象类型时候会发生共享问题

function User(){};

User.prototype.name = "";

User.prototype.age = 0;

User.prototype.address = [];

User.prototype.sayName = function(){

alert(this.name);

}

var u1 = new User();

var u2 = new User();

alert(u1 instanceof User);//true

alert(u1.sayName == u2.sayName) //true

u1.name = "tom";

u1.sayName();

//缺点 1.不能具有构造函数 2.属性引用对象类型时候会发生共享问题(致命缺点)

u1.address.push("河南");

alert(u1.address);//河南

 

alert(u2.address);//河南   u2并没有对address赋值,却读取到了u1的值

 

 

4 混合模式 

混合了构造方法和原型模式,构造方法用来创建对象属性,原型模式用来创建对象方法

function User(name,age){

this.name = name;

this.age = age;

this.address = [];

 

}

User.prototype.sayName = function(){

alert(this.name);

}

var u1 = new User("alice",22);

var u2 = new User("tom",23);

alert(u1 instanceof User);//true

//对象的方法不会被创建多次

alert(u1.sayName == u2.sayName) //true

 

u1.address.push("河南");

u2.address.push("江西");

alert(u1.address);

alert(u2.address); //两个对象的爱address属性不会混淆

 

//比较完美了,最大的问题是方法写在对象外面了,不够优雅

 

动态原型模式

在混合模式上做出修改,更加优雅,把对象方法写在构造方法内部;可以

function User(name,age){

this.name = name;

this.age = age;

this.address = [];

//也可以理解为单例模式,防止后来创建的对象把之前的对象方法覆盖

if(typeof this.sayName != "function"){

User.prototype.sayName = function(){

alert(this.name);

}

}

}

var u1 = new User("alice",22);

var u2 = new User("tom",23);

alert(u1 instanceof User);//true

alert(u1.sayName == u2.sayName) //true

 

//可以认为是最好的状态

 

 

 

 

 

 

分享到:
评论
Global site tag (gtag.js) - Google Analytics