JS函数的工厂模式、构造函数模式、原型模式的区别

时间 2019-11-08

原文原文链接

建立对象

JS有六种数据数据类型，其中五种属于基本数据类型：Null、Boolean、undefined、String、Number。
而其它值都是对象。数组是对象，函数是对象，正则表达式是对象。对象也是对象。正则表达式

来看一下对象的定义：数组

无序属性的集合，其属性能够包含基本值、对象、或者函数。

咱们经过对象字面量的方式建立对象。建立的对象用于咱们想要作的事。可是，若是只有对象，那么能够想象咱们写的代码将全是光秃秃的对象，会产生大量的重复代码，和命名冲突等等问题。这是很是很是糟糕的。
为了解决这个问题，人们开始使用工厂模式的一种变体。函数

工厂模式

工厂模式抽象了具体对象的过程。也就是说，发明了一种函数，把对象放到函数里，用函数封装建立对象的细节。this

function createPerson (name,age) {
    var o = {
        name : name,
        age : age,    
        sayName : function () {
            alert(this.name)
        }
    }
    return o;
}
var person1 = createPerson("Tom",14);
var person2 = createPerson("Jerry",18)

console.log(person1 instanceof Object)  //true
console.log(person1 instanceof createPerson)  //false

instanceof 用于检测数据类型
var aa = []
console.log(aa instanceof Array)  //true

工厂模式解决了代码复用的问题，可是却没有解决对象识别的问题。即建立的全部实例都是Object类型。
为了解决这一问题，就有了构造函数模式prototype

构造函数模式

function Person (name,age) {
    this.name = name;
    this.age = age;
    this.sayName = function () {
        alert(this.name)
    }
}
    var person1 = new Person('Tom',14);
    var Person2 = new Person('Jerry',18);

构造函数 Person 有一个prototype(原型)属性，这个属性是一个指针，指向一个对象即：Person.prototype(原型对象)；
实例person1 person2也有一个[[prototype]]属性或者叫_proto_,这个属性也指向Person.prototype；
构造函数、和实例都共享Person.prototype里的属性和方法；
Person.prototype里有一个 constructor属性，这个属性也是一个指针，指向构造函数Person。这样以来，实例也指向了Person,那么实例也共享了构造函数的属性和方法。
构造函数、实例、原型对象里全部的属性和方法都是共享的。

构造函数解决了对象识别问题，咱们在这个例子中建立的对全部对象既是Object的实例，同时，也是Person的实例。这一点经过instanceof操做符能够获得验证。指针

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

建立自定义的构造函数意味着，未来能够将它的实例标识为一种特定类型；这正是构造函数赛过工厂模式的地方。Array就是这种方式(我认为的)。用构造函数的方式，实例化一个新对象，这个对象能够是其它类型例如Array类型。code

function Array () {

 }
 var arr = new Array()
 arr instanceof Array  // true

构造函数与普通函数的区别

构造函数和普通函数的惟一区别，在于调用它们的方式不一样。

看成构造函数使用

function Person (name,age) {
        console.log(this)   
    }
    var person = new Person()

须要注意的是，this 指向构造函数Person对象

看成普通函数使用

function Person (name,age) {
    console.log(this)
 }
 Person()

this指向widow.内存

构造函数的问题

构造函数虽然好用，但也有缺点。既每一个new出来的实例里的方法都要从新建立一遍。在前面的例子中person1 person2 都有一个sayName方法，但这两个方法不是同一个Function实例！每一个实例的方法都是不一样的，不相等的。这是不合理的！原型

function Person (name) {
    this.name = name;
    this.sayName = new Function ("alert(this.name)")
}
function Person (name) {
    this.name = name;
    this.sayName = function () {
        alert(this.name)
    }
}

alert( person1.sayName == person2.sayName )  //false

因而可知，完成一样任务的函数确实不必每一个实例，就实例一次。
因而，有需求，就有解决方案。原型模式。

原型模式

咱们建立的每一个函数都有一个prototype(原型)属性，这个属性是一个指针，指向一个对象，而这个对象的用途是包含能够由特定类型的全部实例共享的属性和方法。
使用原型对象的好处是可让全部对象实例共享它所包含的属性和方法。也就是说，没必要在构造函数中定义对象实例的信息，而是将这些信息添加到原型对象中。

废话少说，那么到底原型模式是如何解决每一个实例的方法是同一个呢？
看代码：

function Person (){
}
Person.prototype.name = "Tom";
Person.prototype.sayName = function () {
    alert(this.name)
};
或者  
Person.prototype = {
    constructor : Person,
    name : "Tom",
    sayName : function () {
        alert(this.name)
    }
}
var person1 = new Person();
person1.sayName();  //"Tom"

var person2 = new Person();
person2.sayName(); //"Tom"

alert( person1.sayName == persona2.sayName )   //true

再来看下这个：

构造函数 Person 有一个prototype(原型)属性，这个属性是一个指针，指向一个对象即：Person.prototype(原型对象)；
实例person1 person2也有一个[[prototype]]属性或者叫_proto_,这个属性也指向Person.prototype；
构造函数、和实例都共享Person.prototype里的属性和方法；
Person.prototype里有一个 constructor属性，这个属性也是一个指针，指向构造函数Person。这样以来，实例也指向了Person,那么实例也共享了构造函数的属性和方法。
构造函数、实例、原型对象里全部的属性和方法都是共享的。

与构造函数相比，
原型模式，把公共方法提出来放到prototype对象里。
每一个实例的[[prototype]]指针指向这个对象，因此全部实例的公共方法是同一个。这样也避免了内存浪费。

原型模式的其它特性

略

详情参见《JS高程3》第六章

原型模式的问题

咱们写代码的时候，不多只用到原型模式，说明它仍是有坑的。
原型模式很大的优势是全部实例都共享属性和方法。这个很好的优势对于函数来讲很是合适，可对于属性来讲，有点不适应这种开放的"热情"。
看代码：

function Person () {
}
Person.prototype = {
    constructor : Person,
    name : "Tom",
    friends : ["Jerry","Sara"]
}
var person1 = new Person();
var person2 = new Person();

person1.friends.push("Vans");

alert( person1.friends ); //"Jerry","Sara","Vans"
alert( person2.friends ); //"Jerry","Sara","Vans"
alert( person1.friends === person2.friends ); //true

以上已经很明了了，给一个实例添加属性值，结果，全部实例的属性值也改变了。实例应该具备本身的独立性。本身莫名其妙的被改变，确定是有问题的。
有问题，就会有解决方案，再多坑，也抵不过咱们前辈的不懈努力。
因而就有了构造函数和原型模式混合模式

组合使用构造函数模式和原型模式

建立自定义类型最多见的方式，就是组合模式。
构造函数模式用于定义实例属性，而原型模式用于定义方法和共享的属性。
结果，每一个实例都有本身的一份实例属性的副本。注意是是副本。同时，又共享着对方法的引用，最大限度地节省了内存。
另外，这种混成模式还支持向构造函数传递参数。

function Person (name,age) {
    this.name = name;
    this.age = age;
    this.friends = ["Tom","Jerry"]
}
Person.prototype = {
    consructor : Person,
    sayName : function () {
        alert(this.name)
    }
}

var person1 = new Person("Abert",18);
var person2 = new Person("Marry",17);

person1.friends.push("Vans");
alert( person1.friends ); //"Tom","Jerry","Vans"
alert( person2.friends ); //"Tom","Jerry"
alert( person1.friends === person2.friends ); //false

在例子中，实例属性是由构造函数定义的，且每一个实例的属性是独立的。改变实例的属性，并不影响其它实例的属性，这样就避免了原型模式的"狂热的共享热情"。
全部实例的共享属性和方法则是在原型中定义的。修改任何实例(person1或person2)中哪个，其它实例都会受到影响。由于因此实例的[[prototype]]指针指向原型对象(Person.prototye)，它们拥有共同的引用。构造函数中的实例属性则只是副本。

以上就是工厂模式、构造函数、原型模式以及组合模式各自的特定和区别。
核心都在《JS高程3》。我作了些简单的梳理，和本身的理解。有不明白或者质疑的地方，以书为准。

总结

什么是工厂模式？

工厂模式就是抽象了具体对象细节过程的方法。这个方法以函数的形式封装实现的细节。实现了重复调用的功能。

什么是构造函数模式？

构造函数模式就是建立一个对象，new 这个对象就是对象的实例。实现重复调用的同时，它的实例也有了QQVIP的尊贵特权，即
实例能够标识为特定的类型。有了这个标识能够更好的识别出，谁是数组类型，谁是函数类型，而后你 typeof arr 或 typeof fun
一看，真的是Array类型，functiong类型。你也能够自定义本身想要的类型，这样大大的增长了JS的拓展性。

什么是原型模式？

首先咱们要知道，咱们建立的每个函数都有一个隐藏属性，也就是原型属性。这个原型属性指向一个原型对象。且全部实例和构造函数都指向这个原型对象，共享原型对象的全部方法和属性。咱们经过操做原型对象达到实例共享属性方法的目的，就是原型模式。同时，由于实例都是引用原型对象的属性和方法，也避免了构造函数模式下全部实例都有各自的方法的弊端。