【9】JavaScript 面向对象高级——对象创建模式

linkin 发布于2019-08-23 18:21 / 1894人阅读

摘要：解决了构造函数模式不能共享方法的问题。六寄生构造模式流程创建一个构造函数，在这个函数内部创建一个对象，用返回对象。除了使用操作符并把使用的包装函数叫做构造函数以外，这个模式与工程模式其实是一模一样的。

JavaScript面向对象高级——对象创建模式 一、工厂模式

流程: 定义一个函数，函数返回对象。

适用场景: 需要创建多个对象，都是Object类型。

优点：完成了返回一个对象的要求。

缺点: 对象没有一个具体的类型，无法通过constructor识别对象, 都是Object类型。多个实例的sayName方法都是实现一样的效果，但是却存储了很多次。

// 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方法是不同的，因为存放的地址不同）。

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）所有的方法都是共享的，没有办法创建自己的属性和方法，也没有办法像构造函数哪像传递参数。

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）解决了构造函数模式不能共享方法的问题。

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）对原型对象的修改能在所有的实例中反映。

缺点：红宝书上说了这个方案非常完美。

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操作符并把使用的包装函数叫做构造函数以外，这个模式与工程模式其实是一模一样的。

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的值。

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"

云服务器 GPU云服务器面向对象设计模式 javascript 面向对象 javascript面向对象 javascript面向对象编程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105095.html

【连载】前端个人文章整理-从基础到入门

摘要：个人前端文章整理从最开始萌生写文章的想法，到着手开始写，再到现在已经一年的时间了，由于工作比较忙，更新缓慢，后面还是会继更新，现将已经写好的文章整理一个目录，方便更多的小伙伴去学习。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 个人前端文章整理从最开始萌生写文章的想法，到着手...

madthumb 2019-08-23 14:15 评论0 收藏0
JavaScript构造器理解

摘要：类类的概念应该是面向对象语言的一个特色，但是并不像，等高级语言那样拥有正式的类，而是多数通过构造器以及原型方式来仿造实现。因此，出现了构造函数方式，它的关键在于构造器概念的引入。于是，这就产生了构造函数原型法的类构造方法。类 Class 类的概念应该是面向对象语言的一个特色，但是JavaScript并不像Java，C++等高级语言那样拥有正式的类，而是多数通过构造器以及原型方式...

PiscesYE 2019-08-21 10:30 评论0 收藏0
JavaScript面向对象编程——RegExp类型

摘要：由于某些字符类非常常用，的正则表达式中，使用特殊转义字符表示他们。多行搜索代码示例对象创建对象可以通过引用类型创建正则表达式对象参数参数被称为模式，可以使任何简单或复杂的正则表达式，包含字符类限定符分组向前查找以及反向引用等。概述正则表达式是什么正则表达式（RegularExpression）：由一些普通字符和特殊字符组成的，用以描述一种特定的字符规则的表达式。正则表达式常用在一...

Magicer 2019-08-26 12:17 评论0 收藏0
2017年最好的javascript 书籍

摘要：请记住，这些书中的一些可能不是最新的，但概念和基础仍应适用。是最好的老师之一。的秘密由部分组成。在你完成这些书后，查看书籍和最好的本土书籍。我看过三本，第1本，第二本，第四本。第一本买的的实体书，其他两本看的是电子书。第一本是大名鼎鼎老道写的，书很薄，但是非常经典。javascirpt忍者秘籍是jquery的作者写的，也是非常经典。you dont kown js系列也是非常好。看了...

mingzhong 2019-08-20 15:05 评论0 收藏0