javascript中创建对象的方式及优缺点(二)

一、工厂模式

---

 

• 流程: 定义一个函数，函数返回对象。
• 适用场景: 需要创建多个对象，都是Object类型。
• 优点：完成了返回一个对象的要求。
• 缺点: 对象没有一个具体的类型，无法通过constructor识别对象, 都是Object类型。多个实例的sayName方法都是实现一样的效果，但是却存储了很多次。

?

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 26 27 28 29 30

// 1.工厂模式 function createPerson (name, age, job) { // 返回一个对象的函数==》工厂函数   // 显式的创建对象   var o = new Object()   o.name = name   o.age = age   o.job = job   o.sayName = function () {     alert(this.name)   }   return o // 返回对象 } var p1 = createPerson('Tom', 12, 'student') var p2 = createPerson('Mandy', 22, 'teacher')   // 或者： function createPerson (name, age, job) { // 返回一个对象的函数==》工厂函数   // 显式的创建对象        var o = {     name:name,     age:age,     job:job,     sayName: function () {       alert(this.name)     }   }   return o // 返回对象 } var p1 = createPerson('Tom', 12, 'student') var p2 = createPerson('Mandy', 22, 'teacher'

二、.构造函数模式

---

 

• 流程：创建一个构造函数，没有显式地创建对象，没有return语句，通过new操作符创建对象。
• 使用场景：需要创建多个类型确定的对象。
• 优点：可以通过constructor或者instanceof来识别对象实例的类型。
• 缺点：多个实例的sayName方法都是实现一样的效果，但是却存储了很多次（两个对象实例的sayName方法是不同的，因为存放的地址不同）。

?

1 2 3 4 5 6 7 8 9

function Person (name, age) {   this.name = name   this.age = age   this.sayName = function () {     alert(this.name)   } } var p1 = new Person('Tony', 14) var p2 = new Person('Bob', 15

三、原型模式

---

 

• 流程：创建一个构造函数，给这个函数的prototype添加属性和方法。通过new操作符创建对象。
• 使用场景：起始时对象内部数据是确定的。
• 优点：（1）sayName方法是共享的，所有实例的sayName方法都指向同一个。（2）可以动态的添加原型对象的方法和属性，并直接反映在对象实例上。
• 缺点：（1）由于p1和p2的name属性指向同一块内存区域，因此改变p1.name会导致p2.name改变。（2）所有的方法都是共享的，没有办法创建自己的属性和方法，也没有办法像构造函数哪像传递参数。

?

1 2 3 4 5 6 7 8 9

function Person () {} Person.prototype.name = 'Mandy' Person.prototype.age = 16 Person.prototype.sayName = function () {   alert(this.name) } var p1 = new Person() var p2 = new Person() p1.sayName() // "Mandy"

四、构造函数+原型组合模式

---

 

• 流程：自定义构造函数，属性在函数中初始化，方法添加到原型上。
• 适用场景：需要创建多个类型确定的对象。
• 优点：（1）解决了原型模式对于对象引用的问题。（2）解决了原型模式没有办法传递参数的问题。（3）解决了构造函数模式不能共享方法的问题。

?

1 2 3 4 5 6 7 8

function Person (name) {   this.name = name } Person.prototype.sayName = function () {   console.log(this.name) } var p1 = new Person('Mandy') p1.sayName() // Mandy

五、动态原型模式

---

 

• 流程：创建构造函数，在构造函数内部初始化属性，在构造函数内部在原型上添加方法。通过new操作符创建对象。
• 需要创建多个类型确定的对象。
• 优点：（1）可以在初次调用构造函数的时候就完成原型对象的修改。（2）对原型对象的修改能在所有的实例中反映。
• 缺点：红宝书上说了这个方案非常完美。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

function Person(name, age) {   // 属性   this.name = name   this.age = age   // 方法   // 判断sayName方法不存在的情况下，在原型上添加sayName方法。   if(typeof this.sayName != 'function') {     Person.prototype.sayName = function () {       console.log(this.name)     }   } } var p1 = new Person('Tom') p1.sayName() // "Tom

六、寄生构造模式

---

 

• 流程：创建一个构造函数，在这个函数内部创建一个对象，用return返回对象。通过new操作符创建。
• 除了使用new操作符并把使用的包装函数叫做构造函数以外，这个模式与工程模式其实是一模一样的。

?

1 2 3 4 5 6 7 8 9 10 11

function Person(name, age) { // 将创建对象的代码封装在函数中。   // 显式创建要返回的对象   var o = new Object()   o.name = name   o.age = age   o.sayName = function () {     console.log(this.name)   }   return o   // 返回对象 } var p1 = new Person('Mandy',18)

七、稳妥构造模式

---

 

• 优点：安全。除了调用sayName方法外，没有其他办法可以访问name的值。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

function Person (name, age) {   // 创建要返回的对象   var o = new Object()   // 添加方法   o.sayName = function () {     console.log(this.name)   }   // 返回对象   return o } var p1 = new Person('Mandy',20) p1.name  // undefined // 除了调用sayName方法外，没有其他办法可以访问name的值。 p1.sayName() // "Mandy"