JavaScript创建对象—从es5到es6

2019-03-12 08:25:46来源：博客园阅读 ()

原文地址

本文主要讲述了使用JavaScript创建对象的几种方式，分别是传统的Object构造函数、对象字面量、工厂模式、构造函数模式、原型模式、组合模式，以及es6的class定义类。然后从babel的角度探究es5与es6创建对象的区别。

1.创建对象的几种方式

（1）.Object构造函数和对象字面量

在早期js开发中，很多开发者会使用Object构造函数的方式来创建一个对象，通过调用Object构造函数new一个Object对象，然后再给这个对象的每一个属性和方法进行赋值

1 var person = new Object();
2 person.age = 22;
3 person.name = 'Dolanf';
4 person.code = function() {
5   console.log(‘hello world！’);
6 };

后来出现了对象字面量的写法，由于使用对象字面量创建对象的写法简单直观，所以Object构造函数写法渐渐被对象字面量的写法所取代，对象字面量是通过在一个大括号里面使用键值对的方式表示每一个属性和方法，每一个键值对之间使用逗号隔开

1 var person = {
2     age: 22,
3     name: 'Dolanf',
4     code: function() {
5          console.log('hello world!');
6     }
7 }

虽然对象字面量简单直观，但是上面两种方法都存在一个共同的问题：当需要创建很多很多个Person对象的时候，只能一个一个去创建，每一个对象的方法和属性都需要单独写，这使得代码没有丝毫复用性可言，违背了对象封装的特性。于是乎，工厂模式就随之出现了

（2）工厂模式

工厂模式通过将对象的创建封装到一个方法中，再通过在调用该方法时传入参数而实现对象的实例化，解决了以上提到的产生大量重复代码的问题

 1 function createPerson(age, name) { 
 2     var o = new Object();
 3     o.age = age;
 4     o.name = name;
 5     o.code = function() {
 6          console.log('hello world!');
 7     };
 8 
 9     return o;
10 }
11 
12 var person1 = createPerson(11, '小白');
13 var person2 = createPerson(12, '小黑');

但是工厂模式也存在一个不足，就是通过该方法创建的对象的构造函数全都是Object，没有辨识度。没有办法通过构造函数辨别一个对象到底是Person还是Dog，亦或是Cat。于是乎，为了解决这个问题，就引入了构造函数模式。

（3）构造函数模式

构造函数模式就是通过定义一个function函数，然后通过this给对象的属性和方法进行赋值。当我们实例化对象时，只需在该函数前面加一个new关键字就可以了。

 1 function Person(age, name) { 
 2     this.age = age;
 3     this.name = name;
 4     this.code = function() {
 5          console.log('hello world!');
 6     };
 7 }
 8 
 9 var person1 = new Person(11, '小白');
10 var person2 = new Person(12, '小黑');

构造函数模式解决了工厂模式中的对象识别问题，通过：

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

可以看出person1能成功被识别为一个Person对象。
但是，构造函数模式也同样存在一个缺点，就是构造函数里的属性和方法在每个对象上都要实例化一遍，包括对象共用的属性和方法，这样就造成了代码的复用性差的问题。所以大多数人会考虑将构造函数模式和原型模式组合起来使用。在这里先介绍一下原型模式。

（4）原型模式

原型模式是通过将所有的属性和方法都定义在其prototype属性上，达到这些属性和方法能被所有的实例所共享的目的。代码如下所示：

 1 function Person(age, name) { 
 2     Person.prototype.age = age;
 3     Person.prototype.name = name;
 4     Person.prototype.code = function() {
 5          console.log('hello world！');
 6     };
 7 }
 8 
 9 var person1 = new Person();
10 var person2 = new Person();

当然，这种方法在项目开发中是没有人会使用的，因为当一个对象上的属性改变时，所有对象上的属性也会随之改变，这是非常不切实际的。在这里提及原型模式是为了介绍以下的构造函数+原型组合模式.

（5）构造函数+原型组合模式

组合模式是将构造函数模式和原型模式结合在一起，继承了它们优点的同时又避免了各自的缺点。它将具有各自特点的属性和方法定义在构造函数中，将实例间共享的属性和方法定义在prototype上，成为了在es6出现之前使用最普遍的一种创建对象模式。

 1 function  Person(age, name) { 
 2     this.age = age;
 3     this.name = name;
 4     this.cry = function() {
 5          console.log(name + 'is crying!!! T^T');
 6     }
 7 }
 8 Person.prototype = {
 9     constructor: Person,
10     sayName: function() {
11         console.log(this.name);
12     }
13 }
14 var person1 = new Person(11, '小白');
15 var person2 = new Person(12, '小黑');

（6）class定义类

当然，前面讲的都是浮云，现在大家都用class定义类啦，class的出现就是为了让定义类能更加简单。回到上面的Person构造函数上，我们现在将其改造成使用class定义的方式：

 1 class Person{ 
 2     constructor(age, name) {
 3         this.age = age;
 4         this.name = name;
 5         this.cry = function() {
 6          console.log(name + 'is crying!!! T^T');
 7         }
 8     }
 9     sayName() {
10         console.log(this.name);
11     }
12 }
13 var person1 = new Person(11, '小白');
14 var person2 = new Person(12, '小黑');

使用class定义类跟上面的构造函数+原型组合模式有一些相似之处，但又有所区别。
class定义的类上有个constructor方法，这就是构造方法，该方法会返回一个实例对象，this代表的就是实例对象，这跟上边的构造函数模式很类似。
此外，class上的方法都是定义在prototype上的，这又跟原型模式有一些相似之处，这个class里的sayName等价于

1 Person.protorype.sayName = function() {
2     console.log(this.name);
3 }

虽然class定义的类跟es5中的构造函数+原型组合模式很相似，但是他们还是存在不少区别的，下面对比如下：

2.es5与es6定义对象的区别

1）class的构造函数必须使用new进行调用，普通构造函数不用new也可执行。
2）class不存在变量提升，es5中的function存在变量提升。
3）class内部定义的方法不可枚举，es5在prototype上定义的方法可以枚举。

为什么会存在以上这些区别呢？下面使用babel将es6转化成es5看看它的实现过程就知道了。

3.es6中class转化为es5

下面将讲述使用babel将以上的class定义Person类转换成使用es5实现：

es6代码：

 1 class Person{ 
 2     constructor(age, name) {
 3         this.age = age;
 4         this.name = name;
 5         this.cry = function() {
 6          console.log(name + 'is crying!!! T^T');
 7         }
 8     }
 9     sayName() {
10         console.log(this.name);
11     }
12 }
13 var person1 = new Person(11, '小白');
14 var person2 = new Person(12, '小黑');

使用babel转化成的es5后的代码：

 1 'use strict'; // es6中class使用的是严格模式
 2 
 3 // 处理class中的方法
 4 var _createClass = function () { 
 5    function defineProperties(target, props) { 
 6       for (var i = 0; i < props.length; i++) { 
 7          var descriptor = props[i]; 
 8          // 默认不可枚举
 9          descriptor.enumerable = descriptor.enumerable || false; 
10          descriptor.configurable = true; 
11          if ("value" in descriptor) descriptor.writable = true; 
12          Object.defineProperty(target, descriptor.key, descriptor);
13       } 
14    } 
15    return function (Constructor, protoProps, staticProps) { 
16       if (protoProps) defineProperties(Constructor.prototype, protoProps); 
17       if (staticProps) defineProperties(Constructor, staticProps); 
18       return Constructor; 
19    }; 
20 }();
21 
22 // 对构造函数进行判定
23 function _classCallCheck(instance, Constructor) { 
24    if (!(instance instanceof Constructor)) { 
25       throw new TypeError("Cannot call a class as a function"); 
26    }
27 }
28 
29 // class Person转换为 es5的function
30 var Person = function () {
31     function Person(age, name) {
32         // 调用了_classCallCheck检查Person是否为构造函数
33         _classCallCheck(this, Person); 
34 
35         this.age = age;
36         this.name = name;
37         this.cry = function () {
38             console.log(name + 'is crying!!! T^T');
39         };
40     }
41 
42     // 调用_createClass处理定义在class中的方法。
43     _createClass(Person, [{
44         key: 'sayName',
45         value: function sayName() {
46             console.log(this.name);
47         }
48     }]);
49 
50     return Person;
51 }();
52 
53 var person1 = new Person(11, '小白');
54 var person2 = new Person(12, '小黑');

这里我将转换后的代码格式化并加上了一些注释。
从以上代码可以看出，class主要是通过两个函数实现：_createClass和_classCallCheck。
所以为什么会存在上述区别呢：
1）class的构造函数必须使用new进行调用，普通构造函数不用new也可执行。
class中的constructor会直接转化为function构造函数，然后在function中通过 _classCallCheck的检查该function是否是一个Constructor。因为有_classCallCheck检查必须是instanceof Constructor，所以class必须使用new进行调用。

2）class不存在变量提升，es5中的function存在变量提升。
class转变成了函数表达式进行声明，因为是函数表达式声明的，所以class不存在变量提升。

3）class内部定义的方法不可枚举，es5在prototype上定义的方法可以枚举。
class中定义的方法会传入 _createClass中，然后 Object.defineProperty将其定义在Constructor.prototype上。所以class中的方法都是定义在Constructor.prototype上的。
由于defineProperties中的

1 descriptor.enumerable = descriptor.enumerable || false;

将属性的 enumerable默认为false，所以class中定义的方法不可枚举。

第一次写博客，内容也是copy原作者，所有代码都有手撸验证过一遍，加深印象。

原文链接:https://www.cnblogs.com/ImmortalWang/p/10517091.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：js 计算金额是否小于总金额，大于是不能保存

下一篇：bootstrap-treeview + angular 使用

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签