JavaScript创建对象模式与最佳实践

在JavaScript中“创建对象”是一个复杂的话题。这门语言提供了很多种创建对象的方式,不论新手还是老手都可能对此感到无所适从,不知道应该选择哪一种。不过,尽管创建对象的方法很多,看上去语法差异也很大,但实际上它们的相似性可能比你所以为的要多。本文将带领你踏上一段梳理对象创建方法的旅程,为你揭示不同方法之间的依赖与递进关系。

对象字面量

我们的第一站毫无疑问就是创建对象最简单的方法,对象字面量。JavaScript总是宣扬自己能够“无中生有”地创建对象——不需要类、不需要模板、不需要原型——“噌”地一下,一个有方法有数据的对象就出现了。

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

但这种方法有一个缺点:如果我们想在其他地方创建一个同类型的对象,就得把这个对象的方法、数据和初始化都复制粘贴过去。我们需要一种能够批量创建同类型对象的方法,而不是只创建一个对象。

工厂函数

我们的下一站是工厂函数。显然,用这种方法来创建一类具有相同结构、接口和实现的对象是最简单的。我们不直接创建一个对象字面量,而是将对象字面量作为函数的返回值,当我们需要多次或多处创建同类型的对象时,只要调用这个函数就行了。

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

var o = thing();

但这种方法也有一个缺点:它会导致内存膨胀,因为每一个对象都包含了工厂函数的独立副本。理论上我们希望所有对象共享一个工厂函数副本。

原型链

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();

事实上,JavaScript本身就有内置的机制来支持这种通用模式。我们不需要自己创建这个共有的对象(即原型对象),JavaScript会自动为每个函数创建一个原型对象,我们可以把共享数据直接放在这个对象里。

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 类

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

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 类

JavaScript最新的相关改进是ES6 类,用新语法来实现上述功能要简洁得多。

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

  f() {}
  g() {}
}

var o = new Thing();

比较

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

性能

今天的JavaScript引擎已经经过了大幅度的优化,以至于很难通过JavaScript代码来推断怎样会比较快。关键在于测量方法。然而测量方法有时也会失灵。通常每六周就会有更新的JavaScript引擎发布,而在这之前采取的测量方法,和基于这种测量方法做出的决策都有可能失去意义。因此,我的经验法则是选择最官方、最广泛使用的语法,因为大多数时候它经历的实践检验最多,因而性能是最高的。目前来说class语法最符合这一点,在我写这篇文章时,class语法大约比返回字面量的工厂函数快3倍。

特点

随着ES6的发布,类与工厂函数之间曾经存在的几点差异消失了。现在,工厂函数和类都能够强制实现真正的私有数据——工厂函数通过闭包实现,类通过WeakMap实现。两者都能实现多重继承——工厂函数可以将其他属性混入自己的对象,类也可以将其他属性混入自己的原型,或者通过类工厂,通过代理也能实现。工厂函数和类也都可以在需要的时候返回任意对象,语法也都很简单。

结论

综合考虑,我更倾向于class语法。它标准、简单、干净、快速,还提供了所有曾经只有函数工厂才具备的特点。

作者:小峰

来源:51CTO

时间: 2024-08-02 17:03:45

JavaScript创建对象模式与最佳实践的相关文章

IBM PureApplication System 中的模式采用最佳实践

简介 过去几年,我们见证了中间件操作执行方式上的一次真正变革的开始.首先是发布了 IBM WebSphere CloudBurst Appliance 版本,然后推出了 IBM Workload Deployer 和 IBM PureApplication System 的后续版本,引入了基于模式的部署方法,这些已帮助客户在 IBM 中间件的计划.部署和管理方式上实现了根本改变.我们亲眼看到,此方法已改变了系统操作形势,还对采用它的公司中的开发和操作之间的关系产生了重大影响.这些基于模式的方法与

JavaScript Web 应用最佳实践分析

[编者按]本文作者为 Mathias Schäfer,旨在回顾在客户端大量使用JavaScript 的最佳 Web应用实践.文章系国内 ITOM 管理平台 OneAPM 编译呈现. 对笔者来说,JavaScript 社区似乎已经陷入了一个时间扭曲隧道.我们现在进行的关于 JavaScript驱动(JavaScript-driven) Web 应用的讨论与2006年"Ajax"出现以及2012年JavaScript"单页应用"流行起来时的讨论如出一辙.只要我们站在巨人

《Greenplum5.0 最佳实践》 模式设计 (三)

模式设计 最佳实践 Greenplum 是基于大规模并行处理(MPP)和shared-nothing架构的分析型数据库.其不同于高度规范化的事务型SMP数据库. 使用非规范化数据库模式,例如具有大事实表和小维度的星型或者雪花模式,处理MPP分析型任务时,Greenplum数据库表现优异. 数据类型 (Data Types) 使用类型一致 在做关联操作的两个表,其两个关联字段的数据类型尽量保持一致.如果数据类型不一致,Greenplum 数据库必然后动态的转化一个字段的数据类型,这样就可以实现不同

《Web前端开发最佳实践》——3.5 样式与结构分离

3.5 样式与结构分离 网页的结构.表现和行为分离是W3C制定的Web页面标准的精髓,一般的页面结构和表现对应着代码中的HTML和CSS,这意味着在页面中HTML和CSS分离是符合标准的做法.在讨论页面中HTML和CSS组合的最佳实践之前,先来简单说明一下HTML和CSS所有的组合方式.把CSS样式应用于HTML总共有4种方式.(1)在HTML页面中链接一个CSS文件文件以link的形式添加到 部分,在link中可以设置media 属性来表明样式使用的场景.例如,media设置为screen表示

给JavaScript初学者的24条最佳实践(转:http://www.cnblogs.com/yanhaijing/p/3465237.html)

作为"30 HTML和CSS最佳实践"的后续,本周,我们将回顾JavaScript的知识 !如果你看完了下面的内容,请务必让我们知道你掌握的小技巧! 1.使用 === 代替 == JavaScript 使用2种不同的等值运算符:===|!== 和 ==|!=,在比较操作中使用前者是最佳实践. "如果两边的操作数具有相同的类型和值,===返回true,!==返回false."--JavaScript:语言精粹 然而,当使用==和!=时,你可能会遇到类型不同的情况,这种

Javascript模块化编程(一)模块的写法最佳实践_基础知识

随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂.  网页越来越像桌面程序,需要一个团队分工协作.进度管理.单元测试等等......开发者不得不使用软件工程的方法,管理网页的业务逻辑. Javascript模块化编程,已经成为一个迫切的需求.理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块. 但是,Javascript不是一种模块化编程语言,它不支持"类"(class),更遑论"模块&

Javascript 初学者应知的 24 条最佳实践

1. 优先使用 ===,而不是 == JavaScript 使用两种相等性操作符:===,!==和==,!=.通常认为做比较的最佳实践是使用前一组操作符. "若两个操作数的类型和值相同,那么===比较的结果为真,!==比较的结果为假." --- JavaScript语言精粹(JavaScript: The Good Parts) 然而,如果使用==和!=,当比较不同类型的操作数时,你就会碰到问题啦.在这种情况下,这组操作符会尝试对操作数的值做无用的强制转换. 2. Eval 就是糟糕的

javascript创建对象之工厂模式(一)

工厂模式在软件工程里面是一种比较常见的设计模式了.这种模式抽象了创建具体对象的过程. 上代码: function createHuman(name,sex) {             var obj = new Object();             obj.name = name;             obj.sex = sex;             obj.say = function () {                 alert(this.name);        

javascript创建对象之构造函数模式(二)

对上一章节的工厂模式进行代码重写 function Human(name, sex) {             this.name = name;             this.sex = sex;             this.say = function () {                 alert(this.name);             }         }         var man = new Human("汉武大帝", "男&quo