Javascript对象创建模式

2022-11-09 08:31:37

Javascript有多种创建对象的方式，新手和老手都可能感到不知所措，不确定应该使用哪种方式。文本将介绍常见的对象常见模式和最佳的实践。

对象字面量：Object Literals

创建对象最简单的方式就是对象字面量。Javascript总是吹嘘能够“无中生有”地创建对象——不需要类、不需要模板、不需要原型——just poof!，一个有方法和数据的对象就出现了。

var o = {
    x: 42,
    y: 3.14,
    f: function() {},
    g: function() {}
};

缺点

如果需要在其他地方创建相同类型的对象，将要复制粘贴对象的方法、数据和初始化的代码，导致大量重复代码。需要一种能够批量创建同类型对象的方法，而不仅仅是一个对象。

工厂模式：Factory Functions

这是创建相同结构、接口和实现的对象最简单的方式。而不是直接创建对象字面量，而是将对象字面量作为函数的返回值。这样，如果需要多次或多个地方创建相同类型的对象时只需要调用一个函数：

function thing() {
  return {
    x: 42,
    y: 3.14,
    f: function() {},
    g: function() {}
  };
}
var o = thing();

缺点

这种Javascript对象创建方法可能会导致内存膨胀，因为每一个对象都包含了工厂函数的独立副本。理想情况下，我们希望每个对象只共享其功能的一个副本。

构造函数模式

可以创建特定类型的对象, 类似于Array, Date等原生JS的对象.其实现方法如下：

function Student(name,age){
    this.name=name;
    this.age=age;
    this.myName=function(){
        alert(this.name);
    };
}
var student1_ = new Student('aaa',15);
var student2_ = new Student('bbb',18);

缺点

每次实例化一个对象都会把构造器里的所有方法重新创建一次，多次创建会造成内存开销增加的问题。

原型链：Prototype Chains

Javascript提供了一种内置的在对象之间共享数据的机制，称为原型链。当访问对象的属性时，它可以通过委托给其他对象来满足该请求。可以利用这一点来修改工厂函数，使它创建的每个对象只包含自己特有的数据，而对其他属性的请求则全部委托给原型链上共有的一个对象：

var thingPrototype = {
  f: function() {},
  g: function() {}
};

function thing() {
  var o = Object.create(thingPrototype);

  o.x = 42;
  o.y = 3.14;

  return o;
}

var o = thing();

事实上，这是一种常见的模式，语言已经内置了对它的支持。不需要创建自己的共享对象（原型对象）。相反，会自动为每个函数创建一个原型对象，可以将共享数据放在那里：

thing.prototype.f = function() {};
thing.prototype.g = function() {};

function thing() {
  var o = Object.create(thing.prototype);

  o.x = 42;
  o.y = 3.14;

  return o;
}

var o = thing();

缺点

会导致重复。上述thing函数的第一行和最后一行在每一个“委托原型的工厂函数”中都会重复一次，几乎没有区别。

ES5类：ES5 Classes

可以把那些重复的代码抽出来，放进一个自定义函数里来隔离它们。这个函数会创建一个对象，并与其他某个任意函数（参数函数）的原型建立委托(继承)关系，然后把新创建的对象作为参数，调用这个函数（参数函数），最后返回这个新的对象。

function create(fn) {
  var o = Object.create(fn.prototype);

  fn.call(o);

  return o;
}

// ...

Thing.prototype.f = function() {};
Thing.prototype.g = function() {};

function Thing() {
  this.x = 42;
  this.y = 3.14;
}

var o = create(Thing);

事实上，这也是一种常见的模式，Javascript有一些内置的支持。create定义的函数实际上是new关键字的基本版本，可以直接替换create为new（构造函数+原型链）：

Thing.prototype.f = function() {};
Thing.prototype.g = function() {};

function Thing() {
  this.x = 42;
  this.y = 3.14;
}

var o = new Thing();

在ES5中，它们是对象创建函数，它将共享数据委托给原型对象，并依赖new关键字来处理重复逻辑。

缺点

冗长和丑陋，实现继承更加冗长和丑陋。

ES6类：ES6 Classes

在ES6的类中，执行相同的操作提供了更清晰的语法：

class Thing {
  constructor() {
    this.x = 42;
    this.y = 3.14;
  }

  f() {}
  g() {}
}

const o = new Thing();

比较

多年以来，Javascript开发者们与原型链的关系总是若即若离，纠缠不清。而今天最有可能遇到的两种创建对象的方式，一种是强烈依赖原型链的class语法，另一种则是完全不依赖原型链的工厂函数语法。这两种风格在性能和功能上有所不同——尽管差别不太大。

性能

今天Javascript引擎已经过如此大量优化，以至于很难通过Javascript代码来推断怎样会比较快。关键在于测量方法。然而有时甚至测量都会让我们失望。通常情况下，每六周发布一次更新的Javascript引擎，有时性能会发生重大变化，我们之前进行的任何测量以及我们根据这些测量做出的任何决定都会立即出现。因此，经验法则是支持最官方和最广泛使用的语法，假设它将受到最严格的审查，并且在大多数时候是最高效的。目前来看class语法最符合这一点，class语法大约比返回字面量的工厂模式快3倍。

特点

随着ES6的发布，类与工厂模式之间曾经存在的几点差异消失了。现在，工厂模式和类都能够强制实现真正的私有数据：

工厂模式通过闭包实现
类通过weak maps实现

两者都能实现多重继承——工厂模式可以将其他属性混入自己的对象，类也可以将其他属性混入自己的原型，或者通过类工厂，通过代理也能实现。工厂函数和类也都可以在需要的时候返回任意对象，语法也都很简单。

结论

考虑到所有事情，对Javascript对象创建的偏好是使用类语法。它是标准的，它简单而干净，速度快，并且它提供了曾经只有工厂模式才能提供的所有功能

码农公寓