百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 热门文章 > 正文

Javascript对象创建模式 js创建对象的几种方式以及区别

bigegpt 2024-10-19 02:52 68 浏览

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对象创建的偏好是使用类语法。它是标准的,它简单而干净,速度快,并且它提供了曾经只有工厂模式才能提供的所有功能

设计模式

本文转载自:https://www.doweb.me/article/146.shtml

相关推荐

得物可观测平台架构升级:基于GreptimeDB的全新监控体系实践

一、摘要在前端可观测分析场景中,需要实时观测并处理多地、多环境的运行情况,以保障Web应用和移动端的可用性与性能。传统方案往往依赖代理Agent→消息队列→流计算引擎→OLAP存储...

warm-flow新春版:网关直连和流程图重构

本期主要解决了网关直连和流程图重构,可以自此之后可支持各种复杂的网关混合、多网关直连使用。-新增Ruoyi-Vue-Plus优秀开源集成案例更新日志[feat]导入、导出和保存等新增json格式支持...

扣子空间体验报告

在数字化时代,智能工具的应用正不断拓展到我们工作和生活的各个角落。从任务规划到项目执行,再到任务管理,作者深入探讨了这款工具在不同场景下的表现和潜力。通过具体的应用实例,文章展示了扣子空间如何帮助用户...

spider-flow:开源的可视化方式定义爬虫方案

spider-flow简介spider-flow是一个爬虫平台,以可视化推拽方式定义爬取流程,无需代码即可实现一个爬虫服务。spider-flow特性支持css选择器、正则提取支持JSON/XML格式...

solon-flow 你好世界!

solon-flow是一个基础级的流处理引擎(可用于业务规则、决策处理、计算编排、流程审批等......)。提供有“开放式”驱动定制支持,像jdbc有mysql或pgsql等驱动,可...

新一代开源爬虫平台:SpiderFlow

SpiderFlow:新一代爬虫平台,以图形化方式定义爬虫流程,不写代码即可完成爬虫。-精选真开源,释放新价值。概览Spider-Flow是一个开源的、面向所有用户的Web端爬虫构建平台,它使用Ja...

通过 SQL 训练机器学习模型的引擎

关注薪资待遇的同学应该知道,机器学习相关的岗位工资普遍偏高啊。同时随着各种通用机器学习框架的出现,机器学习的门槛也在逐渐降低,训练一个简单的机器学习模型变得不那么难。但是不得不承认对于一些数据相关的工...

鼠须管输入法rime for Mac

鼠须管输入法forMac是一款十分新颖的跨平台输入法软件,全名是中州韵输入法引擎,鼠须管输入法mac版不仅仅是一个输入法,而是一个输入法算法框架。Rime的基础架构十分精良,一套算法支持了拼音、...

Go语言 1.20 版本正式发布:新版详细介绍

Go1.20简介最新的Go版本1.20在Go1.19发布六个月后发布。它的大部分更改都在工具链、运行时和库的实现中。一如既往,该版本保持了Go1的兼容性承诺。我们期望几乎所...

iOS 10平台SpriteKit新特性之Tile Maps(上)

简介苹果公司在WWDC2016大会上向人们展示了一大批新的好东西。其中之一就是SpriteKitTileEditor。这款工具易于上手,而且看起来速度特别快。在本教程中,你将了解关于TileE...

程序员简历例句—范例Java、Python、C++模板

个人简介通用简介:有良好的代码风格,通过添加注释提高代码可读性,注重代码质量,研读过XXX,XXX等多个开源项目源码从而学习增强代码的健壮性与扩展性。具备良好的代码编程习惯及文档编写能力,参与多个高...

Telerik UI for iOS Q3 2015正式发布

近日,TelerikUIforiOS正式发布了Q32015。新版本新增对XCode7、Swift2.0和iOS9的支持,同时还新增了对数轴、不连续的日期时间轴等;改进TKDataPoin...

ios使用ijkplayer+nginx进行视频直播

上两节,我们讲到使用nginx和ngixn的rtmp模块搭建直播的服务器,接着我们讲解了在Android使用ijkplayer来作为我们的视频直播播放器,整个过程中,需要注意的就是ijlplayer编...

IOS技术分享|iOS快速生成开发文档(一)

前言对于开发人员而言,文档的作用不言而喻。文档不仅可以提高软件开发效率,还能便于以后的软件开发、使用和维护。本文主要讲述Objective-C快速生成开发文档工具appledoc。简介apple...

macOS下配置VS Code C++开发环境

本文介绍在苹果macOS操作系统下,配置VisualStudioCode的C/C++开发环境的过程,本环境使用Clang/LLVM编译器和调试器。一、前置条件本文默认前置条件是,您的开发设备已...