首页 ›存档› 技术 › 查看内容

JavaScript 创建对象之单例、工厂、构造函数模式

2018-3-30 13:00 |来自: 互联网 270 0

摘要: 01单例模式首先看一个问题，我们要在程序中描述两个人，这两个人都有姓名和年龄，可能刚刚开始学习js的时候会写成这样： var name1 = 'iceman'; var age1 = 25; var name2 = 'mengzhe'; var age2 = 26; 以上的写法 ...

01单例模式

首先看一个问题，我们要在程序中描述两个人，这两个人都有姓名和年龄，可能刚刚开始学习js的时候会写成这样：

var name1 = 'iceman';
var age1 = 25;

var name2 = 'mengzhe';
var age2 = 26;

以上的写法的确是描述两个人，每个人都有姓名和年龄，但是每个人的姓名和年龄并没有放在一起，也就是说每个人的年龄和姓名并没有对应起来。这时候我们就引出对象的概念：把描述同一个事物（同一个对象）的属性和方法放在同一个内存空间下面，起到了分组的作用，这样不同事物之间的属性即使属性名相同相互也不会发生冲突。

var person1 = {
  name:'iceman',
  age:25};

var person2 = {
  name:'mengzhe',
  age:26};

以上这种写法可以认为是一种分组编写代码的模式，通过如此分组之后，每一个人的姓名和年龄都在同一块内存空间下，也就是每个人的姓名和年龄都对应起来了。我们也把这种分组编写代码的模式称之为单例模式（在《JavaScript高级程序设计》中也称之为对象字面量模式），在单例模式中，把person1和person2叫做命名空间。

注意：JavaScript中的单例模式就是这样写的，和其他语言的单例模式有很大的区别，很多Java程序员可能觉得这不是单例模式，不过这就是语言的区别。

单例模式是一种项目开发中经常使用的模式，因为项目中我们可以使用单例模式来进行模块化开发，对一个相对来说比较大的项目中，需要多人协作开发，所以一般情况下会根据当前项目的需求，划分几个功能模块，每个人负责一部分，同时开发，最后把每个人的代码进行合并，比如：

公共模块：提供公共方法

var utils = {
 select:function () {
   //...
 }
};

页面选项卡模块：实现选项卡切换

var tabModule = {
 change:function () {
   utils.select(); // 在自己的命名空间下调用其他命名空间的方法
 }
};

搜索模块：实现搜索内容变化的处理

var searchModule = {
 change:function () {
   this.clickEvent(); // 在自己的命名空间下调用自己命名空间的方法
 },
 clickEvent:function () {
   //...
 }
};

以上在例子中，在选项卡模块（tabModule）和和搜索模块（searchModule）中都有change方法，如果没有分模块来编写的话会造成命名的冲突，按照JavaScript语言的解析规则，后声明的方法会覆盖前面声明的方法。而通过模块划分之后，这两个模块下的change方法归属于各自的模块，调用的时候都是调用自己模块下的方法（tabModule.change()、searchModule.change()），不会有冲突。

02工厂模式

回顾单例模式：

var person1 = {
  name:'iceman',
  age:25,
  writeJs:function () {
    console.log(this.name   'write js');
  }
};
person1.writeJs();

单例模式解决了分组的问题，让每个对象有了自己独立的命名空间，但是不能批量生产，每一个新的对象都要重新写一份一模一样的代码。这时候就有了工厂模式，即：把实现同一事情的相同代码，放到一个函数中，以后如果再想实现这个功能，就不需要重新编写这些代码了，只要执行当前的函数即可，这就是函数的封装，体现了高内聚、低耦合的思想：减少页面的中的冗余代码，提高代码的重复利用率：

function createPerson(name, age) {
  var obj = {};
  obj.name = name;
  obj.age = age;
  obj.writeJs = function () {
    console.log(this.name   'write js');
  }  return obj;
}

var p1 = createPerson('mengzhe' , 26);
p1.writeJs();

var p2 = createPerson('iceman' , 25);
p2.writeJs();

顺便讲一下重载：在Java、C#等强类型的面向对象编程语言中，有函数重载的概念，但是在JavaScript中不存在重载，如果方法名一样的话，后面的会把前面的覆盖掉，最后只保留一个方法的定义，不过我们可以根据传递的参数不一样，实现模拟重载的功能：

function sum(num) {  if (typeof num === 'undefined') {    return 0;
  }  return num;
}
sum(100);
sum();

03构造函数模式

function CreateJsPerson(name, age) {
  this.name = name;
  this.age = age;
  this.writeJs = function () {
    console.log(this.name   'write js');
  }
  // 浏览器再把创建的实例默认的进行返回
}
var p1 = new CreateJsPerson('iceman' , 25);
p1.writeJs();
var p2 = new CreateJsPerson('mengzhe' , 26);
p2.writeJs();

注意：上面是new CreateJsPerson('iceman' , 25)这样，使用了new创建了对象，这和普通调用函数的方式有区别的：