JS创建对象模式及其对象原型链探究（二）：工厂模式-CSDN博客

工厂模式

用函数来封装，以特定接口创建对象的细节。

1.创建对象

function createPerson(name, age, job){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.showName = function(){
        console.log(this.name);
    }
    return o;
}

var p1 = createPerson("Mike", 20, "student");
var p2 = createPerson("Tom", 23, "student");

// 返回都是object 无法识别对象的类型 不知道他们是哪个对象的实列
console.log(typeof p1);  // object
console.log(typeof p2);  // object
console.log(p1 instanceof Object); // true

输出如图：
图片描述

函数能够根据接收的参数来构建一个包含所有信息的Person对象。

可以无数次地调用createPerson()这个函数，每次它都会返回一个包含三个属性、一个方法的对象。

工厂模式是为了解决多个类似对象声明的问题;也就是为了解决实列化对象产生重复的问题。

优点：能解决多个相似的问题。
缺点：不能知道对象识别的问题(对象的类型不知道)。

复杂的工厂模式定义是：将其成员对象的实列化推迟到子类中，子类可以重写父类接口方法以便创建的时候指定自己的对象类型。

2.观察实例对象的构成

// 观察p1对象的构成
console.log(p1);
console.log("-----分割线-----");
// 观察p1对象的构成
console.log(p2);
console.log("-----分割线-----");


// 修改p1对象的属性，并不会影响到p2对象的属性，因为他们是函数createPerson()两个独立的实例对象
p1.age = 21;
console.log(p1.age);    //21
console.log(p2.age);    //23
console.log("p1 === p2:");
console.log(p1 === p2);

输出如图：
图片描述

3.观察person对象涉及到的原型链

// 对象是没有prototype属性的
console.log("p1.prototype=");
console.log(p1.prototype);
console.log("-----分割线-----");

// p1对象本质上是o对象，即由Object构造函数生成，所以其__proto__属性指向Object.prototype
console.log("p1.__proto__=");
console.log(p1.__proto__);
console.log("-----分割线-----");

// 验证
console.log("p1.__proto__ === Object.prototype:");
console.log(p1.__proto__ === Object.prototype);
console.log("-----分割线-----");

console.log("p1.__proto__ === p2.__proto__:");
console.log(p1.__proto__ === p2.__proto__);
console.log("-----分割线-----");

输出如图：
图片描述

4.观察下p1.showName属性引用的函数

console.log("p1.showName.prototype=");
console.log(p1.showName.prototype);
console.log("-----分割线-----");

console.log("p1.showName.prototype.constructor=");
console.log(p1.showName.prototype.constructor);
console.log("-----分割线-----");

console.log("p1.showName.prototype.__proto__=");
console.log(p1.showName.prototype.__proto__);
console.log(p1.showName.prototype.__proto__ === Object.prototype);
console.log("-----分割线-----");

console.log("p1.showName.__proto__=");
console.log(p1.showName.__proto__);
console.log(p1.showName.__proto__ === Function.prototype);
console.log("-----分割线-----");

输出如图：
图片描述

原型链图

图片描述