JavaScript设计模式

Posted 2022-12-05 召唤师峡谷

一、工厂模式

工厂模式是软件工程领域一种广为人知的设计模式，这种模式抽象了创建具体对象的过程，可以用函数来封装以特定接口创建对象的细节。
之前在Java的DAO中用过这种设计模式，比较容易理解。

function createPerson(name,age,sex)
    var obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.sex = sex;

    obj.sayHi() = function()
        console.log("Hello" + this.name);
    ;  //引号不要漏掉，养成好的习惯

    return obj;


var person1 = createPerson("bluce",58,"man");
var person2 = createPerson("john",68,"man");

使用工厂模式创建对象的三个步骤：

1. 显示地创建一个对象（使用Object()构造函数）
2. 直接将属性和方法赋值给了创建的对象
3. 使用return语句返回创建的对象

工厂模式解决了创建多个相似对象的问题，但没有解决对象识别的问题（如何知道一个对象的类型，instanceof检测）

二、构造函数模式

在javascript中可以使用构造函数来创建特定类型的对象，如var obj = new Object();var arr = new Array();也可以创建自定义的构造函数，从而自定义对象类型的属性和方法。上述工厂模式的创建对象的例子可以改为如下代码：

function Person(name,age,sex)
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.sayHi = function()
        console.log("Hello" + this.name);   
    ;

var person1 = new Person('Rose',22,girl);
var person2 = new Person('bluce',23,boy);

按照惯例，构造函数始终都应该以大写字母开头，非构造函数则以小写字母开头，主要为了与其他函数区别。
要创建一个Person实例，必须使用new操作符。以new 操作符调用构造函数创建一个对象会经历四个步骤：

person1和person2分别保存着Person的一个不同实例。这两个对象都有一个 constructor（构造函数）属性，该属性指向Person（构造函数）

console.log(person1.constructor == Person);//true

对象的constructor属性可以用来标识对象所属的类别。但检测对象，更可靠的还是instanceof操作符。我们上述例子中创建的对象既是Object的实例（所有对象均继承自Object），也是Person的实例。

console.log(person1 instanceof Object);//true
console.log(person1 instanceof Person);//true

创建自定义的构造函数意味着可以将它的实例标识为一种特定的类型；在使用中可以检测对象的类别

---

1、将构造函数当做函数使用

构造函数与其他函数的唯一区别在于调用方式不同（new操作符），但其本质仍是函数，不存在定义构造函数的特殊语法。任何函数，只要通过new 操作符来调用，那么它就可以作为构造函数；而任何函数，如果不通过new 操作符来调用，那它跟其他普通函数没啥两样。例如

//当做构造函数调用
var person = new Person('James',31,'Man');
person.sayHi();//Hello James

//作为普通函数调用
Person("John",32,"Man"); //添加到全局作用域中，即window
window.sayHi();//Hello John,此时，Person()函数中的this指的是window，其代码中
               //定义的变量和方法均存在于全局作用域中

//在另一个对象作用域中调用
var obj = new Object();
Person.call(obj,'Michelle',34,woman);
obj.sayHi();//Hello Michelle

在使用call()在某个特殊对象的作用域中调用Person函数，调用后，obj对象就拥有了所有属性和 sayHi()方法。

2、构造函数存在的问题

构造函数模式虽然好用，但也并非没有缺点。使用构造函数的主要问题，就是每个方法都要在每个实例上重新创建一遍——这是因为JavaScript中函数是对象，因此每定义一个函数对象。

三、原型模式

前面在学习函数的属性和方法时，函数的属性有两个，length和prototype。其中length标识函数的参数个数；prototype属性是一个指针，指向一个对象，这个对象的用途是包含可以由特定类型的所有实例所共享的属性和方法。使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法——不必在对象中定义对象实例的信息，而是将这些信息直接添加到原型对象中 （组合构造函数模式和原型模式，构造函数中定义每个实例独一无二的信息，原型模式定义每个实例共同的信息）。纯原型模式：

function Person()
Person.prototype.name = 'bluce';
Person.prototype.age = 88;
Person.prototype.sex = boy;
Person.sayHi = function ()
    console.log("Hello" + this.name);
;

var person1 = new Person();
var person2 = new Person();

person1.sayHi(); //bluce
person2.sayHi(); //bluce

alert(person1.sayHi==person2.sayHi);//true,

这里person1和person2访问的都是同一组属性和方法，对象的这些属性和方法是所有属性共享的。
构造函数模式与原型模式组合：

function Person(name,age,sex)
    this.name = name;
    this.age = age;
    this.sex = sex;

Person.prototype.sayHi = function()
    console.log("Hello" + this.name);


var person1 = new Person('Rose',22,girl);
var person2 = new Person('Bluce',23,boy);

person1.sayHi(); //Rose
person2.sayHi(); //Bluce

alert(person1.sayHi==person2.sayHi);//true,