JavaScript模式:字面量和构造函数
本篇主要讨论了通过字面量以构造对象的方法,比如对象、数组以及正则表达式等字面量的构造方法,同时还讨论了与类似Object()和Array()等内置构造函数相比,为什么基于字面量表示法是更为可取。
对象字面量
JavaScript中并没有类的概念,正如其他动态语言一样,JavaScript中的所有元素均为对象。我们可以把JavaScript中的对象看做是其他语言中的HashTable,即键-值对(key-value pair)哈希表。
在JavaScript中所创建的自定义对象在任何时候都是可变的,你可以在任何时间添加或删除对象的属性和方法。考虑以下例子:
1
2
3
4
5
6
7
8
9
10
|
// 定义一个空对象
var dog = {};
// 向dog对象添加一个属性
dog.name = "Ben" ;
// 向dog对象添加一个方法
dog.getName = function () {
return dog.name;
};
|
上例中,dog对象开始时是处于“干净”状态,即一个空对象。然后向该对象添加了一个属性和一个方法。此外在程序生命周期内的任何时候,都可以执行一下操作:
改变属性和方法的值,如下所示:
1
2
3
4
|
dog.getName = function () {
// 重新定义该方法
return "Max" ;
};
|
完全删除属性或方法:
1
|
delete dog.name;
|
添加更多的属性和方法:
1
2
3
4
|
dog.say = function () {
return "Hello" ;
};
dog.fleas = true ;
|
以下是一种语法更为简洁的对象字面量模式,你可在创建对象时向其添加属性和方法,如下所示:
1
2
3
4
5
6
|
var dog = {
name: "Max" ,
getName = function () {
return this .name;
}
};
|
对象字面量语法
1. 将对象包装在大括号中;
2. 对象中以逗号分隔键值对;
3. 用冒号分隔属性名和属性值;
4. 不要忘记最后大括号后的分号。
自定义构造函数
除了对象字面量模式,可以使用自己的构造函数来创建对象,如下所示:
1
2
|
var max = new Person( "Max" );
max.say(); // 输出"I am Max"
|
这种模式看起来很像Java中使用一个名为Person的类创建一个对象,但实际上正如本篇开头所说,JavaScript中并没有类,Person只不过是一个函数而已。
以下是Person构造函数的定义:
1
2
3
4
5
6
|
var Person = function (name) {
this .name = name;
this .say = function () {
return "I am " + this .name;
};
};
|
使用new操作符调用构造函数(Person方法)时,函数内部会发生以下微妙的变化:
1. 创建一个空对象并且this变量引用了该变量,同时还继承了该函数的原型;
2. 属性和方法被加入到this引用的对象中;
3. 新创建的对象由this所引用,并且最后隐式地返回this(如果没有显示地返回其他对象)。
所以使用new操作符调用构造函数时,Person函数看起来会变成如下这样:
1
2
3
4
5
6
7
8
9
10
11
12
|
var Person = function (name) {
// 使用字面量模式创建一个新对象
var this = {};
// 向this添加属性和方法
this .name = name;
this .say = function () {
return "I am " + this .name;
};
return this ;
};
|
需要注意的是,如果在调用构造函数时忘记使用new操作符,函数中的this将会指向全局对象(在浏览器中,this将会指向window),这回带来错误的构造结果。
数组字面量
JavaScript中的数组也是对象,且数组字面量表示法更为简单,更可取,如下所示:
1
2
3
4
|
var a = [ "max" , "allen" , "gao" ];
console.log( typeof a); // 输出"object"
console.log(a.constructor === Array); // 输出true
|
JSON
JSON代表了JavaScript对象表示(JavaScript Object Notation)以及数据传输格式,它是一种轻量级数据交换格式。
实际上JSON只是一个数组和对象字面量表示法的组合,下面是一个JSON字符串的例子:
1
|
{ "name" : "value" , "some" : [1, 2, 3]}
|
注意JSON中的属性名需要包装在引号内。
使用JSON
有一系列方法用来在JSON字符串和对象之间相互转换,如下所示:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
// 从JSON字符串转为对象
var jstr = '{"mykey": "my value"}' ;
var data = JSON.parse(jstr);
console.log(data.mykey); // "my value"
// 从对象转为JSON字符串
var dot = {
name: "Max" ,
dob: new Date(),
legs: [1, 2, 3, 4]
};
var jsonstr = JSON.stringify(dog);
// jsonstr is:
// {"name":"Max","dob":"2013-12-30T12:40:32:198","legs":[1,2,3,4]}
|
正则表达式字面量
JavaScript中的正则表达式也是对象,可以通过new RegExp()和正则表达式字面量两种方法创建正则表达式。
通常情况下,建议优先使用正则表达式字面量方式,如下所示:
1
|
var re = /[a-z]/gm;
|
如果匹配模式需要动态生成,则可用new RegExp()方式创建正则表达式,如下所示:
1
|
var re = new RegExp( "[a-z]" , "gm" );
|
正则表达式字面量语法
正则表达式字面量语法使用了斜杠来包装用于匹配的正则表达式模式。第二个斜杠后,可以将该模式修改为不加引号的字母形式:
g:全局匹配;
m:多行;
i:大小写敏感。
模式修改器可以以任何顺序或者组合方式出现:
1
|
var re = /patterm/gmi;
|
当调用类似String.prototype.replace()的方法以接受正则表达式作为参数时,使用正则表达式字面量有助于编写出更简洁的代码。
1
2
|
var no_letters = "abc123XYZ" .replace(/[a-z]/gi, "" );
console.log(no_letters); // 输出123
|
错误对象
JavaScript中有一些内置错误构造函数,比如Error(), SyntaxError(), TypeError()以及其他,这些处错误构造函数都带有throw语句。通过这些错误构造函数创建的错误对象具有下列属性:
name:用于创建对象的构造函数的名称属性,它可以是一般的”Error“或者更为专门的构造函数,比如”RangeError“。
message:当创建对象时传递给构造函数的字符串。
另一方面,throw适用于任何对象,并不一定是由某个错误构造函数所创建的对象,因此可以选择抛出自己的对象。这种错误对象也可以有属性”name“、”message“,以及任意希望传递给catch语句来处理的其他类型的信息。当设计自定义错误对象时,可以发挥创造性,并且用这些错误对象来将应用程序的状态恢复到正常状态。
1
2
3
4
5
6
7
8
9
10
11
|
try {
throw {
name: "MyErrorType" ,
message: "oops" ,
extra: "This was rather embrassing" ,
remedy: genericErrorHandler
};
} catch (e) {
alert(e.message);
e.remedy();
}
|
小节
本篇中,我们已经学习到不同的字面量模式,相比构造函数,这些都是更为简单的替代方法。本篇主要讨论了下列主题:
1. 对象字面量表示法是一种优美的对象创建方式,它以包装在大括号中的逗号分隔的键值对(key-value pair)的方式创建对象;
2. 自定义构造函数;
3. 数组字面量表示法;
4. JSON
5. 正则表达式字面量
6. 错误对象
在一般情况下,除了Date()构造函数以外,很少使用其他内置构造函数。下面的表格总结了这些构造函数及其相应的优先选择的字面量模式:
内建构造函数(避免使用) | 字面量模式(推荐) |
var o = new Object(); | var o = {}; |
var a = new Array(); | var a = []; |
var re = new RegExp("[a-z]", "g"); | var re = /[a-z]/g; |
var s = new String(); | var s = ""; |
var n = new Number(); | var n = 0; |
var b = new Boolean(); | var b = false; |
throw new Error("un-oh"); |
throw { name: "Error", message: "uh-oh" } or throw Error("un-oh"); |
转载于:https://www.cnblogs.com/gluncle/p/8392060.html
JavaScript模式:字面量和构造函数相关推荐
- js设计模式每次10分钟:字面量和构造函数模式对比
字面量和构造函数模式 字面量 var dog={} dog.name="benji"; //属性 dog.getName=function(){ //方法return this.n ...
- JavaScript模板字面量(Template literals)介绍
JavaScript模板字面量(Template literals)介绍 模板字面量(Template literals)是什么? 简单地说,是允许嵌入表达式的字符串字面量.在反引号中可以直接使用单引 ...
- JavaScript模式读书笔记 第3章 字面量和构造函数
1,对象字面量 -1,Javascript中所创建的自定义对象在任务时候都是可变的.可以从一个空对象开始,根据需要增加函数.对象字面量模式可以使我们在创建对象的时候向其添加函数. ...
- js关于字面量与构造函数创建对象的几点理解
2019独角兽企业重金招聘Python工程师标准>>> 一.在javascript中没有所谓的空对象,即使最简单的{}也具有从Object.prototype继承的方法和属性. 二. ...
- JavaScript 对象字面量
目录 一. 对象的基本用法 二. 遍历对象 三. 属性的类型 1. 数据类型 2. 访问浏览器属性 3.定义多个属性 4. 检测属性 5. 对象安全防护(对象拓展,对象密封,对象冻结) 四.对象在实际 ...
- 【精讲】Javascript模板字面量
文章目录 模板字面量是什么? 将模板字面量传入函数(带标签的模板字符串) 第一个参数 其他参数 如何将模板字面量输出为完整字符串呢? 模板字面量是什么? 模板字面量,是允许嵌入表达式的字符串字面量. ...
- JavaScript的字面量与变量,嵌入式web开发
前言 最近在准备面试,然后复习下之前写过的项目,书籍,笔记,文章.一看很多知识点都没有印象,最可拍的是连自己为了防止忘记写的文章竟然都感觉不是自己写的.有些开始怀疑人生了. 好了,废话少说,离金三银四 ...
- web前端开发薪资,JavaScript的字面量与变量
随着Web应用程序功能的日益复杂和复杂,Web开发人员需要灵活的工具来满足不断增长的用户期望.好消息是,Web开发生态系统为我们提供了很多选择,老牌公司和开源社区都在竞相构建更强大的库,框架和应用程序 ...
- javascript的字面量
在很多javascript框架中经常可以看到诸如var a={};var b=[];或var c={name:"syj"};这些写法让大家摸不到头脑,由于这些写法中使用了[]{}这 ...
- JavaScript 使用对象字面量创建对象、使用new Object创建对象
博主前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住也分享一下给大家,
最新文章
- Python中logging.config配置文件解读
- [sqlserver脚本]查看指定SQL语句生成了哪些执行计划
- 电脑显示器变色_两千元档超强电竞小金刚:180hz的泰坦军团T27QR显示器
- 去 IOE,MySQL 完胜 PostgreSQL
- 生成随机长度字符串,比如密码等
- python并行任务之生产消费模式
- 【Java】一个List按照另一个List的数据顺序来排序
- 1424 零树 (树形DP)
- oracle主机修改IP后客户端无法连接
- App Transport Security has blocked a cleartext
- java 爬虫大型教程(一)
- android 华为 imei,华为手机怎么查看IMEI码?华为手机查询IMEI串号两种方法,华为imei...
- 高效能人士的七个习惯(零)前言
- 背景图片渲染时有色块怎么办
- BBS中用SSH方式登录添加附件
- [转载] 【冬瓜哥手绘雄文】集群文件系统架构演变终极深度梳理图解
- Tomcat启用SSL导致Firefox出现“安全连接失败”错误的解决方法
- superset汉化
- Vue全家桶学习笔记:Vue Router篇
- 学习python-day02-25---转自Python分布式爬虫打造搜索引擎Scrapy精讲
热门文章
- ads1115的程序,不知道问题出在哪里,一直读出数据都是0。大佬们帮忙看看,感激不尽
- B to B 与B to C网络支付结算方式区别
- ML面试1000题系列(71-80)
- “酷我音乐”借“大数据”名义 恐已窥探并收集用户隐私长达数年
- Mac,Windows11,Windows10局域网互传共享文件
- BJFUOJ 1429
- 中国全电动注塑机行业发展趋势及未来需求前景预测报告(2022-2027年)
- 慢就是快的人生哲理_非常精辟的人生哲理句子,句句经典睿智,不管多忙都要看看!...
- CSS单位px、em、rem、vh、vw、vmin、vmax
- 优酷Android包瘦身治理思路