3.Contructor(构造器)模式—精读《JavaScript 设计模式》Addy Osmani著

同系列友情链接:


1.设计模式之初体验—精读《JavaScript 设计模式》Addy Osmani著
2.设计模式的分类—精读《JavaScript 设计模式》Addy Osmani著

Construct(构造器)模式


在经典的面向对象编程语言中,Construtor是一种在内存已分配给该对象的情况下,用于初始化新创建对象的特殊方法。

在 JavaScript 中,几乎所有东西都是都是对象,可能你会经常找不到对象,?,你承认不??

来看一下什么是 Object构造器 :

用于创建特定类型的对象——准备好对象以备使用,同时接受构造器可以使用的参数,以在第一次创建对象时,设置成员属性和方法值。

下图为:Constructor(构造器)模式

对象的创建

在 JavaScript 中,创建对象时有发生,常见的创建方式有两种:

  1. 直接空对象赋值;
  2. 使用 new关键字
// 1. 直接空对象赋值
var newObject = {};// 2. 使用 new 关键字创建,newObject构造器的简洁记法
var newObject = new Object();
复制代码

在 Object构造器为特定的值创建对象封装,或者没有传递值时,它将创建 一个空对象并返回这个空对象;

对象的赋值

四种方法可以将键值赋值给一个对象:

  1. ECMAScript 3 兼容方式;
    1. “点”语法;
    2. 中括号语法
  2. 只适用于ECMAScript 5 方式;
    1. Object.defineProperty;
    2. Object.defineProperties
// 1.点语法
// 设置属性
newObject.someKey = "Hello World!";
// 获取属性值
var key = newObject.someKey;// 2.中括号语法
// 设置属性
newObject["somekey"] = "Hello world!";
// 获取属性值
var key = newObject["somekey"];// 3.Object.defineProperty
// 设置属性
Object.defineProperty(newObject,"somekey",{value:"Hello World!",// 该属性对应的值,默认为undefinedwritable:true,// 能否修改属性的值,如果直接使用字面量定义对象,默认值为trueenumerable:true,// 表示该属性是否可枚举,即是否通过for-in循环或Object.keys()返回属性,如果直接使用字面量定义对象,默认值为trueconfigurable:true// 表示能否通过delete删除此属性,能否修改属性的特性,或能否修改把属性修改为访问器属性,如果直接使用字面量定义对象,默认值为true
});
// 也可以简化一下这种方式
var defineProp = function(obj,key,value){config.value=value;Object.defineProperty(obj,key,config);
}
// 使用上述方式,先创建一个空的 person对象
var person = Object.create(null);
// 然后设置各个属性
defineProp(person,"car","Delorean");
defineProp(person,"dateOfBrith","1989");
defineProp(person,"hasBeard",false);
// 获取属性值同1,2
var key_car = person["car"];
var key_dateOfBrith = person["dateOfBrith"];
var key_hasBeard = person["hasBeard"];// 4.Object.defineProperties
// 设置属性
Object.defineProperties(newObject,{"someKey":{value:"Hello World!",writable:true},"anotherKey":{value:"Foo Bar",writable:false}
});
// 获取属性值同1,2
var key_someKey = person["someKey"];
var key_anotherKey = person["anotherKey"];复制代码

上面定义的这些方法甚至可以用于继承如下所示:

// 用法
// 创建赛车司机 driver 对象,继承于 person 对象
var driver = Object.create(person);
// 为 driver 设置一些属性
defineProp(deriver,"topSpeed","100mph");
// 获取继承属性
console.log(driver.dateOfBrith);
// 获取我们设置的100mph属性
console.log(driver.topSpeed);复制代码

基本Constructor(构造器)

大家都知道 JavaScript 不支持类的概念,但是它却支持与对象一起使用的 特殊的 Constructor 函数。通过在构造器前面加 new关键字,告诉 JavaScript 像使用构造器一样实例化一个新的对象,并且对象成员由该函数定义。

在构造器内,关键字 this引用新创建的对象。回顾对象创建,基本的构造器看起来可能是这样的:

function Car(model,year,miles){this.model = model;this.year = year;this.miles = miles;this.toString= function(){return this.model+ " has done " + this.miles + " miles";}
}
// 用法
var civic = new Car("Honda Civic",2009,20000);
var mondeo= new Car("Ford Mondeo",2010,5000);console.log(civic.toString());
console.log(mondeo.toString());
复制代码

上面是一个简单的构造器模式版本,但是也是存在问题的:因为她很难继承,另一个 问题就是 toString()这样的函数是为每个使用 Car 构造器创建的新对象而重新定义的。 这不是最理想的,因为这种函数应该在所有的 Car 实例之间共享。

其实这个问题很好解决,因为有很多ES3和 ES5兼容替代方法能够用于创建对象。

带原型的Constructor(构造器)

JavaScript中有一个名为 prototype 的属性。调用 JavaScript 构造器创建一个对象后,新的对象就具有构造器原型的所有属性。通过这种方式,可以创建多个 Car 对象,并访问相同的原型。所以我们可以扩展原始示例,如下所示:

function Car(model,year,miles){this.model = model;this.year = year;this.miles = miles;
}
// 前方警告:小伙伴是否还记得反模式一条:避免重新定义 prototype对象
// 所以下面我们是使用 Object.prototype.newMethod而不是Object.prototype来定义对象内部的方法
Car.prototype.toString=function(){return this.model+ " has done " + this.miles + " miles";
}
// 用法
var civic = new Car("Honda Civic",2009,20000);
var mondeo= new Car("Ford Mondeo",2010,5000);console.log(civic.toString());
console.log(mondeo.toString());// 这样 toString()的单一示实例就可以在所有的 Car 对象之间共享了
复制代码

小结

今天的构造器模式,是不是很nice?

但是,你掌握了多少?

你可以动动小手指示例代码都敲一遍,相信你可以更进一步了解,掌握 Constructor(构造器)模式。

下一篇将对Module(模块)模式做详细的介绍。这一模式更精彩,因为很快你就会知道为什么别人都那么写了,以及模块化的相关概念等等等

( ^_^ )/~~拜拜

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/389262.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

BZOJ 3653: 谈笑风生(离线, 长链剖分, 后缀和)

题意 给你一颗有 \(n\) 个点并且以 \(1\) 为根的树。共有 \(q\) 次询问,每次询问两个参数 \(p, k\) 。询问有多少对点 \((p, a, b)\) 满足 \(p,a,b\) 为三个不同的点,\(p, a\) 都为 \(b\) 的祖先,且 \(p\) 到 \(a\) 的距离不能超过 \(k\) 。 …

搜索引擎优化学习原理_如何使用数据科学原理来改善您的搜索引擎优化工作

搜索引擎优化学习原理Search Engine Optimisation (SEO) is the discipline of using knowledge gained around how search engines work to build websites and publish content that can be found on search engines by the right people at the right time.搜索引擎优化(SEO…

Siamese网络(孪生神经网络)详解

SiameseFCSiamese网络(孪生神经网络)本文参考文章:Siamese背景Siamese网络解决的问题要解决什么问题?用了什么方法解决?应用的场景:Siamese的创新Siamese的理论Siamese的损失函数——Contrastive Loss损失函…

Dubbo 源码分析 - 服务引用

1. 简介 在上一篇文章中,我详细的分析了服务导出的原理。本篇文章我们趁热打铁,继续分析服务引用的原理。在 Dubbo 中,我们可以通过两种方式引用远程服务。第一种是使用服务直联的方式引用服务,第二种方式是基于注册中心进行引用。…

期权价格的上限和下限

期权按照买方权利性质分为:看涨期权和看跌期权 1、首先,看涨期权的上限和下限 看涨期权价格上限为其标的资产价格。 看涨期权是给予买方一个在未来买入标的资产的权利,如果该权利的价格高于标的资产的价格,那么投资者不如直接购买…

一件登录facebook_我从Facebook的R教学中学到的6件事

一件登录facebookBetween 2018 to 2019, I worked at Facebook as a data scientist — during that time I was involved in developing and teaching a class for R beginners. This was a two-day course that was taught about once a month to a group of roughly 15–20 …

SiameseFC超详解

SiameseFC前言论文来源参考文章论文原理解读首先要知道什么是SOT?(Siamese要做什么)SiameseFC要解决什么问题?SiameseFC用了什么方法解决?SiameseFC网络效果如何?SiameseFC基本框架结构SiameseFC网络结构Si…

Python全栈工程师(字符串/序列)

ParisGabriel Python 入门基础字符串:str用来记录文本信息字符串的表示方式:在非注释中凡是用引号括起来的部分都是字符串‘’ 单引号“” 双引号 三单引""" """ 三双引有内容代表非空字符串否则是空字符串 区别&#xf…

跨库数据表的运算

跨库数据表的运算,一直都是一个说难不算太难,说简单却又不是很简单的、总之是一个麻烦的事。大量的、散布在不同数据库中的数据表们,明明感觉要把它们合并起来,再来个小小的计算,似乎也就那么回事……但真要做起来&…

FCN全卷积网络随笔

参考:四、全卷积网络FCN详细讲解(超级详细哦) 这篇文章已经写的很好了,这里说两个我考虑的点。 第一个就是:FCN在缩小成heat map,为什么要通过上采样还原回原图大小? 我觉得这个的原因是因为&a…

熊猫在线压缩图_回归图与熊猫和脾气暴躁

熊猫在线压缩图数据可视化 (Data Visualization) I like the plotting facilities that come with Pandas. Yes, there are many other plotting libraries such as Seaborn, Bokeh and Plotly but for most purposes, I am very happy with the simplicity of Pandas plotting…

敏捷数据科学pdf_敏捷数据科学数据科学可以并且应该是敏捷的

敏捷数据科学pdfTL;DR;TL; DR; I have encountered a lot of resistance in the data science community against agile methodology and specifically scrum framework; 在数据科学界,我遇到了许多反对敏捷方法论(特别是Scrum框架)的抵制。 I don’t see it this …

oracle的连接字符串

OracleConnection oCnn new OracleConnection("Data SourceORCL_SERVER;USERM70;PASSWORDmmm;");建立个角色 建立个表空间(角色与表空间同名的) 在方案里就可以建立表,然后就哦了 10g

SiameseRPN详解

SiameseRPN论文来源论文背景一,简介二,研究动机三、相关工作论文理论注意:网络结构:1.Siamese Network2.RPN3.LOSS计算4.Tracking论文的优缺点分析一、Siamese-RPN的贡献/优点:二、Siamese-RPN的缺点:代码流…

数据可视化 信息可视化_可视化数据操作数据可视化与纪录片的共同点

数据可视化 信息可视化Data visualization is a great way to celebrate our favorite pieces of art as well as reveal connections and ideas that were previously invisible. More importantly, it’s a fun way to connect things we love — visualizing data and kicki…

python 图表_使用Streamlit-Python将动画图表添加到仪表板

python 图表介绍 (Introduction) I have been thinking of trying out Streamlit for a while. So last weekend, I spent some time tinkering with it. If you have never heard of this tool before, it provides a very friendly way to create custom interactive Data we…

Python--day26--复习

转载于:https://www.cnblogs.com/xudj/p/9953293.html

sockets C#

Microsoft.Net Framework为应用程序访问Internet提供了分层的、可扩展的以及受管辖的网络服务,其名字空间System.Net和System.Net.Sockets包含丰富的类可以开发多种网络应用程序。.Net类采用的分层结构允许应用程序在不同的控制级别上访问网络,开发人员可…

667. Beautiful Arrangement II

找规律 1&#xff0c;2&#xff0c;... , n 乱序排列&#xff0c;相邻数据的绝对差最多有n-1种 比如1&#xff0c;2&#xff0c;3&#xff0c;4&#xff0c;5对应于 1 5 2 4 3 class Solution { public:vector<int> constructArray(int n, int k) {vector<int> re…