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

JavaScript中对象创建的几种方式

2017-05-21 00:00 337 查看

本文内容参考JavaScript高级程序设计（第3版）第6章：面向对象的程序设计

ECMA-262中把对象定义为：“无序属性的集合，其属性可以包含基本值、对象或者函数。”我所理解的就是对象就是一个结构体，结构体中有一些它的基本属性以及对结构体处理的方法，把它们封装起来称为一个整体。JS中所有的对象都是基于一个引用类型创建，这个引用类型可以是原生类型，如Array,Date等，也可以是开发人员自定义的类型。

下面主要总结下JS中创建对象的几种模式，分析他们各自的优缺点。

1. 工厂模式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

/******************工厂模式*************************/

/***使用同一个接口创建多个对象，避免代码重复，用一个函数来封装以特定接口创建对象的细节***/

/*****缺点：不能识别对象的类型（都是Object类型）******/

function

createPerson(name,age,job)

var

object =

new

Object();

object.name = name;

object.age = age;

object.job = job;

object.sayName =

function

()

alert(

this

.name);

return

object;

var

person1 =createPerson(

"Jack"

"22"

"singer"

);

var

person2 =createPerson(

"Taylor"

"30"

"actor"

);

工厂模式创建一个接口函数，在接口函数中新建一个对象，并为其定义属性和方法，每创建一个新的对象就调用这个接口函数。这种模式避免了创建同一类型对象的代码重复，但是这样创建的对象都是Object类型，无法体现出自定义类型的独特性。

2.构造函数模式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

/******************构造函数模式***********************/

/****与工厂模式的区别：********************************/

/****1.没有显式地创建对象******************************/

/****2.直接将属性和方法赋给了this对象*******************/

/****3.没有return语句*******************************/

/****缺点：每实例化一个对象就新创建了一个不同的Function实例（对象中的方法函数）*/

function

Person(name,age,job)

this

.name = name;

this

.age = age;

this

.job = job;

this

.sayName =

function

()

//每实例化一个对象就新创建一个Function实例

alert(

this

.name);

var

person1 =

new

Person(

"Jack"

"22"

"singer"

);

var

person2 =

new

Person(

"Taylor"

"30"

"actor"

);

//Person为实例的特定类型

构造函数模式也创建了一个函数接口，不过与工厂模式不同的是这不是普通的函数，而是构造函数。构造函数与普通函数在定义上没有区别，只是构造函数在调用时要在函数名前加一个“new”。用构造函数模式创建的对象有自己的类型名（如本例中的Person），但是它依然有缺陷：对象中的方法函数没有必要实例化，它最好可以只定义一次让所有同类型的对象共用，在这种模式下，每新建一个对象就新建了一次对象中的方法函数，代码不够简洁。

3.原型模式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

/**********************原型模式************************/

/****原型对象可以让所有对象实例共享它所包含的属性和方法********/

/****缺点：所有实例在默认情况下都将取得相同的属性值,没有属于自己的属性值*****/

function

Person()

{}

Person.prototype.name =

"Louis"

Person.prototype.age =

"23"

Person.prototype.job =

"singer"

Person.prototype.friend = [

"Harry"

"Liam"

];

Person.prototype.sayName =

function

()

alert(

this

.name);

};

var

person1 =

new

Person();

var

person2 =

new

Person();

person1.age =

"28"

//屏蔽原型对象中age属性，但不修改原型中的属性

alert(person1.age);

// 28 来自实例

alert(person2.age);

// 23 来自原型

person1.friend.push(

"zyan"

);

//修改了person1.friend引用的数组--原型对象中的属性

alert(person1.friend);

// "Harry,Liam,Zayn"

alert(person2.friend);

// "Harry,Liam,Zayn"

alert(person1.friend == person2.friend)

// true

无论什么时候，只要创建了一个新函数，就会根据一组特定的规则为该函数创建一个propotype属性，这个属性指向这个函数的原型对象。同时，这个原型对象也会获得一个constructor属性，这个属性包含一个指向这个新函数的指针。而调用构造函数创建一个新实例后，该实例的内部又将包含一个内部指针[[propotype]]，这个指针指向构造函数的原型对象。原型对象中的属性和方法可以被所有对象的实例共享。

获取某个实例的属性时，先搜索实例本身，也就是它的构造函数里有没有这个属性，如果有就直接返回这个值，如果没有则继续搜索构造函数的原型对象中的属性。所以在某一个对象中添加一个原型中已有的属性或方法时，会屏蔽原型中的属性，但原型中的属性不会被修改。

共享是原型模式的优点，它避免了大量重复的代码，但同时也带来了弊端。如示例中，在原型对象中定义了一个引用类型Array的属性--friend，person1实例向数组中添加了一项，但由于friend属性也同时在person2中，所以person2中的friend也跟着改变了，这不利于各个实例的独特性。-

4.组合使用构造函数模式和原型模式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

/****************构造函数模式和原型模式混合********************/

/****构造函数模式用于定义实力属性，原型模式用于定义方法和共享属性****/

/****每个实例都有自己的一份实例属性副本，方法共享，节省内存*********/

function

Person(name,age,job)

this

.name = name;

this

.age = age;

this

.job = job;

this

.friend = [

"Harry"

"Liam"

];

Person.prototype.sayName =

function

()

alert(

this

.name);

var

person3 =

new

Person(

"Lious"

,22,

"singer"

);

var

person4 =

new

Person(

"Zyan"

,21,

"dancer"

);

person3.friend.push(

"Nail"

);

alert(person3.friend);

//"Harry,Liam,Nail"

alert(person4.friend);

//"Harry,Liam"

这种方法综合了构造函数模式和原型模式的优点，构造函数模式用于定义实例属性，原型模式用于定义方法和共享的属性。每个实例都会有自己的一份实例属性的副本，同时又共享着对方法的引用，最大限度地节省了内存。在这种模式下person1改变它的friend属性并不会影响到person2，因为friend属性写在了构造函数中，每创建一个新的实例都会生成这个属性的新的副本，所以person1和person2中的friend数组是不同的数组。

构造函数模式个原型模式的混合模式是实际开发中最常用的创建对象的模式。

5.寄生构造函数模式

这种模式的基本思想是创建一个函数，该函数的作用仅仅是封装对象的代码，然后再返回新创建的对象。但是返回的对象与构造函数或者构造函数的原型和原型属性之间没有关系，不推荐使用这种模式。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript对象创建

相关文章推荐

新的分享

章节导航