第 3 章 类型、值和变量
3.1 数字
3.1.3 javascript 中算术运算符
isNaN()参数是 NaN 或一个非数字值返回 true
isFinite() 参数是 NaN,Infinity,-Infinity 的时候返回 false
isNaN(NaN); //true
isFinite(NaN); //false3.2 文本
3.2.1 字符串直接量
在 ECMAScript5 中字符串可以拆分成数行，中间每行必须以反斜线结束
var result =
"one \
two \
three";
console.log(result); //one two three建议：在 javascript 中使用单引号表示字符串，在 HTML 中使用双引号表示字符串;
3.2.2 转义字符
\n 换行符
\r 回车符
3.3 布尔值
undefined、null、0、-0、NaN、false、“” 会转化为 false,其他值转化为 true
3.6 包装对象
字符串通过 new String()构造函数创建一个临时对象，这个对象继承了字符串的方法，并被用来处理属性的引用，一旦引用结束，这个对象自动销毁。
数字和布尔值也具有各自的方法，通过 Number()和 Boolean()构造函数创建一个临时对象，方法均来自这个临时对象
null 和 undefined 没有包装对象
3.10 变量作用域
在函数体内，局部变量的优先级高于同名的全局变量
3.10.1 函数作用域和声明提前
javascript 函数作用域是指在函数内声明的所有变量在函数体内始终是可见的，函数声明和变量声明都会被提升
3.10.2 作为属性的变量
当使用 var 声明一个变量时，创建的这个属性是不可配置的，这个属性无法通过 delete 语运算符删除
第 4 章 表达式和运算符
4.7 运算符优先级
参考 MDN运算符优先级
下面的表将所有运算符按照优先级的不同从高到低排列。
| 优先级 | 运算类型 | 关联性 | 运算符 |
| ------ | -------------------- | -------- | -------------- | — | — |
| 20 | 圆括号 | n/a | ( … ) |
| 19 | 成员访问 | 从左到右 | … . … |
| | 需计算的成员访问 | 从左到右 | … [ … ] |
| | new(带参数列表) | n/a | new … ( … ) |
| | 函数调用 | 从左到右 | … ( … ) |
| 18 | new (无参数列表) | 从右到左 | new … |
| 17 | 后置递增(运算符在后) | n/a | … ++ |
| | 后置递减(运算符在后) | n/a | … – |
| 16 | 逻辑非 | 从右到左 | ! … |
| | 按位非 | 从右到左 | ~ … |
| | 一元加法 | 从右到左 | + … |
| | 一元减法 | 从右到左 | - … |
| | 前置递增 | 从右到左 | ++ … |
| | 前置递减 | 从右到左 | – … |
| | typeof | 从右到左 | typeof … |
| | void | 从右到左 | void … |
| | delete | 从右到左 | delete … |
| 15 | 幂 | 从右到左 | … ** … |
| 14 | 乘法 | 从左到右 | … * … |
| | 除法 | 从左到右 | … / … |
| | 取模 | 从左到右 | … % … |
| 13 | 加法 | 从左到右 | … + … |
| | 减法 | 从左到右 | … - … |
| 12 | 按位左移 | 从左到右 | … << … |
| | 按位右移 | 从左到右 | … >> … |
| | 无符号右移 | 从左到右 | … >>> … |
| 11 | 小于 | 从左到右 | … < … |
| | 小于等于 | 从左到右 | … <= … |
| | 大于 | 从左到右 | … > … |
| | 大于等于 | 从左到右 | … >= … |
| | in | 从左到右 | … in … |
| | instanceof | 从左到右 | … instanceof … |
| 10 | 等号 | 从左到右 | … == … |
| | 非等号 | 从左到右 | … != … |
| | 全等号 | 从左到右 | … === … |
| | 非全等号 | 从左到右 | … !== … |
| 9 | 按位与 | 从左到右 | … & … |
| 8 | 按位异或 | 从左到右 | … ^ … |
| 7 | 按位或 | 从左到右 | … | … |
| 6 | 逻辑与 | 从左到右 | … && … |
| 5 | 逻辑或 | 从左到右 | … | | … |
| 4 | 条件运算符 | 从右到左 | … ? … : … |
| 3 | 赋值 | 从右到左 | … = … |
| | | | … += … |
| | | | … -= … |
| | | | … *= … |
| | | | … /= … |
| | | | … %= … |
| | | | … <<= … |
| | | | … >>= … |
| | | | … >>>= … |
| | | | … &= … |
| | | | … ^= … |
| | | | … | = … |
| 2 | yield | 从右到左 | yield … |
| | yield* | 从右到左 | yield* … |
| 1 | 展开运算符 | n/a | … … |
| 0 | 逗号 | 从左到右 | … , … |
4.9.4 instanceof 运算符
为了计算表达式 o instanceof f,javascript 首先计算 f.prototype,然后在 o 的原型链中查找 f.prototype,如果找到则表达式返回 true，否则返回 false
4.13.3 delete 运算符
并不是所有的属性都可以删除
内置核心和客户端属性是不能删除
用户通过 var 语句声明的变量不能删除
function 语句定义的函数和函数参数也是不能删除
第 5 章 语句
5.2 复合语句和空语句
语句块的结尾不需要分号，块中原始语句必须以分号结束
5.7.3 “use strict”
严格模式和非严格模式之间的区别：
- 严格模式中禁止使用 with 语句
- 严格模式中所有变量要先声明，否则将会抛出一个引用错误异常
- 严格模式用调用的函数中的一个 this 值是 undefined，在非严格模式中，this 值总是全局变量。这可以用来判断是否支持严格模式
var hasStrictMode = (fuction(){"use strict";return this === undefined}()) - 严格模式中，当通过 call()或 apply()来调用函数时，其中的 this 就是 call()或 apply()传入的第一个参数
- 严格模式中，给只读属性和给不可扩展的对象创建新成员都将抛出一个类型错误
- 严格模式中，传入 eval()的代码不能再调用程序所在的上下文中声明变量或定义函数
- 严格模式中，函数里的 arguments 对象拥有传入函数值的静态副本，在非严格模式中，arguments 里的数组元素和函数参数都指向同一个值的引用
- 严格模式中试图删除一个不可配置的属性将抛出一个类型错误
- 严格模式中，在一个对象直接量中定义两个或多个同名属性将产生一个语法错误
- 严格模式中，函数声明中存在两个或多个同名参数将产生一个语法错误
- 严格模式中，不允许使用八进制直接量
- 严格模式中，arguments,caller 和 arguments.callee 都将抛出一个类型错误。
第 6 章 对象
6.1 创建对象
可通过对象直接量、关键字 New、Object.create()来创建对象
6.1.3 原型
Object.prototype 没有原型对象，它不继承任何属性，所有内置构造函数都继承自它
6.1.4 Object.create()
使用 Object.create()创建一个新对象，其中第一个参数是这个对象的原型，第二个参数是可选的属性描述符
var o = Object.create(null); //o 是一个没有原型的对象
以下是 IE8 兼容方法
if (typeof Object.create != "function") {
Object.create = (function () {
function Temp() {}
var hasOwn = Object.prototype.hasOwnProperty;
return function (O) {
if (typeof O != "object") {
throw TypeError("Object prototype may only be an Object or null");
}
Temp.prototype = O;
var obj = new Temp();
Temp.prototype = null;
if (arguments.length > 1) {
var Properties = Object(arguments[1]);
for (var prop in Properties) {
if (hasOwn.call(Properties, prop)) {
obj[prop] = Properties[prop];
}
}
}
return obj;
};
})();
}6.2 属性的查询和设置
当使用方括号([])运算符来获取属性的值时，方括号内的表达式必须返回字符串，或者是一个可以返回字符串的值
6.3 删除属性
delete 只是断开属性和宿主对象的联系，而不去操作属性中的属性
var a = { p: { x: 1 } };
var b = a.p;
delete a.p;
console.log(b.x);delete 运算符只能删除自有属性，不能删除继承属性。
delete 表达式删除成功后，返回 true
6.4 检测属性
判断某个属性是否存在于某个对象中，可以通过 in 运算符、 hasOwnProperty()、propertyIsEnumerable()方法来判断
propertyIsEnumerable()只有检测到是自有属性，且这个属性的可枚举性为 true 时才返回 true
var o = Object.create({ y: 2 });
o.x = 1;
o.propertyIsEnumerable("x"); //true;
o.propertyIsEnumerable("y"); //false;6.5 枚举属性
对象继承的内置方法不可枚举，但在代码中给对象添加的属性都是可枚举的（除非将他们转换为不可枚举的）
ECMAScript5 定义了两个用以枚举属性名称的函数：
- Object.keys(),返回一个由对象中可枚举的自有属性的名称组成的数组
- Object.getOwnPropertyNames(),只返回对象的所有自有属性的名称
var arr = ["a", "b", "c"];
Object.keys(arr); //["0", "1", "2"]
Object.getOwnPropertyNames(arr); // ["0", "1", "2", "length"]6.8 对象的三个属性
6.8.1 原型属性 proto
通过对象直接量创建的对象使用 Object.prototype 作为他们的原型
通过 new 创建的对象使用构造函数的 prototype 属性作为他们的原型
通过 Object.create()创建的对象使用第一个参数作为他们的原型
将对象作为参数传入 Object.getPrototypeOf()可以查询它的原型
var a = { x: 1 };
var b = Object.create(a);
Object.getPrototypeOf(b) === a; //true想要检测一个对象是否是另一个对象的原型可以使用 isPrototypeOf()方法
var a = { x: 1 };
var b = Object.create(a);
a.isPrototypeOf(b); //true6.8.2 类属性 [object class]
对象的类属性是一个字符串，用以表示对象的类型信息
var a = {};
Object.prototype.toString.call(a).slice(8, -1); //Object6.8.3 可扩展性
Object.preventExtensions() 将对象转为不可扩展的
Object.seal() 将对象转为不可扩展的,且将对象的所有自有属性设置为不可配置
Object.freeze() 将对象转为不可扩展的,且将对象的所有自有属性设置为不可配置,将自有的所有数据属性设置为只读
第 7 章 数组
7.5 数组元素的添加和删除
用 delete 删除数组元素与为其赋 undefined 值是类似的，注意：使用 delete 删除数组元素的时候不会修改数组的 length 属性，也不会将元素从高索引处移下来填充已删除属性留下来的空白
7.8 数组方法
7.8.3 sort()
为了按照其他方式而非字符顺序进行数组排序，必须给 sort()方法传递一个比较函数，该函数决定了它的两个参数在排好序的数组中的先后顺序。
假设第一个参数在前，比较函数应该返回一个小于 0 的数，第一个参数在后，比较函数返回一个大于 0 的数
7.8.5 slice()
该方法返回数组的一个片段或子数组
当参数中出现负数，-1 指定了最后一个元素
7.8.7 push() pop() shift() unshift()
pop() 返回数组尾部删除的值
unshift() 返回数组头部删除的值
7.9 ECMAScript5 中定义的数组方法
- forEach()
该方法遍历数组，为每个元素调用指定的函数 - map()
该方法调用数组的每个元素传递给指定的函数，并返回一个数组。
var a = [1, 2, 3];
var b = a.map(function (x) {
return x * x;
}); //b = [1,4,9]- filter()
该方法返回的数组元素是调用的数组的一个子集，传递的函数是用来逻辑判定的
var a = [1, 2, 3, 4, 5];
samllValue = a.filter(function (x) {
return x < 3;
}); //[1,2]- every()和 some()
every()当且仅当针对数组中所有元素调用判定函数都返回 true，它才返回 true。
some()当针对数组中所有元素调用判定函数都返回 false，它才返回 false
var a = [1, 2, 3, 4, 5];
a.every(function (x) {
return x < 0;
}); //true
a.every(function (x) {
return x % 2 === 0;
}); //false
a.some(function (x) {
return x % 2 === 0;
}); //true
a.some(isNaN); //false一旦 every()和 some()确认返回什么值他们就会停止遍历数组元素 5. reduce()和 reduceRight()
使用指定的函数将数组元素进行组合，生成单个值
var a = [1, 2, 3, 4, 5];
var sum = a.reduce(function (x, y) {
return x + y;
}, 0); //15
var max = a.reduce(function (x, y) {
return x > y ? x : y;
}); //5reduce()第一个参数执行化简操作的函数，该函数的 x 参数是数组的元素，y 参数是上一次操作的结果值，第二个参数是一个传递给函数的初始值，当没有初始值时默认为数组第一个元素
reduceRight()按照数组的索引从高到低处理数组
7.11 类数组对象
javascript 数组的一些特性是其他对象所没有的：
- 当有新的元素添加到列表时，自动更新 length 属性
- 设置 length 属性为一个较小值时将截断数组
- 从 Array.prototype 中继承一些有用的方法
- 其类属性为 Array
第 8 章 函数
8.2 函数调用
8.2.1 函数调用
根据 ECMAscript3 和非严格的 ECMAscript5 对函数调用规定，调用上下文(this)是全局对象，在非严格模式下，调用上下文是 window 对象
8.2.2 方法调用
如果函数表达式是一个属性访问表达式，即该函数是一个对象的属性或数组中的一个元素，那么它就是一个方法调用表达式
属性访问表达式由两部分组成，一个对象和一个属性名称，这个对象成为调用上下文，函数体可以使用 this 引用该对象
8.2.3 构造函数调用
构造函数调用会创建一个新的对象，这个对象继承自构造函数的 prototype 属性，构造函数试图初始化这个新创建的对象，并将这个对象用作其调用上下文，因此构造函数可以使用 this 来引用这个新创建的对象
8.2.4 间接调用
call()和 apply()可以用来间接的调用函数，两个方法都允许显示指定调用所需的 this 的值，也就是说任何函数可以作为任何对象的方法来调用
8.3 函数的实参和形参
8.3.2 可变长的实参列表：实参对象
在函数体内，标识符 arguments 是指向实参对象的引用，实参对象是一个类数组对象
function f(x) {
console.log(x);
arguments[0] = null; //修改实参数组的元素同样会修改x的值
console.log(x); //null
}在 ECMAScript5 中移除了 arguments 属性
8.4 自定义函数属性
当函数需要一个静态变量在调用时保持某个值不变，最方便的就是给函数定义属性，而不是定义全局变量
8.6 闭包
JavaScript 采用词法作用域，这个作用域是在函数定义时决定的。
var scope = "globlescope";
function checkscope() {
var scope = "localscope";
function f() {
return scope;
}
return f;
}
checkscope()(); //localscope8.7 函数的属性方法和构造函数
8.7.3 call()和 apply()
要想以对象 o 的方法来调用 f 函数，可以这样使用：
f.call(o);
f.apply(o);call()和 apply()的第一个实参是要调用函数的母对象，它是调用上下文，在函数内通过 this 来获得它的引用
两者区别：
对 call()来说，第二个参数是要传入待调用函数的值，所传入参数一一列出
apply()第二个参数可以以参数数组(既可以是类数组也可以是真实数组)的形式传入
8.7.4 bind()
当在函数 f()上调用 bind()方法并传入一个对象 o 作为参数，这个方法将返回一个新函数。新函数将会把原始函数 f()当做 o 的方法来调用，传入新函数的任何实参都将传入原始函数
function f(y) {
return this.x + y;
}
var o = { x: 1 };
var g = f.bind(o);
g(2); //3ECMAScript5 中 bind()方法不仅仅是将函数绑定至一个对象，传入 bind()的实参也会绑定至 this。这种编程技术被称为“柯里化”
var sum = function (x, y) {
return x + y;
};
//创建一个类似sum的新函数，但this的值绑定到null
//并且第一个参数绑定1，这个新函数期望只传入一个实参
var succ = sum.bind(null, 1);
succ(2); //38.7.6 Function()构造函数
Function()构造函数所创建的函数并不使用词法作用域，函数体代码的编译总会在顶层函数执行，相当于全函数中的 eval()
var scope = "global";
function constructFunction() {
var scope = "local";
return new Function("return scope");
}
constructFunction()(); //global第 9 章 类和模块
9.2 类和构造函数
9.2.1 构造函数和类的标识符
a instanceof b 本质是检测 a 对象是否继承自 b.prototype
a.__proto__ === b.prototype; // true9.5 类和类型
几种用以检测对象的类的技术：
9.5.1 instanceof 运算符
function Range(from, to) {
this.from = from;
this.to = to;
}
Range.prototype = {
constructor: Range,
includes: function (x) {
return this.from <= x && x <= this.to;
},
foreach: function (f) {
for (var x = Math.ceil(this.from); x <= this.to; x++) f(x);
},
toString: function () {
return "(" + this.from + "..." + this.to + ")";
},
};
var r = new Range(1, 3);
r instanceof Range; //true
Range.prototype.isPrototypeOf(r); //true9.5.2 constructor 属性
r.constructor == Range;9.5.3 构造函数的名称
9.5.4 鸭式辩型思想
function quacks(o /*, ... */) {
for (var i = 1; i < arguments.length; i++) {
// for each argument after o
var arg = arguments[i];
switch (
typeof arg // If arg is a:
) {
case "string": // string: check for a method with that name
if (typeof o[arg] !== "function") return false;
continue;
case "function": // function: use the prototype object instead
// If the argument is a function, we use its prototype object
arg = arg.prototype;
// fall through to the next case
case "object": // object: check for matching methods
for (var m in arg) {
// For each property of the object
if (typeof arg[m] !== "function") continue; // skip non-methods
if (typeof o[m] !== "function") return false;
}
}
}
// If we're still here, then o implements everything
return true;
}9.8 ES5 中的类
9.8.1 让属性不可枚举
Object.definedProperty(Object.prototype, "objectId", {
get: idGetter,
enumerable: false,
configurable: false,
});9.8.4 防止类的扩展
Object.preventExtensions()将对象设置为不可扩展
Object.seal()阻止用户给对象添加新属性
Object.freeze()将所有属性设置为只读和不可配置
第 10 章 正则表达式的模式匹配
10.1 正则表达式的定义
ECMAScript5 规定一个正则表达式直接量会在执行到它时转化为一个正则对象，同一段代码每次运算都返回新对象
10.1.1 直接量字符
^ $ . * + ? = ! : | \ / () [] {}在正则表达式中使用这些字符的直接量进行匹配，则必须使用前缀\
10.1.2 字符类
将直接量字符单独放进方括号内就组成了字符类，一个字符类可以匹配它所包含的任意字符
/[abc]/ 匹配a,b,c中任意一个
/[^abc]/ 匹配abc之外的所有字符
/[a-zA-Z0-9]/ 匹配拉丁字母表中任何字母和数字
/[...]/ 匹配方括号内任意字符
/[^...]/ 匹配不在方括号内任意字符
/./ 匹配除换行符和其他Unicode行终止符之外的任意字符
/\w/ 匹配包括下划线在内的任何ASCII字符组成的单词 类似但不等价于/[a-zA-Z0-9_]/
/\W/ 匹配任何不是ASCII字符组成的单词 等价于/[^a-zA-Z0-9_]/
/\d/ 匹配任何ASCII数字 等价于/[0-9]/
/\D/ 匹配除ASCII数字之外的任何字符 等价于/[^0-9]/
/\s/ 匹配任何Unicode空白符
/\S/ 匹配任何非Unicode空白符10.3 重复
正则表达式的重复字符语法
{n,m} 匹配前一项至少n次，但不能超过m次
{n,} 匹配前一项n次或者更多
{n} 匹配前一项n次
? 匹配前一项0次或1次 等价于{0,1}
+ 匹配前一项1次或多次 等价于{1,}
* 匹配前一项0次或多次 等价于{0,}使用?,*时要注意，由于这些字符串可能匹配 0 个字符，因此他们允许什么都不匹配
非贪婪的重复
非贪婪的重复即尽可能少的匹配，只须在待匹配的字符后跟随一个问号即可/a+?/
10.1.4 选择分组和引用
字符"|"用于分隔供选择的字符
/\d{3}|[a-z]{4}/匹配的是三位数字或者四个小写字母
注意选择项的匹配次序是从左到右，直到发现匹配项，如果左边的选择项匹配，就忽略右边的匹配项
正则表达式圆括号的多种用途：
- 把单独的项组成子表达式，以便通过"*+？|"进行修饰 /java(script)?/
- 允许在同一正则表达式的后部引用前面的子表达式 \1 引用的是第一个带圆括号的子表达式
| 匹配的是该表达式左边或右边的子表达式
(...) 将几个项组合为一个单元，这个单元可通过“*”，“+”，“？”和“|”等符号加以修饰，而且可以记住和这个组合相匹配的字符串以供此后的引用使用
(?...) 只组合，把项组合带一个单元，但不记忆与该组相匹配的字符
\n 和第n个分组第一次匹配的字符相匹配，组是圆括号中的子表达式10.1.5 指定匹配位置
^ 匹配字符串的开头，在多行检索中匹配一行的开头
$ 匹配字符串的结尾，在多行检索中匹配一行的结尾
\b 匹配一个单词的边界，简言之就是位于字符\w和\W之间的位置，或位于字符\W和字符串的开头或者结尾之间的位置
\B 匹配非单词边界的位置
(?=p) 零宽正向先行断言，要求接下来的字符都与p匹配，但不包括匹配p的那些字符
(?=p) 零宽负向先行断言，要求接下来的字符都不与p匹配10.1.6 修饰符
- i 执行不区分大小写的匹配
- g 执行一个全局匹配
- m 多行匹配模式
10.2 用于模式匹配的 String 方法
search() 返回第一个与之匹配的子串的起始位置，如果找不到匹配则返回-1。该方法不支持全局检索
"javascript".search(/script/i); //4replace() 用于检索与替换操作
第一个参数是一个正则表达式，第二个参数是要进行替换的字符串。如正则表达式不带修饰符 g，则只替换所匹配的第一个子串
var text = "javascript is a good language";
text.replace(/javascript/gi, "JavaScript"); //"JavaScript is a good language"
var quote = /"([^"]*)"/g;
text.replace(quote, "“$1”");match(正则表达式) 返回的是一个由匹配结果组成的数组
"1 plus 2 euqals 3".match(/\d+/g); //["1", "2", "3"]split() 这个方法用以将调用它的字符串拆分为一个子串组成的数组
"1, 2, 3, 4".split(/\s*,\s*/); //["1","2","3","4"]10.3 RexExp 对象
10.3.2 RexExp 的方法
exec()方法对一个字符串执行检索匹配，没找到任何匹配返回 null，找到就返回一个数组
var text = "JavaScript is more fun than Java!";
var pattern = ;
/Java/g.exec(text); //["Java", index: 0, input: "JavaScript is more fun than Java!"]test()对某个字符串检测，如果包含正则表达的一个匹配结果，则返回 true
/java/i.test("javascript"); //true第 11 章 javascript 的子集和扩展
这部分扩展可参考《ECMAscript6 标准入门》第二版
第 12 章 服务器端 javascript
process.version; //node版本计信系
process.argv; //node命令行数组参数
process.env; // 环境变量对象
process.cwd(); //返回当前工作目录
process.chdir(); //改变目录
process.exitr(); //退出第 13 章 web 浏览器中的 javascript
13.3 javascript 程序的执行
web 页面嵌入一个 iframe 窗体，文档中的 js 代码和被嵌入文档（iframe 窗体）中 js 代码会有不同的全局对象
javascript 程序的执行有两个阶段，第一阶段载入文档内容并执行 script 元素中的代码（包括内敛脚本和外部脚本）。所有脚本执行完后进入第二阶段，这个阶段是异步的，由时间驱动，web 浏览器调用时事件处理程序来响应异步发生的事件
客户端 javascript 时间线
- web 浏览器创建 document 对象，并且开始解析 web 页面，在这个阶段 document.readystate 属性的值是 loading
- 当 html 解析器遇到没有 async 和 defer 属性的 script 时，他把这些元素添加到脚本中然后执行外部脚本。这些脚本会同步执行，并且在脚本下载和执行时解析器会暂停，这样脚本可以用 document.write()把文本插入到文档中
- 当解析器遇到设置了 async 和 defer 属性的 script 时,他开始下载脚本，并继续解析文档，脚本会在它下载完成后尽快执行，这里异步脚本禁止使用 document.write()方法
- 当文档完成解析。document.readyState 属性变为 interactive.浏览器在 domcument 对象上触发 DOMContentLoaded 事件，这标志着程序执行从同步执行阶段转到了异步事件驱动阶段
- 当文档所有内容完成载入时，document.readyState 属性变为 complete，浏览器触发 onload 事件
第 14 章 window 对象
14.8 多窗口和窗体
14.8.1 打开和关闭窗口
window.open()载入指定的 URL 到新的或已存在的窗口中，并返回代表那个窗口的 window 对象
14.8.2 窗体之间的关系
窗体可以用 parent 属性引用包含它的窗口或窗体的 window 对象
top 属性是一个通用的快捷方式，无论一个窗体被嵌套了几层，它的 top 属性引用的都是指向包含它的顶级窗口
iframe 元素具有 contentWindow 属性，引用该窗体的 window 对象
每个 window 对象都有一个 frames 属性，他引用自身包含的窗口或窗体的子窗体，window.iframes[0]指向窗口的第一个子窗体
frames[]数组里的元素是 window 对象
14.8.3 交互窗口中的 javasctipt
iframe A 中有
var i = 3；iframe B 可以读取 A 中 js
console.log(parent.A.i); //3第 15 章 脚本化文档
15.3 文档和结构的遍历
15.3.1 作为节点树的文档
parentNode childNodes firstChild lastChild nextSibling previoursSibling nodeType nodeValue nodeName
15.3.2 作为元素树的文档
firstElementChild lastElementChild nextElementSibling previousElementSibling childElementCount
15.5.2 作为纯文本的元素内容
标准的方法是用 Node 的 textContent 属性来实现，在 IE 章可以用 innerText 属性来代替
15.8.2 查询元素的几何尺寸
断定一个元素的尺寸和位置的最简单的方法是调用它的 getBoundingClientRect()方法，返回一个 left,right，top,bottom 属性的对象，都是相对视口坐标的位置
15.8.4 滚动
window.scrollTo()接受一个点的 x，y 坐标（文档坐标）。滚动到某点
window.scrollBy()接受一个点的 x，y 坐标（文档坐标）。相对滚动多少
第 16 章 脚本化 CSS
16.4 查询计算出的样式
getComputedStyle()方法来获得一个元素的计算样式，返回值是一个 cssStyleDeclaration 对象,代表了应用在指定元素上的所有样式
var title = documnet.getElementById("sectiontitle");
var titlestyles = window.getComputedStyle(element, null);在 IE8 中可以通过元素的 currentStyle 属性来兼容
16.6.2 查询、插入与删除样式表规则
document.styleSheets[]数组的元素是 cssStyleSheets 对象，cssStyleSheets 对象有一个 cssRules[]数组，它包含样式表的所有规则
var firstRule = document.styleSheets[0].cssRules[0];IE 使用不同的属性名 rules 代替 cssRules,rules 数组只包含样式表中实际存在的样式规则
第 17 章 事件处理
17.4 文档加载事件
当文档加载解析完毕且所有延迟脚本(deferred)都执行完毕时会触发 DOMContentLoaded 事件，此时图片和异步脚本(async)可能依旧在加载
第 18 章 脚本化 HTTP
18.1.3 编码请求主体
在表单用 POST 方法提交请求时，必须设置 Content-Type
xhr.setResquestHeader("Content-Type", "application/x-www-form-urlencoded");18.1.6 跨域 HTTP 请求
测试 withCredentials 的存在性是测试浏览器是否支持 CORS 的一种方法
第 19 章 jquery 类库
19.5.3 动画得到取消延迟和队列
stop()方法第一个参数默认为 false，如果为 true 则会清楚该选中元素上的动画队列，还会取消任何等待执行的动画。第二个参数用来黄子行正在连续变化的 css 属性是否保留当前值，true 变化到最终值，false 保留当前值
第 20 章 客户端存储
20.1 localStorage 和 sessionStorage
这俩者的主要区别在于存储的有效期和作用域的不同，数据可以存储多长时间以及谁拥有数据的访问权限
20.1.1 存储有效期和作用域
localStorage 存储的数据是永久的，除非 web 应用删除存储数据或者用户通过设置浏览器配置删除数据，否则数据将一直保存在用户的电脑中，永不过期
localStorage 的作用域是限制在文档源级别的，不同的协议，主机名，端口拥有不同的文档源，同源的文档间共享 localStorage。localStorage 的作用域也受浏览器供应商限制
第 21 章 多媒体和图形编程
21.3 可伸缩的矢量图形
<svg width="100" height="100">
<rect x="0" y="0" width="100" height="100" fill="red" />
</svg>SVG 适用场景
SVG 功能更完善，适合静态图片展示，高保真文档查看和打印的应用场景
兼容性 IE9+
21.4 canvas 中的图形
<canvas id="drawing" width="100" height="100">a drawing of something.</canvas>
<script type="text/javascript">
var drawing = document.getElementById("drawing");
if (drawing.getContext) {
var context = srawing.getContext("2d");
context.fillRect(10, 10, 50, 50);
context.fillStyle = "#f00";
}
</script>Canvas 适用场景
Canvas 提供的功能更原始，适合像素处理，动态渲染和大数据量绘制
兼容性 IE9+
第 22 章 html5 API
22.3 跨域消息传递
postMessage()方法接收俩参数，第一个参数是要传递的消息，第二个参数是一个字符串，指定目标窗口的源
<!-- http://127.0.0.1/a.html -->
<div id="test">123</div>
<script type="text/javascript">
window.onmessage = function (e) {
var text = document.getElementById("test").innerHTML;
//window.parent.postMessage()返回想要的数据
window.parent.postMessage(text, "http://localhost/test/index.html");
};
</script>
<!-- http:localhost/test/index.html -->
<iframe
id="iframe"
src="http://127.0.0.1/test/a.html"
style="display:none;"
></iframe>
<script type="text/javascript">
window.onload = function () {
var iframe = document.getElementById("iframe");
iframe.contentWindow.postMessage("null", "http://127.0.0.1/test/a.html");
};
window.onmessage = function (e) {
document.write(e.data); //123 这里获取到了a页面的dom内容
};
</script>原文链接: https://jesse121.github.io/blog/articles/2016/10/23.html
版权声明: 转载请注明出处.