本篇主要讨论了通过字面量以构造对象的方法,比如对象、数组以及正则表达式等字面量的构造方法,同时还讨论了与类似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");

JavaScript模式:字面量和构造函数的更多相关文章

  1. 《JavaScript模式》第3章 字面量和构造函数

    @by Ruth92(转载请注明出处) 第3章:字面量和构造函数 一.创建对象的三种方式 // 对象字面量 var car = {goes: "far"}; // 内置构造函数(反 ...

  2. 《javascript模式--by Stoyan Stefanov》书摘--字面量和构造函数

    二.字面量和构造函数 1,能够使用对象字面量时,就没理由使用new Object构造函数 // 一个空对象var 0 = new Object();console.log( o.constructor ...

  3. JavaScript 模式》读书笔记(3)— 字面量和构造函数3

    这是字面量和构造函数的最后一篇内容,其中包括了JSON.正则表达式字面量,基本值类型包装器等知识点.也是十分重要的哦. 五.JSON JSON是指JavaScript对象表示以及数据传输格式.它是一种 ...

  4. 《JavaScript 模式》读书笔记(3)— 字面量和构造函数1

    新的篇章开始了,本章开始,所有的内容都是十分有价值和意义的.本章主要的内容包括对象字面量.构造函数.数组字面量.正则字面量.基本值类型字面量以及JSON等.在大家的工作和实际应用中也有一定的指导意义. ...

  5. JavaScript 对象字面量

    JavaScript 对象字面量   JavaScript 对象字面量 在编程语言中,字面量是一种表示值的记法.例如,"Hello, World!" 在许多语言中都表示一个字符串字 ...

  6. JavaScript对象字面量

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  7. JSON字符串和Javascript对象字面量

    JSON字符串和Javascript对象字面量 JSON是基于Javascript语法的一个子集而创建的,特别是对象和数组字面量语法. 正是由于JSON的这种特殊来历,导致很多Javascript程序 ...

  8. JavaScript 模式》读书笔记(3)— 字面量和构造函数2

    上一篇啊,我们聊了聊字面量对象和自定义构造函数.这一篇,我们继续,来聊聊new和数组字面量. 三.强制使用new的模式 要知道,构造函数,只是一个普通的函数,只不过它却是以new的方式调用.如果在调用 ...

  9. Javascript模式(第三章字面量与构造函数)------读书笔记

    一 对象字面量 1.1对象字面量的语法 1,对象键值对哈希表,在其他的编程语言中称之为“关联数组”, 2 键值对里面的值,可以是原始类型也可以是其他类型的对象,称之为属性,函数称之为方法 3 自定义对 ...

随机推荐

  1. 用docker部署zabbix

    官方文档 https://www.zabbix.com/documentation/3.4/zh/manual/installation/containers 1 启动一个空的Mysql服务器实例 d ...

  2. es6 Promise 异步函数调用

    开发很多的时候需要异步操作,常用的做法就是用回调函数,假如需要一连串的调用,并且后面一个调用依赖前一个返回的结果的时候,就得多层嵌套回调函数,比如下面这种情况: $('.animateEle').an ...

  3. 2014-VGG-《Very deep convolutional networks for large-scale image recognition》翻译

    2014-VGG-<Very deep convolutional networks for large-scale image recognition>翻译 原文:http://xues ...

  4. 伸缩布局flex

    一.伸缩布局的起源 1.之前我们想要适应不同的浏览器,一般采用的是设置宽度.高度为父级元素的百分比,但是有时候百分比的计算是相当复杂的,加上有时候还有规定的宽度要设置,所以,伸缩布局的出现是我们所急需 ...

  5. Ubuntn16.04+OpenCV3.1+CUDA8.0+cudnn5.1+caffe配置及问题集锦

    ubuntn16.04 Caffe安装步骤记录(超详尽) 一开始安装好ubuntn16.04后,先安装的opencv3.1,再自己安装的390驱动,cuda8.0和cudnn,之后配置caffe一直不 ...

  6. utils04_搭建私有Git服务器

    1.远程仓库实际上和本地仓库没啥不同,纯粹为了7x24小时开机并交换大家的修改.GitHub就是一个免费托管开源代码的远程仓库.但是对于某些视源代码如生命的商业公司来说,既不想公开源代码,又舍不得给G ...

  7. 原生 js 实现摇一摇功能

    参考此大牛的博客:https://blog.csdn.net/chclvzxx/article/details/46325053

  8. html css javascript mysql php学习总结

    一. html:超文本标记语言,运行在浏览器上,由浏览器解析 1.格式 <!doctype html> 声明文档类型,说明html版本号 <html> 说明代码格式 <h ...

  9. 关于Cesium 官方教程

    最近一直在准备第一次QQ群的Cesium基础培训公开课,虽说使用Cesium也有段日子了,但是要说对Cesium了解有多深,还真不一定.原因是一直以来我都是用哪里学哪里.基于多年开发三维数字地球的底层 ...

  10. Tensorflow通过CNN实现MINST数据分类

    import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data mnist = input_dat ...