Javascript权威指南——读书笔记

一、JavaScript核心语法

1、字符串中接受RegExp参数的方法

（1）text.search(pattern)返回首次匹配成功的位置

（2）text.match(pattern)返回匹配组成的数组

（3）text.replace(pattern, '#')返回新字符串

（4）text.split(pattern)

2、字符串不是对象为什么会有属性？

只要引用了字符串的属性，JavaScript就会将字符串值通过String()构造函数创建临时对象（包装对象），这个对象继承了字符串的方法，并被用来处理属性的引用。一旦属性引用结束，这个新创建的对象就会销毁。数字和布尔值同理。

字符串、数字和布尔值都是只读的，不等同于对象，其包装对象只是一种实现细节，可以通过String()、Number()、Boolean()显示创建包装对象

3、类型转换：

（1）显示类型转换最简单的方法是使用Boolean()、Number()、String()或Object()函数，还可以使用toString()，注意：null和undefined没有toString()方法。

（2）还可以通过运算符进行类型转换，x + '' //等价于String(x)　　+x //等价于Number(x)，也可以写成x-0　　!!x //等价于Boolean(x)

（3）Number类定义的toString()方法可以接收转换基数作为可选参数，n.toString(2) //转换为2进制　　n.toString(8) //转换为8进制　　n.toString(16) //转换为16进制

（4）处理财务或科学数据的时候，在做数字到字符串的转换过程中，你期望自己控制输出中小数点位置和有效数字位数，或者决定是否需要指数计数法，可能会用到toFixed()、toExponential()和toPrecision()函数

（5）用Number()将字符串转换为数字时，字符串不能出现非数字字符，但parseInt()和parseFloat()可以处理这种情况，parseInt()可接收第二个参数，这个参数指定数字转换的基数

（6）对象转为原始值（字符串或数字），所有的对象继承了两个转换方法：toString()和valueOf()

　　a.对象转为字符串过程：a.1 如果对象具有toString()方法，则调用这个方法，返回一个原始值　　a.2 如果对象没有toString()方法或者这个方法并不返回一个原始值，则调用valueOf()方法，如果返回的是原始值，则将返回的原始值转换为字符串（如果本身不是字符串的话）　　a.3 否则，JavaScript无法从toString()或valueOf()获得一个原始值，因此这时它将抛出一个类型错误异常　　ex：自定义的普通对象（{}）没有toString()和valueOf()方法，调用这两个方法将会抛出类型错误异常

　　b.对象转为数字过程：b.1 如果对象具有valueOf()方法，并且返回的是原始值，则将返回的原始值转为数字（如果本身不是数字的话）　　b.2 否则，如果对象具有toString()方法，返回一个原始值，并将其转换为数字返回　　b.3 否则，JavaScript抛出一个类型错误异常　　ex：[] == 0 // true 空数组首先调用valueOf()方法，但返回的不是原始值而是空数组这个对象本身，所以继续调用toString()方法，返回一个原始值空字符串，空字符串转换为数字0，结果为true

4、表达式

　　表达式是JavaScript中的一个短语，JavaScript解释器会将其计算出一个结果，常量和变量名都是简单的一种表达式，复杂表达式由简单表达式组成，常用方法是使用运算符（arr[1]、fn(1)都属于复杂表达式）

（1）原始表达式：表达式的最小单位，不再包含其他表达式，原始表达式包含常量或直接量、变量和关键字

（2）数组和对象的初始化表达式：数组直接量或对象直接量，它们不是原始表达式，因为它们所包含的成员都是子表达式（[[1,2,3], [4,5,6]], {a: {b: 1}}）

（3）函数定义表达式：函数直接量，function (x) {return x*x}

（4）属性访问表达式：两种语法，expression.identifier和expression[expression]，使用属性访问表达式的时候，'.'和'[]'前面的表达式会首先计算，如果结果是null或undefined，则会抛出类型异常错误，如果结果不是对象（或数组），JavaScript会将其转换为对象。如果命名的属性不存在，表达式的值就是undefined

（5）调用表达式：是一种调用函数或方法的语法表示，fn(0)、Math.max(1, 2)、a.sort()

（6）对象创建表达式：创建一个对象并调用一个函数（构造函数）初始化新对象的属性，new Object()，不需要传参的话圆括号可以省略，new Object

5、运算符

（1）一元运算符、赋值和三元运算符都具有从右至左的结合性

（2）运算符的副作用：赋值运算符会有副作用（如果给一个变量或属性赋值，那么使用这个变量或属性的表达式的值都会受到影响），'++'和'--'类型，因为它们包含隐形的赋值，delete运算符同样具有副作用，删除一个属性就像给这个属性赋值undefined。ex: var a = 1; b = (a++) + a // 3 这里初学者可能会计算成2，a++产生的副作用影响了后面的a

（3）JavaScript中所有的数字都是浮点型的，除法运算的结果也是浮点型，'%'运算的结果符号和第一个操作数的符号一致（-5 % 2 = -1）

（4）'+'号的转换规则优先考虑字符串连接（一个操作数是字符串，另一个操作数将会转为字符串），如果两个操作数都不是字符串的话，则进行算数加法运算。当加号和字符串和数字一起使用时，需要考虑加法的结合性对运算顺序的影响，ex：1 + 2 + 'bind' // '3bind'　　1 + (2 + 'bind') // '12bind'

（5）'=='类型转换：

　　对象转换原始值规则：对象通过toString()或valueOf()转换为原始值，JavaScript的核心内置类首先尝试使用valueOf()，再尝试使用toString()，除了日期类，日期类只使用toString()转换。那些不是JavaScript语言核心中的对象则通过各自的实现中定义的方法转换为原始值（{}=>Object()=>Object().toString()=>'[object Object]'）

　　'1' == true // true (true => 1, '1' => 1)

（6）加号运算符和比较运算符

　　加号运算符更偏爱字符串，如果其中一个操作数是字符串的话，则进行字符串连接；比较运算符更偏爱数字，只有在两个操作数都是字符串的情况下，才进行字符串连接。

　　'1' + 2 // '12'　　'11' < 2 // false

（7）in运算符

　　in运算符希望左操作数是一个字符串或可以转换成字符串，右操作数是一个对象

　　var object = {x: 1, y: 2}　　'x' in object // true　　'toString' in object // true（对象继承了toString()方法）

　　var arr = [7, 8, 9]　　'0' in arr // true　　1 in arr // true（数字转换为字符串）　　3 in arr // false（没有索引为3的元素）

（8）instanceOf运算符

　　instanceOf运算符希望左操作数是一个对象，右操作数是类（类是通过初始化它们的构造函数来定义的）。如果左操作数不是对象，将返回false；右操作数不是函数，则抛出类型错误异常。instanceOf的原理是原型链，通过原型链查找对象是否存在

　　var d = new Date()　　d instanceOf Date // true　　d instanceOf Object // true

（9）'&&'和'||'

　　常见用途：a. 有条件地执行代码 (a==b) && stop　　b. 提供默认值 function fn(p) {p = p || {}}

（10）delete运算符

　　var arr = [1,2,3]　　delete arr[2]　　2 in a // false　　arr.length // 3（delete不会改变数组长度，[1, 2, empty]）

（11）逗号运算符

　　逗号运算符是二元运算符，常用场景是在for循环中

　　for (var i = 0, j = 10; i < j; i++, j--) {console.log(i + j)}

6、语句

　　表达式是计算出一个值，语句是用来执行以使某件事发生。JavaScript程序是一系列可执行语句的集合

（1）表达式语句

　　具有副作用的表达式（赋值或函数调用）。++、--、delete、alert()

（2）复合语句和空语句

　　复合语句：　　　　　　　　　　空语句：for (i = 0; i < a.length; a[i++] = 0) ;　　使用空语句最好加上注释说明：for (i = 0; i < a.length; a[i++] = 0) /* empty */ ;

　　{

　　　var i = 1;

　　　console.log(i)　

　　}

（3）声明语句（var和function）

　　声明语句用来创建变量或函数。函数定义表达式，使用var，只有变量声明提前了，变量的初始化代码仍在原来的位置；而函数声明，函数名称和函数体均提前，可以在函数声明之前调用它

（4）条件语句

　　如果在函数中使用switch语句，可以用return代替break来中止switch语句。case关键字后可以跟任意表达式。对每个case的匹配操作是'==='比较。

（5）循环

　　JavaScript有四种循环语句：while、do/while、for、for/in。

　　for循环中三个表达式都可以省略，但是两个分号必不可少。如果省略text表达式，则是死循环。死循环的两种写法：while(true)、for(;;)

　　for (variable in object)用来更方便地遍历对象属性成员，如果object表达式为null或undefined，JavaScript解释器会跳过循环并执行后续的代码，如果表达式是一个原始值，这个原始值将会转换为与之对应的包装对象

（6）跳转

　　标签语句：identifier: statement

　　mainloop: while(token !== null) {

　　　　continue mainloop

　　}

　　当希望用break跳出非就近的循环体或switch语句时，可以用到带标签的break语句，跳出标签指定的语句

　　注意：对于一条带标签的函数定义语句来说，不能从函数内部通过标签跳转到函数外部

　　包含continue的while和for的表现行为不同，for会首先执行increment表达式再执行test表达式，而while直接执行test表达式

（7）throw语句

　　在JavaScript中，当产生运行时错误或使用throw语句时就会显示抛出异常。使用try/catch/finally可以捕获异常

　　throw expression;

　　JavaScript抛出异常时通常采用Error类型和其子类型：if (x < 0) {throw new Error('x不能是负数')}，当抛出异常时，会立即停止当前正在执行的逻辑，并跳转至就近的异常处理程序，如果抛出异常的代码块没有一条相关联的catch从句，解释器会向更高层的代码块寻找，如果没有找到任何异常处理程序，JavaScript将把异常当作程序错误来处理，并报告给用户

　　try从句定义了需要处理异常的代码块，当try从句某处发生了异常时，调用catch代码块内的逻辑，不管try中是否发生异常，finally代码块内的逻辑总会执行；不管try中是否有break、continue或return语句，finally中代码始终会执行，利用这点可以做到while循环模拟包含continue的for循环，但当循环体body中有break时情况又不同了，所以使用while来完全模拟for是不可能的

　　try{}　　catch(e){}　　finally{}

（8）with语句

　　with语句用于临时扩展作用域链。

　　with(object)

　　statement

　　这条语句将object添加到作用域链的头部，然后执行statement，最后把作用域链恢复到原始状态

　　应用场景：在对象嵌套层次很深的时候会使用with语句简化代码编写

　　document.forms[0].address.value

　　with(document.forms[0]) {

　　　　name.value = ''

　　　　address.value = ''

　　}　　

　　不用with的等价代码可以这样写：var f = document.forms[0]　　f.address.value = ''

　　只有在查找标识符的时候才会用到作用域链，创建新变量的时候不会用它

　　with(0) x=1;　　如果对象o没有x属性，那么这段代码和不使用with的代码x=1是一样的

　　尽可能避免使用with语句，因为with语句运行起来比较慢

7、对象

　　对象的属性名是字符串。对象分为：内置对象（数组、函数、日期、正则表达式）、宿主对象（HTMLElement）、自定义对象。属性分为：自有属性和继承属性。属性有3个属性特性：可写（是否可以设置该属性的值）、可枚举（是否可以通过for/in循环返回该属性）、可配置（是否可以删除或修改该属性）。对象有3个对象特性：对象的原型、对象的类、对象的扩展标记（指明了是否可以向该对象添加属性）

（1）创建对象

　　可以通过对象直接量、关键字new和Object.create()创建

　　var o  = {}　　var o = new Object()

　　Object.create()第一个参数是这个对象的原型，第二个可选参数用以对对象的属性进一步描述。var o1 = Object.create({x: 1, y: 2}) // o1继承了x和y属性　　var o2 = Object.create(null) // o2不继承任何属性和方法（包括toString()等）　　var o3 = Object.create(Object.prototype)

（2）删除属性

　　delete只能删除自有属性，不能删除继承属性。delete只是断开属性和宿主对象的联系。a = {p: {x: 1}};b = a.p;delete a.p; 执行之后b.x的值依然是1，已删除的属性的引用仍然存在，可能会造成内存泄漏。

（3）检测属性

　　in：如果对象的自有属性或继承属性中包含这个属性，返回true

　　对象的hasOwnProperty()方法：检测给定的名字是否是对象的自有属性，是则返回true

　　对象的propertyIsEnumerable()方法：检测给定的名字是自有属性且这个属性的可枚举性为true时，返回true

（5）枚举属性

　　for/in：遍历对象中所有可枚举的属性，包括自有属性和继承属性

　　Object.keys()：返回一个数组，这个数组由对象中的可枚举的自有属性组成

　　Object.getOwnPropertyNames(): 返回一个数组，这个数组由对象中的所有自有属性组成（既包括可枚举，也包括不可枚举）

（6）属性getter和setter

　　属性值为getter和setter的属性叫存取器属性

　　var o = {

　　　　data_prop: value, // 普通的数据属性

　　　　get accessor_prop() {/*函数体*/},

　　　　set accessor_prop(value) {/*函数体*/}　　//accessor_prop就是存取器属性，同时具有getter和setter方法，是读/写属性

　　}

（7）属性的特性

　　es5提供了查询和设置这些特性的API。这些API对库的开发者非常重要。因为可以通过这些API给原型对象添加方法，并设置为不可枚举，这让它们看起来更像内置方法；可以通过API给对象定义不能修改或删除的属性，借此锁定这个对象。

　　属性描述符对象：数据属性的描述符对象的属性有value、writable、enumerable、configurable；存取器属性的描述符对象的属性有get、set、enumerable、configurable

　　获取对象上某个属性的描述符：Object.getOwnPropertyDescriptors({x: 1}, 'x') // {x: {value: 1, writable: true, enumerable: true, configurable: true}}　　对于继承和不存在的属性返回undefined

　　设置属性的特性或者让新建属性具有某种特性：var o = {};Object.defineProperty(o, 'x', {value: 1, writable: true, enumerable: false, configurable: true})　　//添加一个不可枚举的属性x

　　Object.defineProperty(o, 'x', {writable: false}) //让属性x变为只读

　　Object.defineProperty(o, 'x', {get function() {return 0;}}) // o.x => 0 将数据属性修改为存取器属性

　　如果要同时创建或修改多个属性：Object.defineProperties({}, {x: {value: 1, writable: true, enumerable: true, configurable: true}, y: {value: 1, writable: true, enumerable: true, configurable: true}})

（8）对象的三个属性

　　原型属性：对象的原型属性是用来继承属性的。isPrototypeOf()方法用来检测一个对象是否是另一个对象的原型（或处于原型链中）var p = {x: 1};var o = Object.create(p);p.isPrototypeOf(o) // true

　　类属性：对象的类属性是一个字符串，用以表示对象的类型信息。默认的toString()方法可以返回类属性信息。[object class]

　　可扩展性：对象的可扩展性表示是否可以给对象添加新属性。可扩展属性的目的是将对象锁定，以避免外界干扰。

　　　　Object.isExtensible()判断该对象是否是可扩展的。Object.preventExtensions()将对象转换为不可扩展的，一旦对象转为不可扩展的，就无法再将其转为可扩展的，该方法只影响对象本身的可扩展性，如果给不可扩展的对象的原型添加属性，这个不可扩展的对象同样会继承这些属性。

　　　　Object.seal()既可以将对象设为不可扩展的，还可以将对象的自有属性设为不可配置的，也就是说不能添加新属性、已有的属性也不能删除或配置，不过已有的可写属性依然可配置。对于已经封闭（sealed）起来的对象是不能解封的，可以使用Object.isSealed()来检测对象是否封闭。

　　　　Object.freeze()将更严格地锁定对象，除了将对象设置为不可扩展和将其属性设为不可配置之外，还可以将它自有的所有数据属性设置为只读（如果对象的存取器属性具有setter方法，存取器属性将不受影响，仍可以给属性赋值调用它们），可以使用Object.isFrozen()来检测对象是否冻结。

（9）序列化对象

　　对象序列化是指将对象的状态转换为字符串，也可以将字符串还原为对象。JSON.stringify()和JSON.parse()，接受第二个可选参数

　　JSON语法是JavaScript的子集，但它并不能表达JavaScript里的所有值。

　　NaN、Infinity、-Infinity的序列化结果是null。日期对象的序列化结果是ISO格式的日期字符串，但JSON.parse()依然保留它的字符串形态，而不会将它还原为原始日期对象。函数、undefined、RegExp、Error对象不能序列化和还原，对于这些不能序列化的属性，在序列化后的字符串中会将这个属性省略掉

（10）对象方法

　　toString()：没有参数，返回调用这个方法的对象值的字符串。var s = {x: 1}.toString() // "[object Object]"　　很多类都带有自定义的toString()，比如数组转换为字符串得到的是一组带逗号的数组元素的字符串

　　toLocaleString()：这个方法返回一个表示这个对象的本地化字符串。Object中默认的toLocaleString()并不做任何本地化操作，它仅调用toString()并返回对应值。Date和Number类对toLocaleString()方法做了定制，可以用它对数字、日期、时间做本地化的转换。Array类的toLocaleString()，每个数组元素会调用toLocaleString()转换为字符串，而不是调用各自的toString()

　　toJSON()：Object.prototype实际并没有toJSON()方法，但JSON.stringify()会调用toJSON()方法

　　valueOf(): 当JavaScript需要将对象转为某种原始值而非字符串时会调用它，尤其是转换为数字的时候。有些内置类自定义了valueOf方法，比如Date.valueOf()

8、数组

（1）创建数组

　　直接量或调用构造函数Array()

（2）数组元素的读和写

　　数组是对象的特殊形式，使用方括号访问数组元素，JavaScript将指定的数字索引值转换为字符串（1变成'1'），然后将其作为属性名使用。数组的特别之处在于，当使用小于2³²的非负整数作为属性名时数组会自动维护其length属性值。

　　所有的索引都是属性名，但只有0～2³²-2之间的整数属性名才是索引。如果名字不是非负整数，它就只能当作常规的对象属性，而非数组索引。数组索引仅仅是对象属性名的一种特殊类型。

（3）稀疏数组

　　稀疏数组是包含从0开始的不连续索引的数组。如果数组是稀疏的，length属性值大于元素的个数。var a = new Array(5) // 数组没有元素，但length为5　　var a = [];a[1000]=0; // 赋值添加一个元素，但length为1001。如果用delete从数组中删除一个元素，它就变成稀疏数组。

（4）数组遍历

　　for、for/in、forEach

（5）数组方法

　　join()：不改变原数组

　　slice()：不改变原数组，var a = [1,2,3,4,5]; a.slice(-3, -2); // [3]

　　concat()：不改变原数组，concat不会扁平化数组的数组。var a = [1, 2, 3]; a.concat(4, [5, [6, 7]]) //返回[1,2,3,4,5,[6,7]]

　　toString()、toLocaleString()：不改变原数组

　　reverse()：改变原数组

　　sort()：改变原数组。不带参数调用时，数组元素以字母表顺序排序，如果数组包含undefined元素，它们会被排到数组的尾部。用数值大小排序，给sort()函数传递比较函数，该函数决定了它的两个参数在排好序的数组中的先后顺序，第一个参数在前返回小于0的数值，第一个参数在后返回大于0的数值，两个参数相等返回0。a.sort(function(a, b) {return a - b}) //从小到大　　a.sort(function(a, b) {return b - a}) // 从大到小

　　splice()：改变原数组。返回一个由删除元素组成的数组，var a = [1, 2, 3, 4, 5]; a.splice(2, 0, [1, 2]) // 返回[]，a为[1, 2, [1, 2], 3, 4, 5]　　区别于concat，splice会插入数组本身而不是数组的元素

　　push、pop、unshift、shift：改变原数组

　　ES5新方法（都不改变原数组）：

　　forEach()：forEach无法提前中止遍历，也就是说，无法像for循环那样使用break语句。如果要提前中止，必须把forEach放在一个try块中，并能抛出异常。

　　map()：将调用数组的每个元素传递给指定的函数，并返回一个数组，它包含该函数的返回值

　　filter()：filter返回的数组元素是调用数组的一个子集，传递的函数是用来逻辑判定的，该函数返回true或false，返回值为true或能转化为true的值会被添加到返回值的数组中。filter会跳过稀疏数组中缺少的元素，返回的数组总是稠密的，可以用来压缩稀疏数组的空缺。 var newArr = arr.filter(() => {return true})

　　every()、some()：数组的逻辑判定，返回true或false。every()是当数组中的所有元素调用判定函数都返回true时，才返回true；some()是当数组中至少有一个元素调用判定函数返回true，它就返回true。空数组调用every()返回true，调用some()返回false。一旦some或every确认该返回什么值它们就会停止遍历数组元素

　　reduce()、reduceRight()：

　　　　使用指定的函数将数组元素进行组合，生成单个值。reduce()第一个参数是执行化简操作的函数，第二个可选参数是一个传递给函数的初始值。如果有初始值，调用函数的第一个参数是初始值，如果没有则数组的第一个元素作为初始值。　　var sum = arr.reduce((x, y) => {return x+y}, 0)。在空数组中，不带初始值参数调用reduce会导致类型错误。如果调用reduce只有一个值，reduce只是简单地返回那个值而不会调用化简函数。

　　　　reduceRight()是从右向左处理数组

　　indexOf()、lastIndexOf()：第二个参数是可选的，它指定数组中的一个索引，从那里开始搜索。应用场景：用第二个参数查找除了第一个以外匹配的索引

（6）数组类型

　　判断是否为数组：Array.isArray()，instanceof只能用于简单的情形，还可以通过检测对象的类属性判断

var isArray = Function.isArray || function(o) {
    return typeof o === 'object' &&
         Object.prototype.toString.call(o) === '[object Array]'
}       

（7）类数组对象

　　把拥有length属性和对应非负整数属性的对象看作类数组。{'0': 'a', '1': 'b', '2': 'c', 'length': 3}。

　　可以使用Function.call方法间接地调用数组方法，Array.prototype.join.call(a, '+') // 'a+b+c'

（8）作为数组的字符串

　　字符串的行为类似与只读的数组，用方括号访问代替了charAt()调用，更简洁、可读、高效

9、函数

　　形参在函数体内像局部变量一样工作

（1）函数声明语句不能出现在循环、条件、try/catch/finally、with语句中，但是函数定义表达式可以出现在JavaScript代码的任何地方

（2）函数调用：4种方式，作为函数、作为方法、作为构造函数、通过它们的call()和apply()方法间接调用

（3）当调用函数的时候传入的实参比形参要少的时候，剩下的形参将设置为undefined，因此应当给省略的参数赋一个合理的默认值；当调用函数的时候传入的实参超过了形参个数时，没办法获得未命名值的引用，arguments对象解决了这个问题，arguments是一个类数组对象

（4）callee和caller属性：callee指代当前正在执行的函数，caller指代调用当前正在执行的函数的函数。应用：匿名函数中通过arguments.callee来递归调用自身

（5）当函数需要一个静态变量来在调用时保持某个值不变，最方便的方式就是给函数定义属性，而不是定义全局变量。uniqueInteger.counter = 0; function uniqueInteger() {return uniqueInteger.counter++}

（6）闭包：函数定义时的作用域链到函数执行时依然有效。如果一个函数定义了嵌套函数，并将它作为返回值返回或存储在某处的属性里，这时就会有一个外部引用指向这个嵌套的函数。它就不会被当做垃圾回收，并且它指向的变量绑定对象也不会被当作垃圾回收。

（7）Function()构造函数创建的函数，函数体的代码总是在全局作用域中执行

二、DOM

1、检测浏览器类型和版本的方法是使用Navigator对象

2、不严格的同源策略：

（1）同源策略给那些使用多个子域名的大站点带来了一些问题。例如：home.example.com、developer.example.com，可以设置document.domain属性为相同的值，document.domain = example.com，这样文档就有了同源性，可以互相读取属性

（2）跨域资源共享（Cross-Origin Resource Sharing）。用新的”Origin：“请求头和新的Access-Control-Allow-Origin响应头来扩展HTTP

（3）跨文档消息：允许来自一个文档的脚本可以传递文本消息到另一个文档里的脚本，而不管脚本的来源是否不同。调用window.postMessage()可以异步传递消息事件到窗口的文档里

3、window对象

（1）计时器：setTimeout()、setInterval()

（2）浏览器定位和导航

　　window.location属性引用的是Location对象，表示该窗口中当前显示的文档的URL。

　　Location对象的href属性是一个字符串，包含URL的完整文本。其他属性：protocol、host、hostname、port、pathname、Search，分别表示URL的各个部分，被称为URL分解属性

　　hash属性返回URL中的片段标识符部分，search返回的是包含问号及其之后的URL

　　location对象的assign()方法可以使窗口载入并显示你指定的URL中的文档，replace()方法也类似，但它在载入新文档之前会从浏览器历史中把当前文档删除。reload()方法可以让浏览器重新载入当前文档

（3）浏览历史

　　window对象的history属性引用的是该窗口的History对象，History对象的length属性表示浏览历史列表中的元素数量

　　History对象的back()和forward()方法与浏览器的后退和前进按钮一样，go()方法接受一个整数参数，可以在历史列表中向前（正参数）或向后（负参数）跳过任意多个页

　　如果窗口包含多个子窗口（比如iframe），子窗口的浏览历史会按时间顺序穿插在主窗口的历史中，这意味这在主窗口调用history.back()可能会导致其中一个子窗口后退，但主窗口不变

（4）浏览器和屏幕信息

　　Window对象的Navigator属性引用的是包含浏览器厂商和版本信息的Navigator对象。

　　Navigator对象有4个属性用于提供关于运行中的浏览器的版本信息，并且可以使用这些属性进行浏览器嗅探：appName、appVersion、userAgent（这个属性包含绝大部分信息，因此浏览器嗅探代码通常用它）、platform，其他属性：onLine，表示浏览器当前是否连接到网络

　　Window对象的screen属性引用的是Screen对象，它提供有关窗口显示的大小和可用的颜色数量的信息。可以用screen对象来确定web应用是否运行在一个小屏幕的设备上

（5）对话框

　　alert()：向用户显示一条消息并等待用户关闭

　　confirm()：显示一条消息，要求用户点击确定或取消，并返回一个布尔值

　　prompt()：也显示一条消息，等待用户输入字符串，并返回那个字符串

（6）Window对象的onerror属性是一个事件处理程序，当未捕获的异常传播到调用栈上时就会调用它，并把错误消息输出到浏览器的JavaScript控制台上。onerror处理程序时早期JavaScript的遗物，那时没有try/catch异常处理语句。

（7）多窗口和窗体

　　window.open()和window.close()

　　窗体可以用parent属性引用包含它的窗口或窗体的window对象：parent.history.back()，top属性引用的都是指向包含它的顶级窗口

　　iframe元素有contentWindow属性，引用该窗体的Window对象：document.getElementById('f1').contentWindow，也可以反向操作，从表示窗体的Window对象来获取该窗体的iframe元素，用window对象的frameElement属性，顶级窗口的window对象的frameElement属性为null

　　通常不需要用getElementById和contentWindow获取子窗体的引用，window对象有一个frames属性，它引用自身包含的窗口或窗体的子窗体，frames属性引用的是类数组对象，引用第一个子窗体frames[0]，引用第二个子窗体的第三个子窗体frames[1].frames[2]，窗体里运行的代码可以用parent.frames[1]引用兄弟窗体，注意frames数组里的元素是window对象，而不是iframe元素。如果指定了name或id属性，还可以用名字索引，frames['f1']

4、脚本化文档

（1）文档坐标和视口坐标

　　文档坐标 = 视口坐标 + 滚动偏移量

　　视口是实际显示文档内容的浏览器的一部分，它不包括浏览器外壳（菜单、工具条、标签页），当为鼠标事件注册事件处理程序函数的时候，报告的鼠标指针的坐标是在视口坐标系中的。

　　浏览器窗口滚动条位置：

　　　　pageXOffset和pageYOffset

　　　　正常情况下可以通过查询文档的根节点获取：document.documentElement.scorllLeft和document.documentElement.scrollTop

　　　　怪异模式下：document.body.scrollLeft和document.body.scrollTop

　　视口尺寸：

　　　　window.innerWidth（chrome下测试包含滚动条宽度）和window.innerHeight

　　　　正常情况下：document.documentElement.clientWidth（chrome下测试不包括滚动条宽度）和document.documentElement.clientHeight

　　　　怪异模式下：document.body.clientWidth和document.body.clientHeight

（2）查询元素的几何尺寸

　　调用该元素的getBoundingClientRect()方法，返回一个对象，其中left和top属性表示元素的左上角的X和Y坐标，返回的是在视口坐标中的位置，返回的坐标包含元素的边框和内边距，但不包含元素的外边距。

　　内联元素可能会由多个矩形组成，如果想查询内联元素每个独立的矩形，调用getClientRects()方法来获得一个只读的类数组对象，它的每个元素类似于getBoundingClientRect()返回的矩形对象。

　　这两个方法返回的对象并不是实时的，在用户滚动或改变浏览器窗口大小时不会更新它们。

（3）判断元素在某点

　　判定在视口的指定位置有什么元素，可以用Document对象的elementFromPoint()方法来判定，传递X和Y坐标（视口坐标），返回在指定位置的一个元素。典型的案例时将鼠标指针的坐标传递给它来判定鼠标在哪个元素上，但是鼠标事件对象已经在target属性中包含了这些信息，因此这个方法不常用。

（4）滚动

　　设置scrollLeft和scrollTop属性实现滚动

　　还可以window.scorllTo()、window.scroll()接受一个点的X和Y坐标（文档坐标），并作为滚动条的偏移量设置它们。

　　滚动让最后一页在视口可见

　　var a = document.documentElement.offsetHeight

　　var b = window.innerHeight

　　window.scrollTo(0, a-b)

　　window.scrollBy()可以实现滚动，但它的参数是相对的，是在当前滚动条的偏移量增加

　　如果想滚动到文档中某个元素可见：

　　　　可以利用getBoundingClientRect()计算元素的位置，并转换为文档坐标，然后用scrollTo()达到目的。

　　　　还可以在需要显示的元素上调用scrollIntoView()方法，默认情况下将元素的上边缘放在或尽量接近视口的上边缘，如果只传递false作为参数，它将元素的下边缘放在或接近视口的下边缘。

　　scrollIntoView()的行为与设置window.location.hash为一个命名锚点的名字后浏览器产生的行为类似

（5）关于元素尺寸、位置和溢出的更多信息

　　元素的只读属性offsetWidth和offsetHeight以css像素返回它的屏幕尺寸，返回的尺寸包含元素的边框和内边距，除去了外边距。

　　所有元素拥有offsetLeft和offsetTop属性返回元素的X和Y坐标。对于大部分元素，这些值是文档坐标，并直接指定元素的位置。但对于已定位元素的后代元素和一些其他元素（如表格单元），这些属性返回的坐标是相对于祖先元素的而非文档。offsetParent属性指定这些属性所相对的父元素，如果offsetParent为null，这些属性都是文档坐标

　　offsetWidth　　clientWidth　　scrollWidth

　　offsetHeight　  clientHeight　   scrollHeight

　　offsetLeft　　   clientLeft　　   scrollLeft

　　offsetTop　　   clientTop　　　scrollTop

　　offsetParent

　　

　　clientWidth、clientHeight类似offsetWidth、offsetHeight，不同的是它们不包括边框大小，只包含内容和它的内边距，同时如果浏览器在内边距和边框之间添加了滚动条，其返回值中也不包含滚动条。注意，类似i、code、span这些内联元素，总返回0

　　clientLeft、clientTop没什么用，返回元素的内边距的外边缘和它的边框的外边缘之间的水平距离和垂直距离，通常这些值就等于左边和上边的边框宽度，但是如果元素有滚动条，并且滚动条放置在左侧或顶部，clientLeft和clientTop也就包含了滚动条高度。对于内联元素，clientLeft和clientTop总是为0

　　scrollWidth和scrollHeight是元素的内容区域加上它的内边距再加上任何溢出内容的尺寸。当没有溢出时，这些属性和clientWidth、clientHeight是相等的。

　　scrollLeft和scrollTop指定元素的滚动条的位置

（6）HTML表单

　　选取表单和表单元素

　　getElementById()、querySelectorAll('#form input[type="radio"]')、querySelectorAll('#form input[type="radio"][name="method"]')

　　name=“address”属性的表单还可以用如下方式选取：

　　　　window.address // 不推荐　　document.address // 仅当表单有name属性时可用　　document.forms.address // 显式访问有name或id的表单　　document.forms[n] // 不推荐

　　Form对象本身的行为类似于多个表单元素组成的HTML Collection集合，也可以用name或数字序号访问：如果name为address的表单的第一个元素的name时street，document.forms.address[0]　　document.forms.address.street

　　如果要明确地选择一个表单元素，可以索引表单对象的elements属性：document.forms.address.elements[0]　　document.forms.address.elements.street

　　javascript的Form对象支持两个方法：submit()和reset()

　　Form元素有一个onsubmit事件处理程序和onreset事件处理程序，表单提交前调用onsubmit，返回false能够取消提交动作，onsubmit只能通过点击提交按钮触发，调用submit()方法不会触发onsubmit，onreset事件同理

（7）其他文档特性

　　查询选取的文本：window.getSelection().toString()、document.selection.createRange().text（IE特有的技术）

　　window对象的getSelection()方法无法返回input和textarea内部选中的文本，IE的document.selection属性可以返回文档中任意地方选中的文本

　　在文本输入域获取选取的文本可以使用如下代码：elt.value.substring(elt.selectionStart, elt.selectionEnd)

5、脚本化CSS

（1）z-index只对兄弟元素（例如：同一个容器的子元素）应用堆叠效果。可以使用定位实现类似text-shadow的效果。当想以百分比形式为元素设置总体尺寸，又想以像素单位指定边框和内边距时，可以使用边框盒模型。边框盒模型的一个可选方案是使用盒子尺寸的计算值calc()。visibility和display属性对绝对和固定定位的元素的影响是等价的，因为这些元素都不是文档布局的一部分，在隐藏和显示定位元素时一般首选visibility

（2）js中的css属性：当一个css属性在js中对应的名字是保留字时，要在其前面加上css前缀，如e.style.cssFloat

（3）查询元素的内联样式：e.style.cssText

（4）查询计算出的样式：window或document对象的getComputedStyle()方法，第一个参数是元素，第二个参数是null或空字符串，也可以是命名css伪对象的字符串，计算属性是只读的。window.getComputedStyle(e, '').fontSize

6、事件处理

（1）addEventListener()注册的事件处理程序，事件目标作为它的this值；attachEvent()注册的事件处理程序，它的this是window对象

（2）通过对象属性或HTML属性注册的事件处理程序的返回值才有意义，返回false是阻止这个事件的默认操作；通过addEventListener()或attachEvent()注册事件处理程序必须调用preventDefault()方法或设置事件对象的returnValue属性

（3）调用顺序：设置对象属性或HTML属性注册的处理程序优先调用，addEventListener()注册的处理程序按顺序调用；attachEvent()可能按任何顺序调用

（4）出了mouseenter和mouseleave外的鼠标事件都能冒泡

6、脚本化HTTP

　　var request = new XMLHttpRequest()

（1）指定请求：request.open('GET', url)　　request.setRequestHeader('Content-Type', 'text/plain')设置请求头　　request.send(null)

（2）取得响应：status、statusText　　getResponseHeader()和getAllResponseHeaders()能查询响应头　　responseText 响应主体

（3）编码请求主体：

　　表单编码的请求：对每个表单元素的名字和值执行URL编码，使用=号把编码后的名字和值分开，并使用'&'符号分开名/值对，如：find=pizza&name=0123，当以post方法提交这种表单数据时，必须设置请求头的Content-Type为application/x-www-form-urlencoded

　　JSON编码的请求：resquest.setRequestHeader('Content-Type': 'application/json')　　resquest.send(JSON.stringify(data))

　　上传文件：<input type="file">元素有一个files属性，它是File对象中的类数组对象，input.files[0]可以获取单个文件。文件类型是更通用的二进制大对象（Blob）类型中的一个子类型

　　multipart/form-data请求：当html表单同时包含文件上传元素和其他元素时，浏览器不能使用普通的表单编码而必须使用'multipart/form-data'的content-type来用post提交表单。使用FormData容易实现多部分请求主体，按需多次调用这个对象的append()方法把个体部分（字符串、File或Blob对象）添加到请求中，最后把FormData对象传递给send()中

（4）HTTP进度事件

　　当调用send()时，触发loadstart事件；当正在加载服务器的响应时，触发progress事件，如果请求快速完成，可能不会触发progress事件；当事件完成，会触发load事件。一个完成的请求不一定是成功的请求，如load事件处理程序应该检查status确定是200而不是404

　　HTTP请求无法完成有3种情况：超时，触发timeout事件；请求中止，触发abort事件；太多重定向的网络错误会阻止请求完成，触发error事件

　　对于任何请求，浏览器将只会触发load、timeout、abort和error中的一个

　　除了type和timestamp这样常用的Event对象属性外，progress事件对象还有3个有用的属性：loaded属性是目前传输的字节数值，total属性是‘Content-Length’头传输的数据的整体长度（单位是字节），如果不知道内容长度则为0，如果知道内容长度，lengthComputable属性为true，否则为false

　　上传进度事件：XMLHttpRequest对象有一个upload属性，upload属性值是个对象，x.onprogress监控下载进度，x.upload.onprogress监控上传进度

　　中止请求和超时：XMLHttpRequest对象的abort()方法来取消正在进行的HTTP请求。调用abort()方法会触发abort事件。

（5）使用script元素作为ajax传输的技术叫做JSONP，不受同源策略的影响

7、客户端存储

　　客户端存储遵循同源策略，它为我们提供了一种通信机制，例如在一个页面上填写的表单数据可以在另一个页面上显示

（1）localStorage和sessionStorage

　　两者的区别在于存储的有效期和作用域的不同

　　localStorage存储的数据是永久性的，sessionStorage存储的数据当窗口或标签页被关闭后就被删除了，注意：一些浏览器具备了重新打开最近的关闭的标签页随后恢复上一次浏览的会话功能，因此这些标签页以及与之相关的sessionStorage的有效期可能会更加长点

　　与localStorage一样，sessionStorage的作用域也被限定在文档源中，因此非同源文档无法共享sessionStorage，此外sessionStorage还被限定在窗口中，如果同源的文档渲染在不同的标签页中，它们拥有的是各自的sessionStorage，无法共享，这里值得窗口是顶级窗口，如果浏览器包含两个iframe，它们所包含的文档是同源的，那么这两者之间是可以共享sessionStorage

（2）存储api

　　setItem(name, value)、getItem(name)、removeItem(name)、clear()、length、key()

（3）存储事件（storage）

　　存储在localStorage和sessionStorage上的数据发生改变时，浏览器会在其他对该数据可见的窗口对象上触发存储事件（在对数据进行改变的窗口对象是不会触发的）

（4）Cookie

　　cookie的有效期只能持续在浏览器的会话期间，一旦用户关闭浏览器，cookie的数据就丢失了。延长cookie的有效期可以通过max-age属性（单位是秒）

　　cookie的作用域是通过文档源和文档路径确定的，但是作用域通过path和domain是可配置的。

　　cookie的secure属性，是一个布尔类型的属性，cookie默认是不安全的形式传递的，一旦cookie被标识为安全的，那就只能当浏览器和服务器通过HTTPS或其他安全协议连接的时候才能传递它