稳扎稳打JavaScript（三）——创建对象的几种方式

大闲人柴毛毛

发布于 2018-03-09 17:32:45

9430

发布于 2018-03-09 17:32:45

文章被收录于专栏：大闲人柴毛毛大闲人柴毛毛

有了前面两篇文章的基础后，我们来谈一谈在JS中

在JS中，创建对象的方式有很多，而且各有千秋，我们需要根据实际的业务需求选择不同的方式。

1. 工厂模式

这是创建对象最为简单的方式。

1.1. 定义方式

工厂模式的思想是：将对象构建的过程封装在一个函数中。这个函数能创建一个对象，并为他进行初始化赋值，最后返回这个对象。若要新建对象，调用这个工厂函数即可。

// 工厂函数
function createPerson ( name, age ) {
    var object = new Object();
    object.name = name;
    object.age = age;
    object.getName = function(){
        return object.name;
    }
    return object;
}

1.2. 对象创建方式

// 创建对象
Person perosn = createPerson("柴毛毛", 18);

1.3. 优点

这种模式唯一的优点就是逻辑简单。

1.4. 缺点

创建的对象都是Object类型，没办法知道它的确切类型。
对象中所有的函数都需要重复定义，浪费内存。
没办法创建该类型的公共属性。

2. 构造函数模式

2.1. 定义方式

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

这种模式需要创建一个构造函数；
构造函数首字母必须大写，这已经成为不成文的规定，目的是为了提高代码的可读性，只要一看到大写的函数那就说明这是一个构造函数；
构造函数中，this就代表即将创建的那个对象；
对象的属性直接绑在this上；
若构造函数中存在闭包，那么闭包中的this仍然指向即将创建的这个对象。

2.2. 对象创建方式

通过new来创建对象：

var person = new Person("柴毛毛",18);

JS中的new关键词是专门用来创建对象的，不要以为它多么高级，其实通过new创建对象的过程本质上只是执行了这个构造函数，不过比执行普通函数多加了几个步骤：
- 在函数执行前创建一个对象，并将函数的this指向这个对象；
- 然后正常执行函数代码；
- 最后自动返回这个对象；

2.3. 构造函数模式创建对象的过程

2.3.1. 当外层函数执行结束后：

当构造函数所在的外层函数执行结束后，JS引擎就会为这个构造函数创建两样东西：

创建一个构造函数本身的函数对象（暂且叫他A）
创建构造函数的原型对象（暂且叫他B）原型对象B中只有一个constructor属性，指向构造函数对象A；A对象中有一个prototype属性，指向对象B。

这个过程结束后，内存中会产生两个与构造函数相关的对象，分别是构造函数对象和构造函数的原型对象，他们之间通过属性constructor和prototype相互关联。

2.3.2. 当执行new Person()时：

创建一个普通对象C，将C对象的proto属性指向原型对象B，将C对象的constructor属性指向构造函数对象A；
将构造函数中的this指向对象C；
依次执行构造函数中的代码；
返回对象C；

这个过程结束后，新对象的创建过程就结束了。

2.4. 优点

可以知道对象的类型。通过2.3我们知道，实例对象中的constructor属性指向了它的构造函数，proto属性指向了它的原型对象，因此完全可以确定该对象的类型。

确定对象类型的两种方式：
- （推荐）对象 instanceof 构造函数（返回true/false）
- （不推荐）对象.constructor（直接获取其构造函数对象）

2.5. 缺点

对象中所有的函数都需要重复定义，浪费内存。

3. 原型模式

3.1. 什么是原型？

我们已经知道，当一个函数(暂且叫son函数)的外层函数(father函数)执行结束后，JS引擎会为son函数创建两个相关的对象，分别是 son本身的函数对象和 son的原型对象。并且这两个对象之间通过属性constructor和prototype相互关联。当通过new创建对象时，这个对象中的constructor属性和 proto属性分别会指向函数对象和原型对象。

原型模式中的“原型”就是函数的原型对象。

3.2. 原型的特点

每个函数初始化完成后都会创建一个原型对象，即：函数对象和原型对象一一对应；
通过new创建的所有对象，都有一个proto属性指向其原型对象；

3.3. 原型能做什么？

正因为原型对象拥有3.2所提高的两个特点，因此它可以存储某一类型的共有属性和方法。这样每个对象就不必重复定义函数了，并且能实现某些属性共享。

3.4. 如何往原型中添加属性？

我们知道，每个通过构造函数的函数对象都有一个prototype属性，指向它的原型对象，因此我们可以使用这个属性访问构造函数的原型对象，并为它添加属性和方法，就像这样：

Person.prototype.getName = function(){
    return this.name;
}
Person.prototype.school = "NJUPT";

注意1：虽然对象中也有个proto属性指向原型对象，但这个属性是提供给JS引擎使用的，我们没办法通过代码访问。
注意2：在原型中添加的属性和函数将会被该类型的所有对象共享；
注意3：原型中的函数的this指向？？？

3.5. 如何使用原型中的属性？

3.5.1. 访问原型属性

在对象中使用原型属性和使用对象的普通属性一样，不需要任何额外操作：

var person = new Person("柴毛毛",18);
alert(person.school);

当访问person.school时，JS引擎首先从从person对象中找，若找不到，就顺着proto属性去原型中找。

3.5.2. 修改原型属性（基本数据类型）

对象无法修改原型中的任何属性！若原型对象中有school属性，此时执行下列代码，只会在person对象中添加一个school属性，不会对原型属性有任何影响。

person.school = "BJUPT";

当再次访问person.school时，访问到的就是对象中的school。只有delete person.school后才能再次访问到原型中的school。 PS：将person.school设为null、undefined并没什么卵用，person.school的结果将仍然是person对象中的school。

3.5.3. 修改原型属性（引用类型）

若原型对象中存在引用类型的属性，那么可以通过对象修改它：

Person.prototype.names = ["chai","mao"];
person.names.push("柴毛毛");

此时，原型中的names将变成[“chai”,”mao”,”柴毛毛”]，并且该类型所有对象的names都将改变。

3.5.4. 新增原型属性

3.6. 定义方式

使用原型模式，首先得创建一个构造函数，然后在构造函数的原型对象上添加属性。

function Person () {}
Person.prototype.属性名 = 属性值；
Person.prototype.函数名 = function(){
    // ……
}

3.7. 对象创建方式

var person = new Person();

3.8. 优点

由于原型对象被同一类型的所有对象共享，因此可以将函数和共享变量定义在原型上，从而能避免重复创建对象，节约内存空间，并且能实现变量的共享。

3.9. 缺点

也正是因为原型拥有被同一类型的所有对象共享的特点，因此如果将所有属性都定义在原型上，那么就不存在对象的实例属性了。

4. 构造函数+原型模式

通过构造函数创建的对象只有实例属性，没有共享属性；而通过原型模式创建的对象只有共享属性，没有对象的实例属性；因此可以把这两种模式结合起来，取长补短。

4.1. 定义方式

实例属性在构造函数中定义：从而每个对象都有各自不同的实例属性值；
共享属性在原型中定义：从而函数、需要共享的属性可以被同一类型的所有对象共享。

// 在构造函数中定义实例属性
function Person (name,age){
    this.name = name;
    this.age = age;
}

// 在原型上定义函数
Person.prototype.getName = function(){
    return this.name;
}
Person.prototype.getAge = function(){
    return this.age;
}

// 在原型上定义共享的属性
Person.prototype.school = "NJUPT";

4.2. 对象创建方式

var person = new Person("柴毛毛",18);

4.3. 优点

这种模式结合了构造函数模式和原型模式的优点：

可以知道对象的类型；
可以避免函数对象被重复定义，节约内存；
可以添加共享属性；

4.4. 缺点

这种模式唯一的缺点就是打破了封装性在面向对象的语言中，一个类所有的函数和属性都定义在类中；而这种方式定义的“类”中，函数和共享属性都被定义在了“类”的外面，因此破坏了面向对象的封装性。

5. 构造函数+原型模式PRO（动态原型模式）

这种方式就是为了解决上面方法“破坏了封装性”的问题的。

5.1. 定义方式

// 在构造函数中定义实例属性
function Person (name,age){
    this.name = name;
    this.age = age;

    if ( typeof this.getName != "function" ) {
        // 在原型上定义函数
        Person.prototype.getName = function(){
            return this.name;
        }

        Person.prototype.getAge = function(){
            return this.age;
        }

        // 在原型上定义共享的属性
        Person.prototype.school = "NJUPT";   
    }
}

上述方式把一个“类”中所有的属性都在“类”内部定义，因此体现了面向对象的“封装性”。
当创建Person类的第一个对象时，就会执行到这个if语句块；由于此时Person的原型中并没有任何自定义的属性，因此typeof this.getName将返回”undefined”，而不是”function”，因此就会执行if语句块中的代码；这些属性就会被添加到原型对象中；
当第二次创建Person类的对象时，由于原型中已经存在了先前定义的属性，因此typeof this.getName就会返回”function”，从而if语句块就不会执行。
问题1:可以使用this.prototype来给原型添加属性吗？绝对不可以！你的代码若要显示访问原型中的属性，只能通过“构造函数.prototype.xxx”去访问，因为prototype属性只存在于构造函数对象中，实例对象中并没有prototype属性。此外，实例对象中有一个指向原型对象的proto属性，但这个属性只给JS引擎使用，我们通过代码是调用不到的！这个属性的作用是：当我们通过实例对象调用原型中的属性时，JS引擎就会使用这个指针通往原型对象。
问题2:用this.getName来判断原型对象中是否有getName函数合理吗？是否可以用Person.prototype.getName来判断？这里有两个问题，第一个问题：完全合理。第二个问题：完全可以。下面分别解释。我们知道，通过构造函数创建对象后，内存中会有三个与之相关的对象：1.构造函数本身的对象A、2.构造函数的原型对象B、3.实例对象C。构造函数中的this指向实例对象C，因此当执行this.getName时，JS引擎首先在对象C中找，而C刚创建，肯定不会有getName函数，因此JS引擎通过proto属性去原型B中找。

5.2. 对象创建方式

var person = new Person("柴毛毛",18);

5.3. 优点

和原型模式+构造函数模式相比，增加了封装性，更利于理解代码。

5.4. 缺点

一般都用这种方法，完美无缺点！

一般来说，定义“类”就使用原型模式，先前介绍的几种方式都是为了引出原型模式。

下面介绍几种在特殊情况下会用到的定义“类”的模式。

6. 寄生构造函数模式

当我们要给JS原生对象扩充功能的时候，我们可以在原生对象的原型上添加新功能，由于原型上的属性被该类所有对象共享，因此我们就可以在旧对象上使用新功能。但这种做法太危险，假设现在你系统的Array类中没有distinct函数，然后你在Array.prototype上添加了个distinct函数；当你的系统扩展后，也许那个JS库中也向Array.prototype添加了个distinct函数，那你先前添加的那个函数将被覆盖掉，调用这个函数的代码将会出错。因此，不要向原生对象的prototype中添加任何属性！但如果想要扩展原生对象的功能，就可以使用寄生构造函数模式。

6.1. 定义方式

function MyArray () {
    var array = new Array();

    array.distinct = function () {
        // ……
    }

    array.sort = function () {
        // ……
    }

    return array;
}

定义方式和工厂模式类似：

手动new一个需要扩展的原生JS对象；
在这个对象上添加新功能；
返回这个对象。

6.2. 调用方式

方式一：直接调用

var array = MyArray();

方式二(推荐)：使用new

var array = new MyArray();

为了体现它是一个对象创建的过程，增强可读性，因此建议你仍然使用new来创建对象，那有人不禁要问：这个构造函数违背了构造函数的规则呀，不仅显示创建了一个对象，还显示调用了return语句，难道new调用它仍能正确执行吗？当然可以！通过new执行一个函数时，JS都会首先创建一个对象，再执行函数中的代码，最后如果没有return语句，就会自动return刚才创建的那个对象；如果有return语句，那么就返回return后面指定的对象。因此，在这里通过new调用MyArray时，JS引擎会创建一个默认的Object对象，并且将它的proto、constructor分别指向MyArray.prototype和MyArray，然后执行自身的代码。谁知在执行自身代码的过程中又创建了个新对象，并且给新对象添加了属性，最后还返回了这个对象。因此，通过这种模式创建的对象，它的proto、constructor仍然指向Array，因此它的类型是Array，而非MyArray。

6.3. 优点

可以在不影响原生对象的基础上增强原生对象的功能因为这种模式在原生“类型”的对象上添加新功能，而非在原生“类型”的原型上添加，因此不会对原型造成任何影响。此外，由于创建的对象是原生类型，因此又具有原生类型的所有功能。这种模式在扩充原生类型的功能方面堪称完美！

6.4. 缺点

没办法知道对象的确切类型，只能知道它的原生对象类型。

7. 稳妥构造函数模式

由于this、new等关键字会导致安全漏洞的发生，因此若系统安全性要求很高的话就不能使用这些语法，此时若要创建对象就得使用稳妥构造函数模式。

7.1. 方法定义

function Person ( name, age ) {
    var object = new Object();
    // object.name = name;
    // object.age = age;
    object.getName = function(){
        return name;
    }
    object.getAge = function(){
        return age;
    }
    return object;
}

注意这里被注掉的两行代码，对于安全级别较高的属性，不能直接挂载到object对象上(因为直接挂载到object上的属性可以被外界随意修改和访问)，而是让它们以局部变量的形式出现在构造函数中，若外界要访问和修改，则在object上添加访问和修改的函数，这样就可以在函数中对修改作限制。我们知道，函数的局部变量存在于函数的变量对象中，一旦函数执行完成，变量对象中的值只能通过函数内部的闭包来访问。

7.2. 对象创建方式

不能通过new创建，只能当作普通函数调用。

var person = Person("柴毛毛",18);

8. 地球人都知道的方式

最后为了体现完整性，我还是把最最最普通的几种对象创建方式加上。

8.1. 方法一

var object = new Object();
object.xxx = xxx;
// ……

8.2. 方法二

var object = {
    xxx : yyy,
    zzz : aaa,
    ……
};

这是JS语法糖，是为了写起来方便而添加的新语法本质上仍然是使用new Object创建对象。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2016年12月17日，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度