javascript高级程序设计(红宝书)记录

系统管理员 2022-10-26 12:47 181阅读 0赞

故心故心故心故心小故冲啊

--------------------

### 文章目录 ###

*  第3章.语法基础
 *  第4章.变量作用域与内存
 *  第5章.基本引用类型
 *  第6章.集合引用类型
 *  第8章.对象、类与面向对象编程
 *  第10章.函数
 *  第11章.期约与异步函数
 *  第12章.BOM
 *  第17章事件
 *  第24章.网络请求与远程资源
 *  第25章.客户端存储

--------------------

# 第3章.语法基础 #

> undefined 值是由 null 值派生而来的，因此 ECMA-262 将它们定义为表面上相等，如下面的例子所示：  
> console.log(null == undefined); // true  
> console.log(undefined === null); //false  
> 用等于操作符（==）比较 null 和 undefined 始终返回 true。

> 有3 个函数可以将非数值转换为数值：Number()、parseInt()和 parseFloat()。  
> 如果第一个字符不是数值字符、加号或减号，parseInt()立即  
> 返回 NaN。这意味着空字符串也会返回 NaN（这一点跟 Number()不一样，它返回 0）。如果第一个字符  
> 是数值字符、加号或减号，则继续依次检测每个字符，直到字符串末尾，或碰到非数值字符。

> 转换为字符串  
> 有两种方式把一个值转换为字符串。首先是使用几乎所有值都有的 toString()方法。  
> toString()方法可见于数值、布尔值、对象和字符串值。（没错，字符串值也有 toString()方法，  
> 该方法只是简单地返回自身的一个副本。）null 和 undefined 值没有 toString()方法  
> 用加号操作符给一个值加上一个空字符串""也可以将其转换为字符串

> Symbol（符号）是 ECMAScript 6 新增的数据类型。符号是原始值，且符号实例是唯一、不可变的。  
> 符号的用途是确保对象属性使用唯一标识符，不会发生属性冲突的危险

> 每个 Object 实例都有如下属性和方法。  
> constructor：用于创建当前对象的函数。在前面的例子中，这个属性的值就是 Object()  
> 函数。  
> hasOwnProperty(propertyName)：用于判断当前对象实例（不是原型）上是否存在给定的属  
> 性。要检查的属性名必须是字符串（如 o.hasOwnProperty(“name”)）或符号。  
> isPrototypeOf(object)：用于判断当前对象是否为另一个对象的原型。（第 8 章将详细介绍  
> 原型。）  
> propertyIsEnumerable(propertyName)：用于判断给定的属性是否可以使用（本章稍后讨  
> 论的）for-in 语句枚举。与 hasOwnProperty()一样，属性名必须是字符串。  
> toLocaleString()：返回对象的字符串表示，该字符串反映对象所在的本地化执行环境。  
> toString()：返回对象的字符串表示。  
> valueOf()：返回对象对应的字符串、数值或布尔值表示。通常与 toString()的返回值相同

> ECMAScript 7 新增了指数操作符，Math.pow()现在有了自己的操作符\*\*，结果是一样的：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70]

> break 和 continue 语句为执行循环代码提供了更严格的控制手段。其中，break 语句用于立即退  
> 出循环，强制执行循环后的下一条语句。而 continue 语句也用于立即退出循环，但会再次从循环顶部  
> 开始执行。

# 第4章.变量作用域与内存 #

> 垃圾回收  
> JavaScript 最常用的垃圾回收策略是标记清理（mark-and-sweep）。当变量进入上下文，比如在函数  
> 内部声明一个变量时，这个变量会被加上存在于上下文中的标记。而在上下文中的变量，逻辑上讲，永  
> 远不应该释放它们的内存，因为只要上下文中的代码在运行，就有可能用到它们。当变量离开上下文时，  
> 也会被加上离开上下文的标记。  
> 另一种没那么常用的垃圾回收策略是引用计数（reference counting）。  
> 引用计数最早由 Netscape Navigator 3.0 采用，但很快就遇到了严重的问题：循环引用。所谓循环引  
> 用，就是对象 A 有一个指针指向对象 B，而对象 B 也引用了对象 A。

> JavaScript 变量可以保存两种类型的值：原始值和引用值。原始值可能是以下 6 种原始数据类型之  
> 一：Undefined、Null、Boolean、Number、String 和 Symbol。原始值和引用值有以下特点。  
>  原始值大小固定，因此保存在栈内存上。  
>  从一个变量到另一个变量复制原始值会创建该值的第二个副本。  
>  引用值是对象，存储在堆内存上。  
>  包含引用值的变量实际上只包含指向相应对象的一个指针，而不是对象本身。  
>  从一个变量到另一个变量复制引用值只会复制指针，因此结果是两个变量都指向同一个对象。  
>  typeof 操作符可以确定值的原始类型，而 instanceof 操作符用于确保值的引用类型。  
> 任何变量（不管包含的是原始值还是引用值）都存在于某个执行上下文中（也称为作用域）。这个  
> 上下文（作用域）决定了变量的生命周期，以及它们可以访问代码的哪些部分。执行上下文可以总结  
> 如下。  
>  执行上下文分全局上下文、函数上下文和块级上下文。  
>  代码执行流每进入一个新上下文，都会创建一个作用域链，用于搜索变量和函数。  
>  函数或块的局部上下文不仅可以访问自己作用域内的变量，而且也可以访问任何包含上下文乃  
> 至全局上下文中的变量。  
>  全局上下文只能访问全局上下文中的变量和函数，不能直接访问局部上下文中的任何数据。  
>  变量的执行上下文用于确定什么时候释放内存。  
> JavaScript 是使用垃圾回收的编程语言，开发者不需要操心内存分配和回收。JavaScript 的垃圾回收  
> 程序可以总结如下。  
>  离开作用域的值会被自动标记为可回收，然后在垃圾回收期间被删除。  
>  主流的垃圾回收算法是标记清理，即先给当前不使用的值加上标记，再回来回收它们的内存。  
>  引用计数是另一种垃圾回收策略，需要记录值被引用了多少次。JavaScript 引擎不再使用这种算  
> 法，但某些旧版本的 IE 仍然会受这种算法的影响，原因是 JavaScript 会访问非原生 JavaScript 对  
> 象（如 DOM 元素）。  
>  引用计数在代码中存在循环引用时会出现问题。  
>  解除变量的引用不仅可以消除循环引用，而且对垃圾回收也有帮助。为促进内存回收，全局对  
> 象、全局对象的属性和循环引用都应该在不需要时解除引用。

# 第5章.基本引用类型 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 1]

> 这里的 toFixed()方法接收了参数 2，表示返回的数值字符串要包含两位小数。结果返回值为  
> “10.00”，小数位填充了 0。如果数值本身的小数位超过了参数指定的位数，则四舍五入到最接近的小数位：  
> let num = 10.005;  
> console.log(num.toFixed(2)); // “10.01”  
> toFixed()自动舍入的特点可以用于处理货币。不过要注意的是，多个浮点数值的数学计算不一定  
> 得到精确的结果。比如，0.1 + 0.2 = 0.30000000000000004。

> ECMAScript 提供了 3 个从字符串中提取子字符串的方法：slice()、substr()和 substring()。  
> 如果只有一个参数 =>即表示截取索引从3开始到最后  
> slice(3)、substr(3)和 substring(3)。  
> 如果二个参数 => slice(3,7),substring(3,7)即表示截取索引从3开始到索引为7的(不算7) ,substr(3,7)表示截取索引从3开始后的7个字符  
> 如果第二个参数为负数  
> slice(3,-2) 即表示截取索引从3开始 然后-2表示从后面负数开始的第2个  
> substring(3,-2) 和substr(3,-2) 即表示截取索引从3开始 ,第二个参数的负数都将会变成0 即substring(3,0) 和substr(3,0)

> eval()方法  
> 这个方法就是一个完整的 ECMAScript 解释器，它接收一个参数，即一个要执行的 ECMAScript（JavaScript）字符串  
> 通过 eval()定义的任何变量和函数都不会被提升，这是因为在解析代码的时候，它们是被包含在一个字符串中的。它们只是在 eval()执行的时候才会被创建。  
> 在严格模式下，在 eval()内部创建的变量和函数无法被外部访问。换句话说，最后两个例子会报错。同样，在严格模式下，赋值给 eval 也会导致错误：

![在这里插入图片描述][20210202152454965.png]

> 舍入方法  
> 接下来是用于把小数值舍入为整数的 4 个方法：Math.ceil()、Math.floor()、Math.round()  
> 和 Math.fround()。这几个方法处理舍入的方式如下所述。  
>  Math.ceil()方法始终向上舍入为最接近的整数。  
>  Math.floor()方法始终向下舍入为最接近的整数。  
>  Math.round()方法执行四舍五入。  
> console.log(Math.ceil(25.9)); // 26  
> console.log(Math.ceil(25.5)); // 26  
> console.log(Math.ceil(25.1)); // 26  
> console.log(Math.round(25.9)); // 26  
> console.log(Math.round(25.5)); // 26  
> console.log(Math.round(25.1)); // 25  
> console.log(Math.fround(0.4)); // 0.4000000059604645  
> console.log(Math.fround(0.5)); // 0.5  
> console.log(Math.fround(25.9)); // 25.899999618530273  
> console.log(Math.floor(25.9)); // 25  
> console.log(Math.floor(25.5)); // 25  
> console.log(Math.floor(25.1)); // 25

> random()方法  
> Math.random()方法返回一个 0~1 范围内的随机数，其中包含 0 但不包含 1。对于希望显示随机名言或随机新闻的网页，这个方法是非常方便的。

> 小结  
> JavaScript 中的对象称为引用值，几种内置的引用类型可用于创建特定类型的对象。  
>  引用值与传统面向对象编程语言中的类相似，但实现不同。  
>  Date 类型提供关于日期和时间的信息，包括当前日期、时间及相关计算。  
>  RegExp 类型是 ECMAScript 支持正则表达式的接口，提供了大多数基础的和部分高级的正则表  
> 达式功能。  
> JavaScript 比较独特的一点是，函数实际上是 Function 类型的实例，也就是说函数也是对象。因  
> 为函数也是对象，所以函数也有方法，可以用于增强其能力。  
> 由于原始值包装类型的存在，JavaScript 中的原始值可以被当成对象来使用。有 3 种原始值包装类  
> 型：Boolean、Number 和 String。它们都具备如下特点。  
>  每种包装类型都映射到同名的原始类型。  
>  以读模式访问原始值时，后台会实例化一个原始值包装类型的对象，借助这个对象可以操作相  
> 应的数据。  
>  涉及原始值的语句执行完毕后，包装对象就会被销毁。  
> 当代码开始执行时，全局上下文中会存在两个内置对象：Global 和 Math。其中，Global 对象在  
> 大多数 ECMAScript 实现中无法直接访问。不过，浏览器将其实现为 window 对象。所有全局变量和函  
> 数都是 Global 对象的属性。Math 对象包含辅助完成复杂计算的属性和方法。

# 第6章.集合引用类型 #

> Array 构造函数还有两个 ES6 新增的用于创建数组的静态方法：from()和 of()。from()用于将  
> 类数组结构转换为数组实例，而 of()用于将一组参数转换为数组实例。

> 一个经典的 ECMAScript 问题是判断一个对象是不是数组。在只有一个网页（因而只有一个全局作  
> 用域）的情况下，使用 instanceof 操作符就足矣：  
> if (value instanceof Array)\{  
> // 操作数组  
> \}

> ECMAScript 提供了 Array.isArray()方法。这个方法的目的就是确定一个值是  
> 否为数组，而不用管它是在哪个全局执行上下文中创建的。来看下面的例子：  
> if (Array.isArray(value))\{  
> // 操作数组  
> \}

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 2]

> 小结  
> JavaScript 中的对象是引用值，可以通过几种内置引用类型创建特定类型的对象。  
>  引用类型与传统面向对象编程语言中的类相似，但实现不同。  
>  Object 类型是一个基础类型，所有引用类型都从它继承了基本的行为。  
>  Array 类型表示一组有序的值，并提供了操作和转换值的能力。  
>  定型数组包含一套不同的引用类型，用于管理数值在内存中的类型。  
>  Date 类型提供了关于日期和时间的信息，包括当前日期和时间以及计算。  
>  RegExp 类型是 ECMAScript 支持的正则表达式的接口，提供了大多数基本正则表达式以及一些  
> 高级正则表达式的能力。  
> JavaScript 比较独特的一点是，函数其实是 Function 类型的实例，这意味着函数也是对象。由于  
> 函数是对象，因此也就具有能够增强自身行为的方法。  
> 因为原始值包装类型的存在，所以 JavaScript 中的原始值可以拥有类似对象的行为。有 3 种原始值  
> 包装类型：Boolean、Number 和 String。它们都具有如下特点。  
>  每种包装类型都映射到同名的原始类型。  
>  在以读模式访问原始值时，后台会实例化一个原始值包装对象，通过这个对象可以操作数据。  
>  涉及原始值的语句只要一执行完毕，包装对象就会立即销毁。  
> JavaScript 还有两个在一开始执行代码时就存在的内置对象：Global 和 Math。其中，Global 对  
> 象在大多数 ECMAScript 实现中无法直接访问。不过浏览器将 Global 实现为 window 对象。所有全局  
> 变量和函数都是 Global 对象的属性。Math 对象包含辅助完成复杂数学计算的属性和方法。  
> ECMAScript 6 新增了一批引用类型：Map、WeakMap、Set 和 WeakSet。这些类型为组织应用程序  
> 数据和简化内存管理提供了新能力。

# 第8章.对象、类与面向对象编程 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 4]

> 创建对象  
> 工厂模式  
> function createPerson(name, age, job) \{  
> let o = new Object();  
> o.name = name;  
> o.age = age;  
> o.job = job;  
> o.sayName = function() \{  
> console.log(this.name);  
> \};  
> return o;  
> \}  
> let person1 = createPerson(“Nicholas”, 29, “Software Engineer”);  
> let person2 = createPerson(“Greg”, 27, “Doctor”);  
> 这里，函数 createPerson()接收 3 个参数，根据这几个参数构建了一个包含 Person 信息的对象。  
> 可以用不同的参数多次调用这个函数，每次都会返回包含 3 个属性和 1 个方法的对象。这种工厂模式虽  
> 然可以解决创建多个类似对象的问题，但没有解决对象标识问题（即新创建的对象是什么类型）。

> 构造函数模式  
> function Person(name, age, job)\{  
> this.name = name;  
> this.age = age;  
> this.job = job;  
> this.sayName = function() \{  
> console.log(this.name);  
> \};  
> \}  
> let person1 = new Person(“Nicholas”, 29, “Software Engineer”);  
> let person2 = new Person(“Greg”, 27, “Doctor”);  
> person1.sayName(); // Nicholas  
> person2.sayName(); // Greg  
> 在这个例子中，Person()构造函数代替了 createPerson()工厂函数。实际上，Person()内部  
> 的代码跟 createPerson()基本是一样的，只是有如下区别。  
> 1.没有显式地创建对象。  
> 2.属性和方法直接赋值给了 this。  
> 3.没有 return。  
> 另外，要注意函数名 Person 的首字母大写了。按照惯例，构造函数名称的首字母都是要大写的，  
> 非构造函数则以小写字母开头。

> 构造函数的问题  
> 构造函数虽然有用，但也不是没有问题。构造函数的主要问题在于，其定义的方法会在每个实例上  
> 都创建一遍。因此对前面的例子而言，person1 和 person2 都有名为 sayName()的方法，但这两个方  
> 法不是同一个 Function 实例。我们知道，ECMAScript 中的函数是对象，因此每次定义函数时，都会  
> 初始化一个对象。逻辑上讲，这个构造函数实际上是这样的：  
> function Person(name, age, job)\{  
> this.name = name;  
> this.age = age;  
> this.job = job;  
> this.sayName = new Function(“console.log(this.name)”); // 逻辑等价  
> \}  
> 这样理解这个构造函数可以更清楚地知道，每个 Person 实例都会有自己的 Function 实例用于显  
> 示 name 属性。当然了，以这种方式创建函数会带来不同的作用域链和标识符解析。但创建新 Function  
> 实例的机制是一样的。因此不同实例上的函数虽然同名却不相等，如下所示：  
> console.log(person1.sayName == person2.sayName); // false  
> 因为都是做一样的事，所以没必要定义两个不同的 Function 实例。况且，this 对象可以把函数  
> 与对象的绑定推迟到运行时。  
> 要解决这个问题，可以把函数定义转移到构造函数外部：  
> function Person(name, age, job)\{  
> this.name = name;  
> this.age = age;  
> this.job = job;  
> this.sayName = sayName;  
> \}  
> function sayName() \{  
> console.log(this.name);  
> \}  
> let person1 = new Person(“Nicholas”, 29, “Software Engineer”);  
> let person2 = new Person(“Greg”, 27, “Doctor”);  
> person1.sayName(); // Nicholas  
> person2.sayName(); // Greg  
> 在这里，sayName()被定义在了构造函数外部。在构造函数内部，sayName 属性等于全局 sayName()  
> 函数。因为这一次 sayName 属性中包含的只是一个指向外部函数的指针，所以 person1 和 person2  
> 共享了定义在全局作用域上的 sayName()函数。这样虽然解决了相同逻辑的函数重复定义的问题，但  
> 全局作用域也因此被搞乱了，因为那个函数实际上只能在一个对象上调用。如果这个对象需要多个方法，  
> 那么就要在全局作用域中定义多个函数。这会导致自定义类型引用的代码不能很好地聚集一起。这个新  
> 问题可以通过原型模式来解决。

> 在 JavaScript 有史以来的大部分时间内，迭代对象属性都是一个难题。ECMAScript 2017 新增了两  
> 个静态方法，用于将对象内容转换为序列化的——更重要的是可迭代的——格式。这两个静态方法  
> Object.values()和 Object.entries()接收一个对象，返回它们内容的数组。Object.values()  
> 返回对象值的数组，Object.entries()返回键/值对的数组  
> 下面的示例展示了这两个方法：  
> const o = \{  
> foo: ‘bar’,  
> baz: 1,  
> qux: \{\}  
> \};  
> console.log(Object.values(o));  
> // \[“bar”, 1, \{\}\]  
> console.log(Object.entries((o)));  
> // \[\[“foo”, “bar”\], \[“baz”, 1\], \[“qux”, \{\}\]\]  
> 注意，非字符串属性会被转换为字符串输出。另外，这两个方法执行对象的浅复制：  
> const o = \{  
> qux: \{\}  
> \};  
> console.log(Object.values(o)\[0\] === o.qux);  
> // true  
> console.log(Object.entries(o)\[0\]\[1\] === o.qux);  
> // true  
> 符号属性会被忽略：  
> const sym = Symbol();  
> const o = \{  
> \[sym\]: ‘foo’  
> \};  
> console.log(Object.values(o));  
> // \[\]  
> console.log(Object.entries((o)));  
> // \[\]

# 第10章.函数 #

> 给函数参数传 undefined 相当于没有传值，不过这样可以利用多个独立的默认值

> 参数初始化顺序遵循“暂时性死区”规则，即前面定义的参数不能引用后面定义的。像这样就会抛  
> 出错误：  
> // 调用时不传第一个参数会报错  
> function makeKing(name = numerals, numerals = ‘VIII’) \{  
> return `King ${name} ${numerals}`;  
> \}  
> 参数也存在于自己的作用域中，它们不能引用函数体的作用域：  
> // 调用时不传第二个参数会报错  
> function makeKing(name = ‘Henry’, numerals = defaultNumeral) \{  
> let defaultNumeral = ‘VIII’;  
> return `King ${name} ${numerals}`;  
> \}

> 在 ECMAScript 5 中，函数内部存在两个特殊的对象：arguments 和 this。ECMAScript 6 又新增  
> 了 new.target 属性。  
> arguments 对象其实还有一个 callee 属性，是一个指向 arguments 对象所在函数的指针(函数名)

> caller 这个属性引用的是调用当前函数的函数  
> function outer() \{  
> inner();  
> \}  
> function inner() \{  
> console.log(inner.caller); outer函数调用了inner 打印的是outer函数  
> \}  
> outer();

> ECMAScript 6 新增了检测函数是否使用 new 关键字调用的 new.target 属性  
> function King() \{  
> if (!new.target) \{  
> throw ‘King must be instantiated using “new”’  
> \}  
> console.log(‘King instantiated using “new”’);  
> \}  
> new King(); // King instantiated using “new”  
> King(); // Error: King must be instantiated using “new”

> 使用 call()或 apply()的好处是可以将任意对象设置为任意函数的作用域，这样对象可以不用关  
> 心方法。在前面例子最初的版本中，为切换上下文需要先把 sayColor()直接赋值为 o 的属性，然后再  
> 调用。而在这个修改后的版本中，就不需要这一步操作了。  
> ECMAScript 5 出于同样的目的定义了一个新方法：bind()。bind()方法会创建一个新的函数实例，  
> 其 this 值会被绑定到传给 bind()的对象。比如：  
> window.color = ‘red’;  
> var o = \{  
> color: ‘blue’  
> \};  
> function sayColor() \{  
> console.log(this.color);  
> \}  
> let objectSayColor = sayColor.bind(o);  
> objectSayColor(); // blue  
> 这里，在 sayColor()上调用 bind()并传入对象 o 创建了一个新函数 objectSayColor()。  
> objectSayColor()中的 this 值被设置为 o，因此直接调用这个函数，即使是在全局作用域中调用，  
> 也会返回字符串"blue"。

> 小结  
> 函数是 JavaScript 编程中最有用也最通用的工具。ECMAScript 6 新增了更加强大的语法特性，从而  
> 让开发者可以更有效地使用函数。  
>  函数表达式与函数声明是不一样的。函数声明要求写出函数名称，而函数表达式并不需要。没  
> 有名称的函数表达式也被称为匿名函数。  
>  ES6 新增了类似于函数表达式的箭头函数语法，但两者也有一些重要区别。  
>  JavaScript 中函数定义与调用时的参数极其灵活。arguments 对象，以及 ES6 新增的扩展操作符，  
> 可以实现函数定义和调用的完全动态化。  
>  函数内部也暴露了很多对象和引用，涵盖了函数被谁调用、使用什么调用，以及调用时传入了  
> 什么参数等信息。  
>  JavaScript 引擎可以优化符合尾调用条件的函数，以节省栈空间。  
>  闭包的作用域链中包含自己的一个变量对象，然后是包含函数的变量对象，直到全局上下文的  
> 变量对象。  
>  通常，函数作用域及其中的所有变量在函数执行完毕后都会被销毁。  
>  闭包在被函数返回之后，其作用域会一直保存在内存中，直到闭包被销毁。  
>  函数可以在创建之后立即调用，执行其中代码之后却不留下对函数的引用。  
>  立即调用的函数表达式如果不在包含作用域中将返回值赋给一个变量，则其包含的所有变量都  
> 会被销毁。  
>  虽然 JavaScript 没有私有对象属性的概念，但可以使用闭包实现公共方法，访问位于包含作用域  
> 中定义的变量。  
>  可以访问私有变量的公共方法叫作特权方法。  
>  特权方法可以使用构造函数或原型模式通过自定义类型中实现，也可以使用模块模式或模块增  
> 强模式在单例对象上实现。

# 第11章.期约与异步函数 #

> 事件循环 —

# 第12章.BOM #

> window 对象的位置可以通过不同的属性和方法来确定。现代浏览器提供了 screenLeft 和screenTop 属性，用于表示窗口相对于屏幕左侧和顶部的位置 ，返回值的单位是 CSS 像素。  
> 可以使用 moveTo()和 moveBy()方法移动窗口。这两个方法都接收两个参数，其中 moveTo()接收要移动到的新位置的绝对坐标 x 和 y；而 moveBy()则接收相对当前位置在两个方向上移动的像素数。  
> 比如：  
> // 把窗口移动到左上角  
> window.moveTo(0,0);  
> // 把窗口向下移动 100 像素  
> window.moveBy(0, 100);  
> // 把窗口移动到坐标位置(200, 300)  
> window.moveTo(200, 300);  
> // 把窗口向左移动 50 像素  
> window.moveBy(-50, 0);  
> 依浏览器而定，以上方法可能会被部分或全部禁用。

> 可以使用resizeTo()和resizeBy()方法调整窗口大小。这两个方法都接收两个参数，resizeTo()接收新的宽度和高度值，而 resizeBy()接收宽度和高度各要缩放多少。下面看个例子：  
> // 缩放到 100×100  
> window.resizeTo(100, 100);  
> // 缩放到 200×150  
> window.resizeBy(100, 50);  
> // 缩放到 300×300  
> window.resizeTo(300, 300);  
> 与移动窗口的方法一样，缩放窗口的方法可能会被浏览器禁用，而且在某些浏览器中默认是禁用的。  
> 同样，缩放窗口的方法只能应用到最上层的 window 对象。

> 在不同浏览器中确定浏览器窗口大小没有想象中那么容易。所有现代浏览器都支持 4 个属性：  
> innerWidth、innerHeight、outerWidth 和 outerHeight。outerWidth 和 outerHeight 返回浏览器窗口自身的大小（不管是在最外层 window 上使用，还是在窗格<frame>中使用）。  
> innerWidth和 innerHeight 返回浏览器窗口中页面视口的大小（不包含浏览器边框和工具栏）。

> 可以使用 scroll()、scrollTo()和 scrollBy()方法滚动页面。这 3 个方法都接收表示相对视口距离的 x 和 y 坐标，这两个参数在前两个方法中表示要滚动到的坐标，在最后一个方法中表示滚动的距离。  
> // 相对于当前视口向下滚动 100 像素  
> window.scrollBy(0, 100);  
> // 相对于当前视口向右滚动 40 像素  
> window.scrollBy(40, 0);  
> // 滚动到页面左上角  
> window.scrollTo(0, 0);  
> // 滚动到距离屏幕左边及顶边各 100 像素的位置  
> window.scrollTo(100, 100);  
> 这几个方法也都接收一个 ScrollToOptions 字典，除了提供偏移值，还可以通过 behavior 属性告诉浏览器是否平滑滚动。  
> // 正常滚动  
> window.scrollTo(\{  
> left: 100,  
> top: 100,  
> behavior: ‘auto’  
> \});  
> // 平滑滚动  
> window.scrollTo(\{  
> left: 100,  
> top: 100,  
> behavior: ‘smooth’  
> \});

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 6]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 7]

# 第17章事件 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 8]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 9]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 10]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 11]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 12]

# 第24章.网络请求与远程资源 #

> 使用 XHR 对象首先要调用 open()方法，这个方法接收 3 个参数：请求类型（“get”、"post"等）、  
> 请求 URL，以及表示请求是否异步的布尔值。下面是一个例子：

xhr.open("get", "example.php", false);

> XHR 对象有一个 readyState 属性，表示当前处在请求/响应过程的哪个阶段。  
> 这个属性有如下可能的值。  
> 0：未初始化（Uninitialized）。尚未调用 open()方法。  
> 1：已打开（Open）。已调用 open()方法，尚未调用 send()方法。  
> 2：已发送（Sent）。已调用 send()方法，尚未收到响应。  
> 3：接收中（Receiving）。已经收到部分响应。  
> 4：完成（Complete）。已经收到所有响应，可以使用了。

# 第25章.客户端存储 #

> cookie 的构成

cookie 在浏览器中是由以下参数构成的。  
**名称**：唯一标识 cookie 的名称。cookie 名不区分大小写，因此 myCookie 和 MyCookie 是同一  
个名称。不过，实践中最好将 cookie 名当成区分大小写来对待，因为一些服务器软件可能这样  
对待它们。cookie 名必须经过 URL 编码。

**值**：存储在 cookie 里的字符串值。这个值必须经过 URL 编码。

**域**：cookie 有效的域。发送到这个域的所有请求都会包含对应的 cookie。这个值可能包含子域（如  
www.wrox.com），也可以不包含（如.wrox.com 表示对 wrox.com 的所有子域都有效）。如果不明  
确设置，则默认为设置 cookie 的域。

**路径**：请求 URL 中包含这个路径才会把 cookie 发送到服务器。例如，可以指定 cookie 只能由  
http://www.wrox.com/books/访问，因此访问 http://www.wrox.com/下的页面就不会发送 cookie，即  
使请求的是同一个域。

**过期时间**：表示何时删除 cookie 的时间戳（即什么时间之后就不发送到服务器了）。默认情况下，  
浏览器会话结束后会删除所有 cookie。不过，也可以设置删除 cookie 的时间。这个值是 GMT 格  
式（Wdy, DD-Mon-YYYY HH:MM:SS GMT），用于指定删除 cookie 的具体时间。这样即使关闭  
浏览器 cookie 也会保留在用户机器上。把过期时间设置为过去的时间会立即删除 cookie。

**安全标志**：设置之后，只在使用 SSL 安全连接的情况下才会把 cookie 发送到服务器。例如，请  
求 https://www.wrox.com 会发送 cookie，而请求 http://www.wrox.com 则不会。  
这些参数在 Set-Cookie 头部中使用分号加空格隔开，比如：

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70]: /images/20221024/c9c5bfee331b429fb8f1902f695dd429.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 1]: /images/20221024/5e47b904088d47b5b5a8f0d1c8ec90db.png
[20210202152454965.png]: /images/20221024/90b1e5adc9d14584b576165b5267b561.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 2]: /images/20221024/e928fa39e89d4b888ec88227336f2a4c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 3]: /images/20221024/5adcb17b72cb42debd52d352a115e840.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 4]: /images/20221024/fd7cdc466da3444dacf96c80ad03672e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 5]: /images/20221024/71e12c1f44834d19b9056d92f962d952.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 6]: /images/20221024/7dee29a467d04993bf19cbc52eda8084.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 7]: /images/20221024/0430fbfb880c4a1e8a5b47ae89c9d4c9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 8]: /images/20221024/a8216f15080c4c14aa9bddd684ccbb91.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 9]: /images/20221024/3f30df7b239a4aaf89e49b314ec633fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 10]: /images/20221024/d9bc2e87fe9b4f5e8dc992f419e2385f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 11]: /images/20221024/2140195b01c54782912687314f404ee5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 12]: /images/20221024/e4d63c6990f34578a487e123722b9c4b.png