JavaScript深刻之建立对象的多种方式以及优缺点

JavaScript深刻系列第十四篇，讲解建立对象的各类方式，以及优缺点。

写在前面

这篇文章讲解建立对象的各类方式，以及优缺点。

可是注意：

这篇文章更像是笔记，由于《JavaScript高级程序设计》写得真是太好了！

1. 工厂模式

function createPerson(name) {
    var o = new Object();
    o.name = name;
    o.getName = function () {
        console.log(this.name);
    };

    return o;
}

var person1 = createPerson('kevin');

缺点：对象没法识别，由于全部的实例都指向一个原型

2. 构造函数模式

function Person(name) {
    this.name = name;
    this.getName = function () {
        console.log(this.name);
    };
}

var person1 = new Person('kevin');

优势：实例能够识别为一个特定的类型

缺点：每次建立实例时，每一个方法都要被建立一次

2.1 构造函数模式优化

function Person(name) {
    this.name = name;
    this.getName = getName;
}

function getName() {
    console.log(this.name);
}

var person1 = new Person('kevin');

优势：解决了每一个方法都要被从新建立的问题

缺点：这叫啥封装……

3. 原型模式

function Person(name) {

}

Person.prototype.name = 'keivn';
Person.prototype.getName = function () {
    console.log(this.name);
};

var person1 = new Person();

优势：方法不会从新建立

缺点：1. 全部的属性和方法都共享 2. 不能初始化参数

3.1 原型模式优化

function Person(name) {

}

Person.prototype = {
    name: 'kevin',
    getName: function () {
        console.log(this.name);
    }
};

var person1 = new Person();

优势：封装性好了一点

缺点：重写了原型，丢失了constructor属性

3.2 原型模式优化

function Person(name) {

}

Person.prototype = {
    constructor: Person,
    name: 'kevin',
    getName: function () {
        console.log(this.name);
    }
};

var person1 = new Person();

优势：实例能够经过constructor属性找到所属构造函数

缺点：原型模式该有的缺点仍是有

4. 组合模式

构造函数模式与原型模式双剑合璧。

function Person(name) {
    this.name = name;
}

Person.prototype = {
    constructor: Person,
    getName: function () {
        console.log(this.name);
    }
};

var person1 = new Person();

优势：该共享的共享，该私有的私有，使用最普遍的方式

缺点：有的人就是但愿所有都写在一块儿，即更好的封装性

4.1 动态原型模式

function Person(name) {
    this.name = name;
    if (typeof this.getName != "function") {
        Person.prototype.getName = function () {
            console.log(this.name);
        }
    }
}

var person1 = new Person();

注意：使用动态原型模式时，不能用对象字面量重写原型

解释下为何：

function Person(name) {
    this.name = name;
    if (typeof this.getName != "function") {
        Person.prototype = {
            constructor: Person,
            getName: function () {
                console.log(this.name);
            }
        }
    }
}

var person1 = new Person('kevin');
var person2 = new Person('daisy');

// 报错 并无该方法
person1.getName();

// 注释掉上面的代码，这句是能够执行的。
person2.getName();

为了解释这个问题，假设开始执行var person1 = new Person('kevin')。

若是对 new 和 apply 的底层执行过程不是很熟悉，能够阅读底部相关连接中的文章。

咱们回顾下 new 的实现步骤：

1. 首先新建一个对象

2. 而后将对象的原型指向 Person.prototype

3. 而后 Person.apply(obj)

4. 返回这个对象

注意这个时候，回顾下 apply 的实现步骤，会执行 obj.Person 方法，这个时候就会执行 if 语句里的内容，注意构造函数的 prototype 属性指向了实例的原型，使用字面量方式直接覆盖 Person.prototype，并不会更改实例的原型的值，person1 依然是指向了之前的原型，而不是 Person.prototype。而以前的原型是没有 getName 方法的，因此就报错了！

若是你就是想用字面量方式写代码，能够尝试下这种：

function Person(name) {
    this.name = name;
    if (typeof this.getName != "function") {
        Person.prototype = {
            constructor: Person,
            getName: function () {
                console.log(this.name);
            }
        }

        return new Person(name);
    }
}

var person1 = new Person('kevin');
var person2 = new Person('daisy');

person1.getName(); // kevin
person2.getName();  // daisy

5.1 寄生构造函数模式

function Person(name) {

    var o = new Object();
    o.name = name;
    o.getName = function () {
        console.log(this.name);
    };

    return o;

}

var person1 = new Person('kevin');
console.log(person1 instanceof Person) // false
console.log(person1 instanceof Object)  // true

寄生构造函数模式，我我的认为应该这样读：

寄生-构造函数-模式，也就是说寄生在构造函数的一种方法。

也就是说打着构造函数的幌子挂羊头卖狗肉，你看建立的实例使用 instanceof 都没法指向构造函数！

这样方法能够在特殊状况下使用。好比咱们想建立一个具备额外方法的特殊数组，可是又不想直接修改Array构造函数，咱们能够这样写：

function SpecialArray() {
    var values = new Array();

    for (var i = 0, len = arguments.length; i < len; i++) {
        values.push(arguments[i]);
    }

    values.toPipedString = function () {
        return this.join("|");
    };
    return values;
}

var colors = new SpecialArray('red', 'blue', 'green');
var colors2 = SpecialArray('red2', 'blue2', 'green2');


console.log(colors);
console.log(colors.toPipedString()); // red|blue|green

console.log(colors2);
console.log(colors2.toPipedString()); // red2|blue2|green2

你会发现，其实所谓的寄生构造函数模式就是比工厂模式在建立对象的时候，多使用了一个new，实际上二者的结果是同样的。

可是做者多是但愿能像使用普通 Array 同样使用 SpecialArray，虽然把 SpecialArray 当成函数也同样能用，可是这并非做者的本意，也变得不优雅。

在可使用其余模式的状况下，不要使用这种模式。

可是值得一提的是，上面例子中的循环：

for (var i = 0, len = arguments.length; i < len; i++) {
    values.push(arguments[i]);
}

能够替换成：

values.push.apply(values, arguments);

5.2 稳妥构造函数模式

function person(name){
    var o = new Object();
    o.sayName = function(){
        console.log(name);
    };
    return o;
}

var person1 = person('kevin');

person1.sayName(); // kevin

person1.name = "daisy";

person1.sayName(); // kevin

console.log(person1.name); // daisy

所谓稳妥对象，指的是没有公共属性，并且其方法也不引用 this 的对象。

与寄生构造函数模式有两点不一样：

1. 新建立的实例方法不引用 this

2. 不使用 new 操做符调用构造函数

稳妥对象最适合在一些安全的环境中。

稳妥构造函数模式也跟工厂模式同样，没法识别对象所属类型。

下一篇文章

JavaScript深刻之继承的多种方式和优缺点

相关连接

《JavaScript深刻之从原型到原型链》

《JavaScript深刻之new的模拟实现》

《JavaScript深刻之call和apply的模拟实现》

深刻系列

JavaScript深刻系列目录地址：https://github.com/mqyqingfeng/Blog。

JavaScript深刻系列预计写十五篇左右，旨在帮你们捋顺JavaScript底层知识，重点讲解如原型、做用域、执行上下文、变量对象、this、闭包、按值传递、call、apply、bind、new、继承等难点概念。

若是有错误或者不严谨的地方，请务必给予指正，十分感谢。若是喜欢或者有所启发，欢迎star，对做者也是一种鼓励。