对象字面量

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. 前端复习HTML+CSS+JavaScript(必问面试题)

    前端复习 HTML 常见的几种图片格式以及他们之间的区别是什么? JPG:支持有损压缩.不支持透明.不支持动画.色彩还原度较好 PNG:不支持压缩.支持透明.半透明.不透明.不支持动画 GIF:支持有 ...

  2. 什么是java前端绑定事件_java复习前端篇——JavaScript

    1.JS的概述: 什么是JS:运行在浏览器端脚本语言,基于对象和事件驱动的语言,应用于客户端,浏览器会在读取代码时,逐行地执行脚本代码.而对于传统编程来说,会在执行前对所有代码进行编译. JS的用途: ...

  3. JavaScript基础复习之数据类型,解读数据类型不为人知的一面

    <=> 朋友你好,这里是小毅的前端日记, 分享代码日常 ! <=> 本文目标:查缺补漏Javascript数据类型,解读数据类型不为人知的一面 <=> 卑微的大三前 ...

  4. [译]JavaScript中,{}+{}等于多少?

    最近,Gary Bernhardt在一个简短的演讲视频"Wat"中指出了一个有趣的JavaScript怪癖:在把对象和数组混合相加时,会得到一些你意想不到的结果.本篇文章会依次讲解 ...

  5. Javascript笔记:(实践篇)从jQuery插件技术说起(上篇)

    最近写了个网站,当时借鉴了很多相关网站前端技术,为了让客户的体验更加好,我在网站前端加入了相当多的校验代码,因此代码显的特别臃肿.虽然开发过程中我将前端代码重构了三次,但是我还是对我原来写的代码不满意 ...

  6. javascript:void(0)用法及常见问题解析

    使用过ajax的朋友经常会见到这样的代码:here,这里面的void是一个操作符,该操作符指定要计算一个表达式但是不返回值.javascript:void(0) 在某些情况下会有浏览器不兼容的bug. ...

  7. JavaScript实现九九乘法表

    上次我们利用递归实现了一个简单的九九乘法表,这次我们换一个方法,利用JavaScript(简称JS)来实现,首先复习一下:JavaScript是一种直译式脚本语言,是一种动态类型.基于原型的语言,内置 ...

  8. 热插拔机制之udev和mdev

    热插拔是内核和用户空间之间,通过调用用户空间程序(如hotplug.udev 和 mdev)的交互. 当需要通知用户内核发生了某种热插拔事件时,内核才调用这个用户空间程序. 1. 3种热插拔机制 Li ...

  9. JavaScript-高级(学习笔记)

    课程介绍 大纲 1.原型及作用 2.游戏:贪吃蛇 3.继承 4.高阶函数(内置的方法+正则表达式) 5.正则表达式 目标 理解面向对象开发思想 掌握Javascript面向对象开发相关模式 掌握在Ja ...

  10. vue判断离开当前页面_vue离开当前页面触发的函数代码

    vue离开当前页面触发的函数代码 我就废话不多说了,大家还是直接看代码吧~ destroyed(){ console.log('销毁') } 补充知识:vue中进入路由页面和离开路由页面后执行函数 进 ...

最新文章

  1. linux mysql 自动加斜杠_【实战演练】Linux操作系统19-Mysql主主复制加Keepalived高可用...
  2. Floyd算法 笔记 C/C++
  3. 一个简单的三层架构例子(.NET入门)
  4. 机器学习系统设计——误差矩阵
  5. 将内存消耗减少20倍
  6. mysql卸载权限不够_Linu下启动MySQL结果显示:env: /etc/init.d/mysql:权限不够怎么解决?...
  7. C语言 二分法查找数组元素
  8. a*算法路径规划matlab_【优化求解】基于栅格地图——遗传算法的机器人最优路径规划...
  9. 【场效应管】之【场效应管型号技术参数】
  10. java ajaxsubmit_jQuery 使用 ajaxSubmit() 提交表单实现方法
  11. 机器学习实践—基于Scikit-Learn、Keras和TensorFlow2第二版—第2章 端到端机器学习项目实践
  12. CentOS 7.3安装详解
  13. 安卓libc setenv函数内存泄漏
  14. 李子柒:不希望年轻人当网红...
  15. Halo中的elliptic curve cycle
  16. Latex基础命令入门
  17. 利用python爬取微博热搜并进行数据分析
  18. 锐龙r9 4900H怎么样
  19. 重装系统后电脑数据恢复办法
  20. c语言指针英语演讲,3分钟有哲理英语演讲小故事精选3篇

热门文章

  1. 粗糙集理论(Rough Set Theory)
  2. iMeta观点 | 短读长扩增子测序是否适用于微生物组功能的预测?
  3. 有效沟通bic法则_职场中5个有效沟通的法则
  4. 服务器单硬盘raid,服务器硬盘做raid0
  5. android开发塔防游戏机,上手快又耐玩 五款Android平台塔防类游戏推荐
  6. ansys19.0安装破解教程(图文详解)
  7. Spring Cloud CAP 简述
  8. Python实现二维码生成器
  9. Spring validation框架简介
  10. arm服务器测评_ARM:异军突起