在创建对象的时候,使用对象字面量和 new Object() 构造函数的方式创建一个对象是最简单最方便的方式。但是凡是处于初级阶段的事物都会不可避免的存在一个问题,没有普适性,意思就是说我要为世界上(程序中)的所有使用到的对象都使用一遍 var xxx = {} ,对于'懒惰'的程序员来讲是不可以接受的。即便你能接受这种创建的方式,也无法保证将所有对象归类这一哲学问题。

  由此,优秀的程序员们利用现有的规则,创造出了一种种优秀的解决方案 -- 这些优秀的解决方案统称为设计模式。

  在 JavaScript 中,设计模式由初级到高级的区别是他们的副作用的大小。依次可以分为:

  • 工厂模式
  • 构造函数模式
  • 原型模式
  • others

  同时,使用设计模式也可以优雅的解决 JavaScript 在 ES6之前都是没有类的尴尬问题。

工厂模式

  工厂模式,顾名思义就是创建对象的一个工厂,工厂可以创造一类具有相似结构和功能的对象。这个模式的诞生也<span style="color: red">基本</span>解决了:

  • 创建多个对象的时候,需要大量重复代码

先看下在这种设计模式下,应该如何组织我们的代码:

function createPerson(name, age) {
var obj = new Object(); obj.name = name ;
obj.age = age;
obj.say = function() { console.log(this.name)} return obj;
} var p1 = createPerson('ZhangSan', 12);
p1.say() //ZhangSan
  • 这种叫工厂模式的设计模式:是指使用统一的方法(函数,因为 Js 没有类)来描述对象创建的细节
  • 把这个对象封装起来,每次使用类似的对象都使用这个工厂函数来创建。
  • 它抽象了创建一个对象的过程。

当然,处于初级阶段的 工厂模式, 一定有它处于初级阶段的道理:

优势:

  • 工厂函数可以解决创建多个类似功能对象的问题。

缺点:

  • 工厂模式无法解决对象的识别问题: 不知道对象是什么类型的。
  • 使用工厂函数创建的对象,只有开发者是知道它的类型的(通过工厂函数变量名),但是程序仍然认为它是一个普通的对象。
  • 每个对象都是通过工厂造就的全新的对象。

构造函数模式

  在 JavaScript 的开发中,经常会听说和使用的一个词语叫做构造函数,这里的构造函数就是出自构造函数模式这一种设计模式。在长时间的传承中,文化或者其他的名词都会变成一种泛称,所以人们常说的构造函数,有的时候指的是构造函数模式,有的时候指的是构造函数模式创造的对象中的构造函数方法(实例的 constructor )。

  构造函数是用来创建特定的类型的对象的。比如Js原生提供的ObjectArray。都是构造函数模式创建的原生构造函数。

惯例,看下在这种设计模式下,该如何组织代码:

function Person (name, age) {

    this.name = name;
this.age = age;
this.say = function() {
console.log(this.age);
} } var p1 = new Person('ZhangSan', 12);
var p2 = new Person('LiSi', 22);
p1.say() // 12
p2.say() // 22
  • 使用构建函数模式和工厂模式创建对象的区别:

    1. 没有明显的创建对象的过程: (new Object()的过程)
    2. 直接将参数赋值给了 this。(因为 没有创建明显的对象,就需要用 this 进行赋值)
    3. 没有 return 。
    4. 构造函数的首字母大写,这是代码风格上的变化(为了和其他的 OOM 语言的代码风格保持一致)
  • 创建一个由构造函数创建的对象,需要使用 new Person() 进行创建。
  • 使用构造函数创建对象经历了以下四个过程:

    1. 创建一个新对象
    2. 构造函数的作用域交给新对象。this指向新对象
    3. 执行内部代码,给新对象增加属性和方法
    4. 返回新对象
  • 由构造函数创建的对象称为这个构造函数的<span style="color: red">实例</span>,在实例中会存在一个 constructor 属性,这个属性指向创造它的构造函数。(证明自己从哪里来)

    p1.constructor == Person;  // true
    p2.constructor == Person; // true
  • 每一个实例都是可以被检测出来的,检测对象是否属于某一个类型,可以使用 instanceof XX

        p1 instanceof Person // true
    p1 instanceof Object // true

知道了构造函数模式创建实例的过程和方法,下面介绍一些使用构造函数方法中,一些不为人知的秘密(高级知识点):

  • 使用构造函数的时候常规操作是:使用操作符new。但是也可以直接当做一个普通的函数使用。
// Person 在上个 Demo

var p3 = Person('Person3', 33);
p3; // undefined;
p3.say(); // undefined; Person('Person4', 44);
window.say(); // 44;
  • 如果把构造函数当做普通函数使用了,就不能构造实例了,即使构造了实例,也都是 undefined
  • 直接使用 构造函数当做普通函数使用, 属性和方法会被添加到全局中(window/global)。
  • 当然也可以使用 call把 this 指向其他对象。(不了解 call,可以先忽略。call 是改变 this 指针的方式之一)。

  了解了高级用法之后,细心的孩子已经发现了构造函数方法作为 Level 2的设计模式,一定有哪里不对。其实很简单,在构造函数创建的过程中,很好的解决了工厂模式创建对象不知道类型的问题(不知道自己从哪里来)。在构想上,实例的属性和方法应该都是唯一指向的,理想情况是都指向构造函数。但是差强人意的地方出现了:

  • 属性都很好的指向了 构造函数。 this.name = name
  • 方法又自己偷摸的创建了新的对象(函数也是对象)。这就不符合理想的情况了,因为这个时候:
p1.say === p2.say   // false
  • 原理也很清楚啊:this.say = function() {} 就是 this.say = new Function() 啊。

这个时候,一个构造函数的补救措施出现了:

var Person = function(name, age) {
this.name = name;
this.age = age;
this.say = sayFunc;
} var sayFunc = function() {
console.log(this.age)
}
  • 使用额外的函数,将构造函数内的方法指向外部,这样就保证了实例方式的相同。

<u>俗话说的好,补救措施终究是补救措施</u>:

  • 在构造函数存在大量的方法的时候,外部会存在数量巨多的补救方法。
  • 补救方法在构造函数的外部,毫无封装性可言。
  • 外部方法也是一个普通的函数,也可以被其他方法或构造函数执行。
  • 外部方法被添加到 全局(window/global)上,性能浪费。如果在 window 上调用,this 就指向了 window。造成 this 指向混乱(谁调用,this 指向谁)

所以,构造函数的方法仍然是一个不完美的方法。但是在开发速度上,构造函数的设计模式还是有很大优势的。

而且当你需要你的方法在全局被使用的时候,构造函数模式是最适合的,这也是 Object, Array原生构造函数出现的原因。

JavaScript面向对象OOM 2(JavaScript 创建对象的工厂模式和构造函数模式)的更多相关文章

  1. javascript 面向对象编程(工厂模式、构造函数模式、原型模式)

      javascript 面向对象编程(工厂模式.构造函数模式.原型模式) CreateTime--2018年3月29日17:09:38 Author:Marydon 一.工厂模式 /** * 工厂模 ...

  2. 重学js之JavaScript 面向对象的程序设计(创建对象)

    注意: 本文章为 <重学js之JavaScript高级程序设计>系列第五章[JavaScript引用类型]. 关于<重学js之JavaScript高级程序设计>是重新回顾js基 ...

  3. javascript面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)

    面向对象可以把程序中的关键模块都视为对象,而模块拥有属性及方法.这样我们如果把一些属性及方法封装起来,日后使用将非常方便,也可以避免繁琐重复的工作.接下来将为大家讲解在JS中面向对象的实现.   工厂 ...

  4. javascript面向对象系列第二篇——创建对象的5种模式

    × 目录 [1]字面量 [2]工厂模式 [3]构造函数[4]原型模式[5]组合模式 前面的话 如何创建对象,或者说如何更优雅的创建对象,一直是一个津津乐道的话题.本文将从最简单的创建对象的方式入手,逐 ...

  5. js面向对象、创建对象的工厂模式、构造函数模式、原型链模式

    JS面向对象编程(转载) 什么是面向对象编程(OOP)?用对象的思想去写代码,就是面向对象编程. 面向对象编程的特点 抽象:抓住核心问题 封装:只能通过对象来访问方法 继承:从已有对象上继承出新的对象 ...

  6. 面向对象JS基础讲解,工厂模式、构造函数模式、原型模式、混合模式、动态原型模式

    什么是面向对象?面向对象是一种思想!(废话). 面向对象可以把程序中的关键模块都视为对象,而模块拥有属性及方法.这样我们如果把一些属性及方法封装起来,日后使用将非常方便,也可以避免繁琐重复的工作.接下 ...

  7. JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)

    什么是面向对象?面向对象是一种思想. 面向对象可以把程序中的关键模块都视为对象, 而模块拥有属性及方法. 这样如果我们把一些属性及方法封装起来,日后使用将非常方便,也可以避免繁琐重复的工作.   工厂 ...

  8. javascript面向对象程序设计系列(一)---创建对象

    javascript是一种基于对象的语言,但它没有类的概念,所以又和实际面向对象的语言有区别,面向对象是javascript中的难点之一.现在就我所理解的总结一下,便于以后复习: 一.创建对象 1.创 ...

  9. javascript工厂模式和构造函数模式创建对象

    一.工厂模式 工厂模式是软件工程领域一种广为人知的设计模式,这种模式抽象了创建具体对象的过程(本书后面还将讨论其他设计模式及其在JavaScript 中的实现).考虑到在ECMAScript 中无法创 ...

随机推荐

  1. 云计算共享组件--时间同步服务NTP(2)

    一.标准时间讲解 地球分为东西十二个区域,共计 24 个时区 格林威治作为全球标准时间即 (GMT 时间 ),东时区以格林威治时区进行加,而西时区则为减. 地球的轨道并非正圆,在加上自转速度逐年递减, ...

  2. 记一次 Vultr配置

    这里不想排版,因为心情复杂. 第一次搞这个VPS,真的是很气人,由于中英文的关系我一开始就误操作了,让VPS一直挂载着Ubuntu18.10,所以系统一直是在光盘的引导界面,这个问题知道我注册后的四个 ...

  3. (转)python基础学习-----生成器和迭代器

    在Python中,很多对象都是可以通过for语句来直接遍历的,例如list.string.dict等等,这些对象都可以被称为可迭代对象.至于说哪些对象是可以被迭代访问的,就要了解一下迭代器相关的知识了 ...

  4. String的非空判断:str!=""的为空判断出错问题

    if(str!=null && str!= ""){}这是错误的判断 String str1 = ""; String str2 = new S ...

  5. 【转帖】网卡多队列技术与RSS功能介绍

    网卡多队列技术与RSS功能介绍 2017年02月08日 15:44:37 Murphy_0806 阅读数 10665 标签: rss网卡dpdk 更多 个人分类: DPDK https://blog. ...

  6. [转帖]IBM收购红帽价格是多少?是否会形成垄断企业?会存在什么不安因素?

    http://www.techweb.com.cn/it/2019-07-10/2743776.shtml 国产的linux 用centos源的 如何是好呢.. 蓝色巨人IBM官方宣布,已经正式完成对 ...

  7. 区间前k小的和(权值线段树+离散化)--2019牛客多校第7场C--砍树

    题目链接:https://ac.nowcoder.com/acm/contest/887/C?&headNav=acm 题意: 给你 n 种树,有 高度,花费和数量 ,现在问你最少需要花多少钱 ...

  8. Android新版xUtils3工具类相关debug

    首先出现问题是 build.gradle中的csayısıom.lidroid.xutils:xutils:2.6.13报错了,所以想到是版本的问题,github上搜了xutils发现有新版xutil ...

  9. C#控制台输入/输出语句

    Console.Read()方法:          从控制台窗口读取一个字符,返回int值 Console.ReadLine()方法:    从控制台窗口读取一行文本,返回string值 Conso ...

  10. 梳理common-io工具包

    title: 梳理common-io工具包 comments: false date: 2019-08-28 14:21:58 description: 对common-io工具包中的常用类进行整理, ...