尝试汇总下JavaScript的基础知识

本文包括：

• JavaScript简介（1）
• <script>标签（2）
• 数据类型（3）
• 变量与作用域（4）
• 引用类型（5）

JavaScript简介

1.JavaScript的组成：

一个完整的JavaScript由以下三部分组成：

• 核心（ECMAScript）
• 文档对象模型（DOM）

• 浏览器对象模型（BOM）
  image

1.1核心（ECMAScript）

1.2文档对象模型（DOM）

DOM级别：

DOM级别可以分为四个：DOM0级、DOM1级、DOM2级和DOM3级。
DOM1 级（DOM Level 1）于 1998 年 10 月成为 W3C 的推荐标准。DOM1 级由两个模块组成：DOM核心（DOM Core）和 DOM HTML。其中，DOM 核心规定如何映射基于 XML 的文档结构，以便简化对文档中任意部分的访问和操作。DOM HTML 模块则在 DOM 核心的基础上加以扩展，添加了针对 HTML 的对象和方法。DOM1 级的目标主要是映射文档的结构。DOM2 级在原来 DOM 的基础上又扩充了（DHTML 一直都支持的）鼠标和用户界面事件、范围、遍历（迭代 DOM文档的方法）等细分模块，而且通过对象接口增加了对 CSS（Cascading Style Sheets，层叠样式表）的支持。DOM2 级引入了下列新模块，也给出了众多新类型和新接口的定义。

• DOM 视图（DOM Views）：定义了跟踪不同文档（例如，应用 CSS 之前和之后的文档）视图的接口；
• DOM 事件（DOM Events）：定义了事件和事件处理的接口；
• DOM 样式（DOM Style）：定义了基于 CSS 为元素应用样式的接口；
• DOM 遍历和范围（DOM Traversal and Range）：定义了遍历和操作文档树的接口。

DOM3 级则进一步扩展了 DOM，引入了以统一方式加载和保存文档的方法——在 DOM 加载和保存（DOM Load and Save）模块中定义；新增了验证文档的方法——在 DOM 验证（DOM Validation）模块中定义。DOM3 级也对 DOM 核心进行了扩展，开始支持 XML 1.0 规范，涉及 XML Infoset、XPath和 XML Base。除了 DOM 核心和 DOM HTML 接口之外，另外几种语言还发布了只针对自己的 DOM 标准。下面列出的语言都是基于 XML 的，每种语言的 DOM 标准都添加了与特定语言相关的新方法和新接口：

• SVG（Scalable Vector Graphic，可伸缩矢量图）1.0；
• MathML（Mathematical Markup Language，数学标记语言）1.0；
• SMIL（Synchronized Multimedia Integration Language，同步多媒体集成语言）。

还有一些语言也开发了自己的 DOM 实现，例如 Mozilla 的 XUL（XML User Interface Language，XML
用户界面语言）。但是，只有上面列出的几种语言是 W3C 的推荐标准。

DOM事件：

DOM事件分为3个级别：DOM0级事件处理，DOM2级事件处理和DOM3级事件处理。
1.DOM0级事件
最早的html的事件处理方式如下：

<button type="button" onclick="showFn()"></button>

<script>
    function showFn() {
        alert('Hello World');
    }
</script>

以上代码直接在HTML代码里定义了一个onclick触发showFn方法，这样的事件处理程序缺点就是HTML于JS强耦合，我们一旦需要修改函数名就得修改两个地方。当然其优点是不需要操作DOM来完成事件的绑定。

DOM0级事件就是将一个函数赋值给一个事件处理属性，比如：

<button id="btn" type="button"></button>

<script>
    `var btn = document.getElementById('btn');`
    
    btn.onclick = function() {
        alert('Hello World');
    }
    
    // btn.onclick = null; 解绑事件 `
</script>

以上代码我们给button定义了一个id，通过JS获取到了这个id的按钮，并将一个函数赋值给了一个事件处理属性onclick，这样的方法便是DOM0级处理事件的体现。我们可以通过给事件处理属性赋值null来解绑事件。

DOM0级事件处理程序的缺点在于一个处理程序无法同时绑定多个处理函数，比如我还想在按钮点击事件上加上另外一个函数。
2.DOM2级事件
DOM2级事件在DOM0级事件的基础上弥补了一个处理程序无法同时绑定多个处理函数的缺点，允许给一个处理程序添加多个处理函数。代码如下：

<button id="btn" type="button"></button>`
<script>
    var btn = document.getElementById('btn');
    function showFn() {
        alert('Hello World');
    }
    btn.addEventListener('click', showFn, false);
    // btn.removeEventListener('click', showFn, false); 解绑事件 
</script>

DOM2级事件定义了addEventListener和removeEventListener两个方法，分别用来绑定和解绑事件，方法中包含3个参数，分别是绑定的事件处理属性名称（不包含on）、处理函数和是否在捕获时执行事件处理函数。如果我们还需要添加一个鼠标移入的方法，只需要：

btn.addEventListener('mouseover', showFn, false);
这样点击按钮和鼠标移入时都将触发showFn方法。

需要注意的是IE8级以下版本不支持addEventListener和removeEventListener，需要用attachEvent和detachEvent来实现：

btn.attachEvent('onclick', showFn); // 绑定事件 
btn.detachEvent('onclick', showFn); // 解绑事件 

这里我们不需要传入第三个参数，因为IE8级以下版本只支持冒泡型事件。

3.DOM3级事件
DOM3级事件在DOM2级事件的基础上添加了更多的事件类型，全部类型如下：

• UI事件，当用户与页面上的元素交互时触发，如：load、scroll
• 焦点事件，当元素获得或失去焦点时触发，如：blur、focus
• 鼠标事件，当用户通过鼠标在页面执行操作时触发如：dbclick、mouseup
• 滚轮事件，当使用鼠标滚轮或类似设备时触发，如：mousewheel
• 文本事件，当在文档中输入文本时触发，如：textInput
• 键盘事件，当用户通过键盘在页面上执行操作时触发，如：keydown、keypress
• 合成事件，当为IME（输入法编辑器）输入字符时触发，如：compositionstart
• 变动事件，当底层DOM结构发生变化时触发，如：DOMsubtreeModified

同时DOM3级事件也允许使用者自定义一些事件。

DOM事件流
上文中讲到了addEventListener的第三个参数为指定事件是否在捕获阶段执行，设置为true表示事件在捕获阶段执行，而设置为false表示事件在冒泡阶段执行。那么什么是事件冒泡和事件捕获呢？可以用下图来解释：

事件冒泡与事件捕获
1.事件冒泡
所谓事件冒泡就是事件像泡泡一样从最开始生成的地方一层一层往上冒，比如上图中a标签为事件目标，点击a标签后同时也会触发p、li上的点击事件，一层一层向上直至最外层的html或document。下面是代码示例：

<div id="box">
    <a id="child">事件冒泡</a>
</div>


<script>
 `var box = document.getElementById('box'),
 child = document.getElementById('child');

child.addEventListener('click', function() {
    alert('我是目标事件');
 }, false);

 box.addEventListener('click', function() {
    alert('事件冒泡至DIV');
 }, false);
</script>

上面的代码运行后我们点击a标签，首先会弹出'我是目标事件'提示，然后又会弹出'事件冒泡至DIV'的提示，这便说明了事件自内而外向上冒泡了。

那么我们如何阻止事件冒泡呢？这里就涉及事件的Event对象中的stopPropagation方法，如下：

child.addEventListener('click', function(e) {
    alert('我是目标事件');
    e.stopPropagation();
}, false);

加上stopPropagation方法后，我们再次点击a标签就不会触发div上的click事件了。

2.事件捕获
和事件冒泡相反，事件捕获是自上而下执行，我们只需要将addEventListener的第三个参数改为true就行。

<div id="box">
    <a id="child">事件冒泡</a>
</div>

<script>
` var box = document.getElementById('box'),
 child = document.getElementById('child');

 child.addEventListener('click', function() {
     alert('我是目标事件');
 }, true);

 box.addEventListener('click', function() {
    alert('事件冒泡至DIV');
 }, true);
</script>

此时我们点击a标签，首先弹出的是'事件冒泡至DIV'，其次弹出的是'我是目标事件'，正好与事件冒泡相反。

image

1.3浏览器对象模型（BOM）

Internet Explorer 3 和 Netscape Navigator 3 有一个共同的特色，那就是支持可以访问和操作浏览器窗口的浏览器对象模型（BOM，Browser Object Model）。开发人员使用 BOM 可以控制浏览器显示的页面以外的部分。而 BOM 真正与众不同的地方（也是经常会导致问题的地方），还是它作为 JavaScript 实现的一部分但却没有相关的标准。这个问题在 HTML5 中得到了解决，HTML5 致力于把很多 BOM 功能写入正式规范。HTML5 发布后，很多关于 BOM 的困惑烟消云散。
从根本上讲，BOM 只处理浏览器窗口和框架；但人们习惯上也把所有针对浏览器的 JavaScript 扩展算作 BOM 的一部分。下面就是一些这样的扩展：

• 弹出新浏览器窗口的功能；
• 移动、缩放和关闭浏览器窗口的功能；
• 提供浏览器详细信息的 navigator 对象；
• 提供浏览器所加载页面的详细信息的 location 对象；
• 提供用户显示器分辨率详细信息的 screen 对象；
• 对 cookies 的支持；
• 像 XMLHttpRequest 和 IE 的 ActiveXObject 这样的自定义对象。

由于没有 BOM 标准可以遵循，因此每个浏览器都有自己的实现。虽然也存在一些事实标准，例如要有 window 对象和 navigator 对象等，但每个浏览器都会为这两个对象乃至其他对象定义自己的属性和方法。现在有了 HTML5，BOM 实现的细节有望朝着兼容性越来越高的方向发展。

2.<script>标签

HTML 页面中插入 JavaScript 的主要方法，就是使用<script>元素。使用<script>元素的方式有两种：直接在页面中嵌入 JavaScript 代码和包含外部 JavaScript文件。这个元素由 Netscape 创造并在 Netscape Navigator 2 中首先实现。后来，这个元素被加入到正式的 HTML 规范中。

2.1<script>标签的属性

HTML 4.01 为
<script>定义了下列 6 个属性。

• async：可选。表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或
• 等待加载其他脚本。只对外部脚本文件有效。
• charset：可选。表示通过 src 属性指定的代码的字符集。由于大多数浏览器会忽略它的值，
• 因此这个属性很少有人用。
• defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有
• 效。IE7 及更早版本对嵌入脚本也支持这个属性。
• language：已废弃。原来用于表示编写代码使用的脚本语言（如 JavaScript、JavaScript1.2
• 或 VBScript）。大多数浏览器会忽略这个属性，因此也没有必要再用了。
• src：可选。表示包含要执行代码的外部文件。
• type：可选。可以看成是 language 的替代属性；表示编写代码使用的脚本语言的内容类型（也称为 MIME 类型）。虽然 text/javascript 和 text/ecmascript 都已经不被推荐使用，但人们一直以来使用的都还是 text/javascript。实际上，服务器在传送 JavaScript 文件时使用的MIME 类型通常是 application/x–javascript，但在 type 中设置这个值却可能导致脚本被忽略。另外，在非IE浏览器中还可以使用以下值:application/javascript和application/只ecmascript。考虑到约定俗成和最大限度的浏览器兼容性，目前 type 属性的值依旧还是text/javascript。不过，这个属性并不是必需的，如果没有指定这个属性，则其默认值仍为text/javascript。在使用<script>元素嵌入 JavaScript 代码时，只须为<script>指定 type 属性。包含在<script>元素内部的 JavaScript 代码将被从上至下依次解释。
  如果要通过<script>元素来包含外部 JavaScript 文件，那么 src 属性就是必需的。这个属性的值是一个指向外部 JavaScript 文件的链接.
  需要注意的是，带有 src 属性的<script>元素不应该在其<script>和</script>标签之间再包含额外的 JavaScript 代码。如果包含了嵌入的代码，则只会下载并执行外部脚本文件，嵌入的代码会被忽略。另外，通过<script>元素的 src 属性还可以包含来自外部域的JavaScript 文件。这一点既让<script>元素倍显强大，又让它备受争议。在这一点上，<script>与<img>元素非常相似，即它的 src属性可以是指向当前 HTML 页面所在域之外的某个域中的完整 URL.

2.2<noscript>

早期浏览器都面临一个特殊的问题，即当浏览器不支持 JavaScript 时如何让页面平稳地退化。对这个问题的最终解决方案就是创造一个<noscript>元素，用以在不支持 JavaScript 的浏览器中显示替代的内容。这个元素可以包含能够出现在文档<body>中的任何 HTML 元素,<script>元素除外。包含在<noscript>元素中的内容只有在下列情况下才会显示出来：

• 浏览器不支持脚本；
• 浏览器支持脚本，但脚本被禁用。

符合上述任何一个条件，浏览器都会显示<noscript>中的内容。而在除此之外的其他情况下，浏览器不会呈现<noscript>中的内容。

3.基本数据类型

ECMAScript 中有 6 种简单数据类型（也称为基本数据类型）：Undefined、Null、Boolean、Number，String，Symbol。ECMAScript不支持任何创建自定义类型的机制，而所有值，最终都可以用这7（加上object） 种数据类型来表示。

3.1 typeof 操作符

鉴于 ECMAScript 是松散类型的，因此需要有一种手段来检测给定变量的数据类型——typeof 就是负责提供这方面信息的操作符。对一个值使用 typeof 操作符可能返回下列某个字符串：

• "undefined"——如果这个值未定义；
• "boolean"——如果这个值是布尔值；
• "string"——如果这个值是字符串；
• "number"——如果这个值是数值；
• "object"——如果这个值是对象或 null；
• "function"——如果这个值是函数。
  下面是几个使用 typeof 操作符的例子：

var message = "some string";
alert(typeof message); // "string"
alert(typeof(message)); // "string"
alert(typeof 95); // "number"

这几个例子说明，typeof 操作符的操作数可以是变量（message），也可以是数值字面量。注意，typeof 是一个操作符而不是函数，因此例子中的圆括号尽管可以使用，但不是必需的。

3.2 Undefined

Undefined 类型只有一个值，即特殊的 undefined。在声明变量但未对其加以初始化时，这个变量的值就是 undefined。

3.3 Null

Null 类型是第二个只有一个值的数据类型，这个特殊的值是 null。从逻辑角度来看，null 值表示一个空对象指针，而这也正是使用 typeof 操作符检测 null 值时会返回"object"的原因。实际上，undefined 值是派生自 null 值的，因此 ECMA-262 规定对它们的相等性测试要返回 true：

alert(null == undefined); //true

这里，位于 null 和 undefined 之间的相等操作符（==）总是返回 true，不过要注意的是，这个操作符出于比较的目的会转换其操作数

3.4 Boolean

Boolean 类型是 ECMAScript 中使用得最多的一种类型，该类型只有两个字面值：true 和 false。这两个值与数字值不是一回事，因此 true 不一定等于 1，而 false 也不一定等于 0。需要注意的是，Boolean 类型的字面值 true 和 false 是区分大小写的。也就是说，True 和 False（以及其他的混合大小写形式）都不是 Boolean 值，只是标识符。虽然 Boolean 类型的字面值只有两个，但 ECMAScript 中所有类型的值都有与这两个 Boolean 值等价的值。要将一个值转换为其对应的 Boolean 值，可以调用转型函数 Boolean()，如下例所示：

var message = "Hello world!";
var messageAsBoolean = Boolean(message);

在这个例子中，字符串 message 被转换成了一个 Boolean 值，该值被保存在messageAsBoolean变量中。可以对任何数据类型的值调用 Boolean()函数，而且总会返回一个 Boolean 值。至于返回的这个值是 true 还是 false，取决于要转换值的数据类型及其实际值。

3.5 Number

3.5.1基础number

根据 ECMAScript 标准，JavaScript 数字类型基于 IEEE 754 标准的双精度 64 位二进制格式的值（-(253 -1) 到 253 -1）。它并没有为整数给出一种特定的类型。除了能够表示浮点数外，还有一些带符号的值：+Infinity，-Infinity 和 NaN (非数值，Not-a-Number)。

要检查值是否大于或小于 +/-Infinity，你可以使用常量 Number.MAX_VALUE 和 Number.MIN_VALUE。另外在 ECMAScript 6 中，你也可以通过 Number.isSafeInteger() 方法还有 Number.MAX_SAFE_INTEGER 和 Number.MIN_SAFE_INTEGER 来检查值是否在双精度浮点数的取值范围内。 超出这个范围，JavaScript 中的数字不再安全了，也就是只有 second mathematical interger 可以在 JavaScript 数字类型中正确表现。

数字类型中只有一个整数有两种表示方法： 0 可表示为 -0 和 +0（"0" 是 +0 的简写）。 在实践中，这也几乎没有影响。 例如 +0 === -0 为真。 但是，你可能要注意除以0的时候：

42 / +0; // Infinity
42 / -0; // -Infinity

3.5.2 BigInt类型

BigInt类型是 JavaScript 中的一个基础的数值类型，可以用任意精度表示整数。使用 BigInt，您可以安全地存储和操作大整数，甚至可以超过数字的安全整数限制。BigInt是通过在整数末尾附加 n 或调用构造函数来创建的。
末尾增加n：console.log(9007199254740995n)
构造函数：BigInt（9007199254740995）
通过使用常量Number.MAX_SAFE_INTEGER，您可以获得可以用数字递增的最安全的值。通过引入 BigInt，您可以操作超过Number.MAX_SAFE_INTEGER的数字。您可以在下面的示例中观察到这一点，其中递增Number.MAX_SAFE_INTEGER会返回预期的结果:

const x = 2n ** 53n;
9007199254740992n
const y = x + 1n;
9007199254740993n

可以对BigInt使用运算符+、、-、 * 和 %，就像对数字一样。

BigInt 严格来说并不等于一个数字，但它是松散的。在将BigInt转换为Boolean时，它的行为类似于一个数字：if、||、&&、Boolean 和!。

BigInt不能与数字互换操作。否则，将抛出TypeError。

console.log(10n===10)false
console.log(10n==10)true

除了一元+号之外，所有运算符都可以用于BigInt。
因为隐式转换可能会丢失信息，所以不允许在Number和BigInt之间进行混合操作。

3.5.3NaN

NaN，即非数值（Not a Number）是一个特殊的数值，这个数值用于表示一个本来要返回数值的操作数未返回数值的情况（这样就不会抛出错误了）。例如，在其他编程语言中，任何数值除以 0都会导致错误，从而停止代码执行。但在 ECMAScript中，任何数值除以 0会返回 NaN①，因此不会影响其他代码的执行。NaN 本身有两个非同寻常的特点。首先，任何涉及 NaN 的操作（例如 NaN/10）都会返回 NaN，这个特点在多步计算中有可能导致问题。其次，NaN 与任何值都不相等，包括 NaN 本身。例如，下面的代
码会返回 false：

alert(NaN == NaN); //false

针对 NaN 的这两个特点，ECMAScript 定义了 isNaN()函数。这个函数接受一个参数，该参数可以是任何类型，而函数会帮我们确定这个参数是否“不是数值”。isNaN()在接收到一个值之后，会尝试将这个值转换为数值。某些不是数值的值会直接转换为数值，例如字符串"10"或 Boolean 值。而任何不能被转换为数值的值都会导致这个函数返回 true。请看下面的例子：

alert(isNaN(NaN)); //true
alert(isNaN(10)); //false（10 是一个数值）
alert(isNaN("10")); //false（可以被转换成数值 10）
alert(isNaN("blue")); //true（不能转换成数值）
alert(isNaN(true)); //false（可以被转换成数值 1）

3.6 String

String 类型用于表示由零或多个 16 位 Unicode 字符组成的字符序列，即字符串。字符串可以由双引号（"）或单引号（'）表示。ECMAScript 中的字符串是不可变的，也就是说，字符串一旦创建，它们的值就不能改变。要改变某个变量保存的字符串，首先要销毁原来的字符串，然后再用另一个包含新值的字符串填充该变量

var lang = "Java";
lang = lang + "Script";

以上示例中的变量 lang 开始时包含字符串"Java"。而第二行代码把 lang 的值重新定义为"Java"与"Script"的组合，即"JavaScript"。实现这个操作的过程如下：首先创建一个能容纳 10 个字符的新字符串，然后在这个字符串中填充"Java"和"Script"，最后一步是销毁原来的字符串"Java"和字符串"Script"，因为这两个字符串已经没用了。

3.7 Symbol

Symbol 值通过Symbol函数生成。这就是说，对象的属性名现在可以有两种类型，一种是原来就有的字符串，另一种就是新增的 Symbol 类型。凡是属性名属于 Symbol 类型，就都是独一无二的，可以保证不会与其他属性名产生冲突。

let s = Symbol();

typeof s
// "symbol"

上面代码中，变量s就是一个独一无二的值。typeof运算符的结果，表明变量s是 Symbol 数据类型，而不是字符串之类的其他类型。

注意，Symbol函数前不能使用new命令，否则会报错。这是因为生成的 Symbol 是一个原始类型的值，不是对象。也就是说，由于 Symbol 值不是对象，所以不能添加属性。基本上，它是一种类似于字符串的数据类型。

Symbol函数可以接受一个字符串作为参数，表示对 Symbol 实例的描述，主要是为了在控制台显示，或者转为字符串时，比较容易区分。

let s1 = Symbol('foo');
let s2 = Symbol('bar');

s1 // Symbol(foo)
s2 // Symbol(bar)

s1.toString() // "Symbol(foo)"
s2.toString() // "Symbol(bar)"

上面代码中，s1和s2是两个 Symbol 值。如果不加参数，它们在控制台的输出都是Symbol()，不利于区分。有了参数以后，就等于为它们加上了描述，输出的时候就能够分清，到底是哪一个值。

如果 Symbol 的参数是一个对象，就会调用该对象的toString方法，将其转为字符串，然后才生成一个 Symbol 值。

const obj = {
  toString() {
    return 'abc';
  }
};
const sym = Symbol(obj);
sym // Symbol(abc)

注意，Symbol函数的参数只是表示对当前 Symbol 值的描述，因此相同参数的Symbol函数的返回值是不相等的。

// 没有参数的情况
let s1 = Symbol();
let s2 = Symbol();

s1 === s2 // false

// 有参数的情况
let s1 = Symbol('foo');
let s2 = Symbol('foo');

s1 === s2 // false

上面代码中，s1和s2都是Symbol函数的返回值，而且参数相同，但是它们是不相等的。

Symbol 值不能与其他类型的值进行运算，会报错。

let sym = Symbol('My symbol');

"your symbol is " + sym
// TypeError: can't convert symbol to string
`your symbol is ${sym}`
// TypeError: can't convert symbol to string

但是，Symbol 值可以显式转为字符串。

let sym = Symbol('My symbol');

String(sym) // 'Symbol(My symbol)'
sym.toString() // 'Symbol(My symbol)'

另外，Symbol 值也可以转为布尔值，但是不能转为数值。

let sym = Symbol();
Boolean(sym) // true
!sym  // false

if (sym) {
  // ...
}

Number(sym) // TypeError
sym + 2 // TypeError

4.变量与作用域

ECMAScript 变量可能包含两种不同数据类型的值：基本类型值和引用类型值。基本类型值指的是简单的数据段，而引用类型值指那些可能由多个值构成的对象。在将一个值赋给变量时，解析器必须确定这个值是基本类型值还是引用类型值。了 5 种基本数据类型：Undefined、Null、Boolean、Number 和 String。这 5 种基本数据类型是按值访问的，因为可以操作保存在变量中的实际的值。引用类型的值是保存在内存中的对象。与其他语言不同，JavaScript 不允许直接访问内存中的位置，也就是说不能直接操作对象的内存空间。在操作对象时，实际上是在操作对象的引用而不是实际的对象。为此，引用类型的值是按引用访问的。
我们不能给基本类型的值添加属性，尽管这样做不会导致任何错误。比如：

var name = "Nicholas";
name.age = 27;
alert(name.age); //undefined

在这个例子中，我们为字符串 name 定义了一个名为 age 的属性，并为该属性赋值 27。但在下一行访问这个属性时，发现该属性不见了。这说明只能给引用类型值动态地添加属性，以便将来使用。在从一个变量向另一个变量复制基本类型值和引用类型值时，也存在不同。如果从一个变量向另一个变量复制基本类型的值，会在变量对象上创建一个新值，然后把该值复制到为新变量分配的位置上。来看一个例子：

var num1 = 5;
var num2 = num1;

在此，num1 中保存的值是 5。当使用 num1 的值来初始化 num2 时，num2 中也保存了值 5。但 num2中的 5 与 num1 中的 5 是完全独立的，该值只是 num1 中 5 的一个副本。此后，这两个变量可以参与任何操作而不会相互影响。
当从一个变量向另一个变量复制引用类型的值时，同样也会将存储在变量对象中的值复制一份放到为新变量分配的空间中。不同的是，这个值的副本实际上是一个指针，而这个指针指向存储在堆中的一个对象。复制操作结束后，两个变量实际上将引用同一个对象。因此，改变其中一个变量，就会影响另一个变量，如下面的例子所示：

var obj1 = new Object();
var obj2 = obj1;
obj1.name = "Nicholas";
alert(obj2.name); //"Nicholas"

首先，变量 obj1 保存了一个对象的新实例。然后，这个值被复制到了 obj2 中；换句话说，obj1和 obj2 都指向同一个对象。这样，当为 obj1 添加 name 属性后，可以通过 obj2 来访问这个属性，因为这两个变量引用的都是同一个对象。
ECMAScript 中所有函数的参数都是按值传递的。也就是说，把函数外部的值复制给函数内部的参
数，就和把值从一个变量复制到另一个变量一样。基本类型值的传递如同基本类型变量的复制一样，而引用类型值的传递，则如同引用类型变量的复制一样。有不少开发人员在这一点上可能会感到困惑，因为访问变量有按值和按引用两种方式，而参数只能按值传递。在向参数传递基本类型的值时，被传递的值会被复制给一个局部变量（即命名参数，或者用ECMAScript 的概念来说，就是 arguments 对象中的一个元素）。在向参数传递引用类型的值时，会把这个值在内存中的地址复制给一个局部变量，因此这个局部变量的变化会反映在函数的外部。(按值传递)
检测基本类型用typeof，引用类型用instanceof

result = variable instanceof constructor

如果变量是给定引用类型（根据它的原型链来识别；）的实例，那么instanceof 操作符就会返回 true。请看下面的例子：

alert(person instanceof Object); // 变量 person 是 Object 吗？
alert(colors instanceof Array); // 变量 colors 是 Array 吗？
alert(pattern instanceof RegExp); // 变量 pattern 是 RegExp 吗？

根据规定，所有引用类型的值都是 Object 的实例。因此，在检测一个引用类型值和 Object 构造函数时，instanceof 操作符始终会返回 true。当然，如果使用 instanceof 操作符检测基本类型的值，则该操作符始终会返回 false，因为基本类型不是对象。

执行环境的类型总共只有两种——全局和局部（函数），但还是有其他办法来延长作用域链。这么说是因为有些语句可以在作用域链的前端临时增加一个变量对象，该变量对象会在代码执行后被移除。在两种情况下会发生这种现象。具体来说，就是当执行流进入下列任何一个语句时，作用域链就会得到加长：

• try-catch 语句的 catch 块；
• with 语句。
  这两个语句都会在作用域链的前端添加一个变量对象。对 with 语句来说，会将指定的对象添加到作用域链中。对 catch 语句来说，会创建一个新的变量对象，其中包含的是被抛出的错误对象的声明。

5.引用数据类型

5.1 Object

ECMAScript 中的对象其实就是一组数据和功能的集合。对象可以通过执行 new 操作符后跟要创建的对象类型的名称来创建。而创建 Object 类型的实例并为其添加属性和（或）方法，就可以创建自定义对象，如下所示：

var o = new Object();

这个语法与 Java 中创建对象的语法相似；但在 ECMAScript 中，如果不给构造函数传递参数，则可以省略后面的那一对圆括号。也就是说，在像前面这个示例一样不传递参数的情况下，完全可以省略那对圆括号（但这不是推荐的做法）：

var o = new Object; // 有效，但不推荐省略圆括号

仅仅创建 Object 的实例并没有什么用处，但关键是要理解一个重要的思想：即在 ECMAScript 中，(就像 Java 中的 java.lang.Object 对象一样)Object 类型是所有它的实例的基础。换句话说，Object 类型所具有的任何属性和方法也同样存在于更具体的对象中。
Object 的每个实例都具有下列属性和方法。

• constructor：保存着用于创建当前对象的函数。对于前面的例子而言，构造函数（constructor）就是Object()。
• hasOwnProperty(propertyName)：用于检查给定的属性在当前对象实例中（而不是在实例的原型中）是否存在。其中，作为参数的属性名（propertyName）必须以字符串形式指定（例如：o.hasOwnProperty("name")）。
• isPrototypeOf(object)：用于检查传入的对象是否是传入对象的原型
• propertyIsEnumerable(propertyName)：用于检查给定的属性是否能够使用 for-in 语句来枚举。与 hasOwnProperty()方法一样，作为参数的属性名必须以字符串形式指定。
• toLocaleString()：返回对象的字符串表示，该字符串与执行环境的地区对应。
• toString()：返回对象的字符串表示。
• valueOf()：返回对象的字符串、数值或布尔值表示。通常与 toString()方法的返回值相同。

由于在 ECMAScript 中 Object 是所有对象的基础，因此所有对象都具有这些基本的属性和方法。

5.2 Array

5.2.1 array属性

• Array.length
• Array.prototype

5.2.2 array的方法

• Array.from()
• Array.isArray()
• Array.of()
• Array.prototype.concat()
• Array.prototype.copyWithin()
• Array.prototype.entries()
• Array.prototype.every()
• Array.prototype.fill()
• Array.prototype.filter()
• Array.prototype.find()
• Array.prototype.findIndex()
• Array.prototype.flat()
• Array.prototype.flatMap()
• Array.prototype.forEach()
• Array.prototype.includes()
• Array.prototype.indexOf()
• Array.prototype.join()
• Array.prototype.keys()
• Array.prototype.lastIndexOf()
• Array.prototype.map()
• Array.prototype.pop()
• Array.prototype.push()
• Array.prototype.reduce()
• Array.prototype.reduceRight()
• Array.prototype.reverse()
• Array.prototype.shift()
• Array.prototype.slice()
• Array.prototype.some()
• Array.prototype.sort()
• Array.prototype.splice()
• Array.prototype.toLocaleString()
• Array.prototype.toString()
• Array.prototype.unshift()
• Array.prototype.values()

5.3 Date

ECMAScript 中的 Date 类型是在早期 Java 中的 java.util.Date 类基础上构建的。为此，Date类型使用自 UTC（Coordinated Universal Time，国际协调时间）1970 年 1 月 1 日午夜（零时）开始经过的毫秒数来保存日期。在使用这种数据存储格式的条件下，Date 类型保存的日期能够精确到 1970 年 1月 1 日之前或之后的 285 616 年。要创建一个日期对象，使用 new 操作符和 Date 构造函数即可，如下所示。

var now = new Date(); 

在调用 Date 构造函数而不传递参数的情况下，新创建的对象自动获得当前日期和时间。如果想根据特定的日期和时间创建日期对象，必须传入表示该日期的毫秒数（即从 UTC 时间 1970 年 1 月 1 日午夜起至该日期止经过的毫秒数）。为了简化这一计算过程，ECMAScript 提供了两个方法：Date.parse()和 Date.UTC()。

例如，要为 2004 年 5 月 25 日创建一个日期对象，可以使用下面的代码：

var someDate = new Date(Date.parse("May 25, 2004")); 

如果传入 Date.parse()方法的字符串不能表示日期，那么它会返回 NaN。实际上，如果直接将表示日期的字符串传递给 Date 构造函数，也会在后台调用 Date.parse()。换句话说，下面的代码与前面的例子是等价的：

var someDate = new Date("May 25, 2004"); 

Date.UTC()方法同样也返回表示日期的毫秒数，但它与 Date.parse()在构建值时使用不同的信息。Date.UTC()的参数分别是年份、基于 0 的月份（一月是 0，二月是 1，以此类推）、月中的哪一天（1 到 31）、小时数（0 到 23）、分钟、秒以及毫秒数。在这些参数中，只有前两个参数（年和月）是必需的。如果没有提供月中的天数，则假设天数为 1；如果省略其他参数，则统统假设为 0。以下是两个使用 Date.UTC()方法的例子：

// GMT 时间 2000 年 1 月 1 日午夜零时
var y2k = new Date(Date.UTC(2000, 0));
// GMT 时间 2005 年 5 月 5 日下午 5:55:55
var allFives = new Date(Date.UTC(2005, 4, 5, 17, 55, 55)); 

ECMAScript 5 添加了 Data.now()方法，返回表示调用这个方法时的日期和时间的毫秒数。这个方法简化了使用 Data 对象分析代码的工作。

//取得开始时间
var start = Date.now();
//调用函数
doSomething();
//取得停止时间
var stop = Date.now(),
 result = stop – start;

支持 Data.now()方法的浏览器包括 IE9+、Firefox 3+、Safari 3+、Opera 10.5 和 Chrome。在不支
持它的浏览器中，使用+操作符把 Data 对象转换成字符串，也可以达到同样的目的。

//取得开始时间
var start = +new Date();
//调用函数
doSomething();
//取得停止时间
var stop = +new Date(),
 result = stop - start; 

Date 类型还有一些专门用于将日期格式化为字符串的方法，这些方法如下。

• toDateString()——以特定于实现的格式显示星期几、月、日和年；
• toTimeString()——以特定于实现的格式显示时、分、秒和时区；
• toLocaleDateString()——以特定于地区的格式显示星期几、月、日和年；
• toLocaleTimeString()——以特定于实现的格式显示时、分、秒；
• toUTCString()——以特定于实现的格式完整的 UTC 日期。
• 与 toLocaleString()和 toString()方法一样，以上这些字符串格式方法的输出也是因浏览器
• 而异的，因此没有哪一个方法能够用来在用户界面中显示一致的日期信息。

5.4 RegExp

5.4.1创建正则

var re = /ab+c/;
var re = new RegExp("ab+c");

5.4.2正则表达式可以使用的方法（一共7种，其中只有exec和test用于RegExp的方法，其他5种应用于string）

• exec
  一个在字符串中执行查找匹配的RegExp方法，它返回一个数组（未匹配到则返回 null）。
• test
  一个在字符串中测试是否匹配的RegExp方法，它返回 true 或 false。
• match
  一个在字符串中执行查找匹配的String方法，它返回一个数组，在未匹配到时会返回 null。
• matchAll
  一个在字符串中执行查找所有匹配的String方法，它返回一个迭代器（iterator）。
• search
  一个在字符串中测试匹配的String方法，它返回匹配到的位置索引，或者在失败时返回-1。
• replace
  一个在字符串中执行查找匹配的String方法，并且使用替换字符串替换掉匹配到的子字符串。
• split
  一个使用正则表达式或者一个固定字符串分隔一个字符串，并将分隔后的子字符串存储到数组中的 String 方法。
  当你想要知道在一个字符串中的一个匹配是否被找到，你可以使用 test 或 search 方法；
  想得到更多的信息（但是比较慢）则可以使用 exec 或 match 方法。
  如果你使用exec 或 match 方法并且匹配成功了，那么这些方法将返回一个数组并且更新相关的正则表达式对象的属性和预定义的正则表达式对象。如果匹配失败，那么 exec 方法返回 null（也就是false）。

5.4.3正则表达式标志：

• g 全局搜索。
• i 不区分大小写搜索。
• m 多行搜索。
• s 允许 . 匹配换行符。
• u 使用unicode码的模式进行匹配。
• y 执行“粘性(sticky)”搜索,匹配从目标字符串的当前位置开始。

5.4.4常用的正则表导式特殊字符：

• *匹配前一个表达式0或多次，等价于{0,}
• +匹配前一个表达式1或多次，等价于{1,}
• ?匹配前一个表达式0或1次
• .匹配换行符之外的任何单个字符
• \d匹配一个数字，等价于[0-9]
• \w匹配一个单个字符（字母数字或下划线），等价于[A-Za-z0-9_]

5.4.5正则表达式的其他用途

正则表达式判断质数
!/^.?$|^(..+?)\1+$/.test(Array(你的数字+1).join('1'))
结果为true，表示是素数
结果为false，表示不是素数（为1或者合数）

5.5 Function

• 不能把函数命名为 eval 或 arguments；
• 不能把参数命名为 eval 或 arguments；
• 不能出现两个命名参数同名的情况。

如果发生以上情况，就会导致语法错误，代码无法执行。

ECMAScript 函数的参数与大多数其他语言中函数的参数有所不同。ECMAScript 函数不介意传递进来多少个参数，也不在乎传进来参数是什么数据类型。也就是说，即便你定义的函数只接收两个参数，在调用这个函数时也未必一定要传递两个参数。可以传递一个、三个甚至不传递参数，而解析器永远不会有什么怨言。之所以会这样，原因是 ECMAScript 中的参数在内部是用一个数组来表示的。函数接收到的始终都是这个数组，而不关心数组中包含哪些参数（如果有参数的话）。如果这个数组中不包含任何元素，无所谓；如果包含多个元素，也没有问题。实际上，在函数体内可以通过 arguments 对象来访问这个参数数组，从而获取传递给函数的每一个参数。
其实，arguments 对象只是与数组类似（它并不是 Array 的实例），因为可以使用方括号语法访问它的每一个元素（即第一个元素是 arguments[0]，第二个元素是 argumetns[1]，以此类推），使用 length 属性来确定传递进来多少个参数。没有传递值的命名参数将自动被赋予 undefined 值。这就跟定义了变量但又没有初始化一样。

其次，重写arguments 的值会导致语法错误（代码将不会执行）。