JavaScript读书笔记

鬼迷心窍 2008-01-03

展开全文

JavaScript读书笔记

以下笔记大部分整理自《JavaScript权威指南》，本文仅方便大家遇到问题时快速查询。建议大家阅读原书。

水平有限，如有错误请大家指正。

1 JavaScript基本语法

1) 读未声明的变量会产生错误。写未声明的变量会是JavaScript环境自动产生一个全局变量。

2) 对于完全等同“===”，两个null或者两个undefined是等同的；但null与undefined是不等同的。

3) 对于相等“==”， null与undefined是相等的。若值与对象比较，核心语言内部类会尝试用valueof()转换，再尝试用toString()转换。就是说valueof()会比toString()有更高的优先级。但规则不绝对，例如Date类，它会首先尝试用toString()转换。当类的这两个方法实现不一致时，在要进行类型转换时指定具体的实现方法比较安全。

4) 在比较运算中，若一个对象或值被转换成NaN（Not a Number），则永远返回false。

5) in可以检查指定字符串是否是一个对象的基本属性或方法名称；instanceof运算符返回左边的对象是否右边类的一个实例；delete可以删除一个属性，它不会影响到属性关联的对象的生存，若该属性不存在会返回true；[]可以以字符串的方式存取对象的属性。

6) typeof函数的返回值：数字——number，字符串——string，布尔值——Boolean，对象、数组、null——object，函数名——function或undefined（未定义时）。主要用来区别区别对象和原始类型。要区分对象的具体类型，用instanceof运算符。

7) 在函数体内有隐含的arguments对象，可取得所有传入的参数，可用类似数组的方式读/写各参数，length属性表示参数的个数。但函数的只读属性length表示函数实际定义的参数个数。一个名为callee的属性代表函数本身。

8) 构造函数也是函数，但它通过new调用，无返回值。函数体内通过this来取得将要初始化的对象。

9) 对象的方法可用this对对象自身进行操作，其它方面与普通的函数没有任何区别。

10) 每个类都有一个原型（prototype）对象，它具有一套属性和方法，用来共享一个类的方法和常量，还有一个constructor的属性引用构造函数。

11) JavaScript中面向对象的特性：

a) 实例属性：在构造函数创建或初始化的属性。

b) 实例方法：在构造函数中把原型对象中的一个属性设为函数来实现。

c) 类属性：构造函数本身的属性。

d) 类方法：用合适的函数作为构造函数本身的一个属性。

e) 子类：把原型对象赋值为父类的一个实例，默认父类为Object的实例。同时还要将prototype.constructor赋值为子类的构造函数自己。

f) 继承：只是在查询一个属性时自动发生，而不会在写属性时发生，就是说单写一个父类的属性时，JavaScript环境会为对象本身创建一个同名的属性，从此该属性就覆盖了父类中的属性。

12) 创建一个数组可用 new Array() 。可以在构造函数参数中指定数组的前n个元素的值。数组的元素可以具有任意类型，甚至是另外一个数组。同一数组中可以存在不同类型的元素。数组的length是可读写的。这也是缩短一个数组的唯一方法。

2 客户端JavaScript

2.1 Window类

1) Window类的实例是全局对象，用它的window或者self属性可引用它自己。

2) 一个应用程序出现的每个窗口或框架都对应一个Window对象，而且都为客户端JavaScript代码定义了一个唯一的执行环境。

3) 脚本执行过程是Web浏览器的HTML解析过程的一部分。脚本按照它们的出现顺序执行。

4) 简单的对话框可用：alert()、 confirm()、 prompt()之一。

5) 时间间隔方法为： setInterval()、 cleraInterval() 。

6) onerror属性指明错误处理的方式。 navigator属性包含Web浏览器总体信息。 screen属性包含显示器的信息。

7) 打开窗口用open()方法，返回值是被打开的窗口。调用应该明确指明是window.open()，以避免和document.open()方法混淆。同时还应该调用focus()方法使窗口成焦点保证窗口可见。opener属性是打开自己的那个窗口，若是用户手动打开，这位null。

8) 关闭窗口用window.close()方法，窗口关闭后，代表它的Window对象可能还生存，可用closed属性进行判断它是否已经被关闭。

9) 控制窗口几何大小可用moveTo()、moveBy()、resizeTo()、resizeBy()。滚动可用scrollTo、scrollBy()。

10) 成焦点和失焦点可用 focus()、blur()。

11) location属性代表当前显示文档的URL。对其赋值使浏览器装载新的URL（用Back按钮能回退到原页面）。其实，它是Location类的一个实例，它还有一个reload()方法可以装载信的URL（用Back按钮不能回退到原页面）。

12) history属性可看成是代表历史URL的一个特殊数组，它的可读length属性表明数组的长度。支持三种方法back()、forword()、go()。

13) 一个窗口中的任何框架都可以使用属性frames、parent和top引用窗口中的其它框架。

14) 若框架指定了名字，引用就会被存储到它的父Window对象的一个同名新属性中。

15) 自定义的函数和构造函数只在定义它的窗口中可见。别的窗口要先通过一个属性来引用。但JavaScript默认的函数和构造函数会在每个窗口中拥有独立副本。

16) onload()和onunload()事件分别在网页装载完成后和卸载前执行。

2.2 Document类

1) Document类的实例（即window.document）有forms[]、images[]、links[]、applets[]几大数组。也可以通过与name属性一样的Document的属性直接访问这些元素，或者通过数组的命名属性访问。如：document.forms.f1 = document.forms.[“f1”]。

2) links[]代表文档中的Link对象数组，由HTML的<a herf …>或者<area>定义，Link对象代表超级链接的URL，具有Location类的所以属性。

3) anchors[]代表文档中的Link对象数组，由HTML的<a>定义。

4) applets[]代表文档中的Link对象数组，由HTML的<applet>或<object>嵌入在文档中的Applet对象组成。

5) embeds[]代表文档中的Link对象数组，由HTML的<embed>或<object>嵌入在文档的非Applet对象组成。

6) Write()方法可以生成网页内容，但只能在文档被解释时调用，即在<script>块中调用。创建新文档的标准格式为：xxx.document.open(); xxx.document.write(“ABC”); … xxx.document.close(); 其中的open()方法是可选的， JavaScript会隐式打开一个新的文档。

7) 用Image()构造函数能产生一个屏外图像，强迫浏览器装载图像，其onload事件处理程序能在图片装载后马上执行。

2.3 Form类

1) Form类的实例代表一个HTML表单，通过Document的forms[]数组可以得到其实例。

2) elements[]数组代表表单中所有输入元素，并可通过type属性知道每个元素的具体类型。

3) submit()方法和reset()方法分别用于提交或者重置表单。但与直接点击按钮不一样，两个方法不会出发对应的onsubmit和onrest事件。

4) 如果HTML的<Form>定义了name属性，则Document对象会多存储一个同名属性，指向该Form对象。各元素的情况类似，同时如果表单中由多个HTML元素的name属性相同，这些元素会被存放到一个数组中，按元素的出现顺序排序。

2.4 Cookie类

1) 能用Document的cookie属性对Web浏览器的cookie进行操作，其属性是一个特殊的字符串属性。

2) cookie除了名值对外，还有四个可选属性：expires——有效期、path——可见路径、domain——可见域、secure——是否在安全协议间传输。

3) cookie值不能有分号、逗号或空白符，所以要用escape()方法进行编码，读取时用unescape()进行解码。

4) cookie的默认属性通过字符串“;expires=…”的形式附加，其中有效期要用Data.toGMTString()格式化。

5) 要改变一个cookie的值，用同名字和新值再设置cookie一次。要删除，将同名值、任意值加上一个过去的有效期来设置。

6) 读取一个cookie时，返回一个字符串，是name=value对的列表，用分号隔开。

2.5 DOM文档对象模型

1) 可用Document对象的implementation.hasFeature()方法查询是否支持特定的DOM特性。

2) Document中有childNodes、firstChild、lastChild、nextSibling、previousSibling来遍历各个节点。

3) Document中的getElementsByTagName()方法返回指定HTML标记类型的数组。方法的参数不分大小写，可用“*”来返回所有元素。

4) Document中的getElementsById()方法返回指定id的元素。

5) DocumentFragment是一种特殊类型的节点，自身不会出现在文档中，只作为连续节点集合的临时容器，用createDocumentFragment()创建。

2.6 CSS级联样式表

1) CSS样式由一个名/值的性质对列表指定，性质对之间用分号隔开，名称和值之间用冒号分隔。

2) 样式性质如果有“inherit”的话，说明它应该继承自己父元素的值。

3) 可用特殊快捷性质把常常在一齐使用的样式性质组合在一起。就是“快捷性质名：连续多个值”。如：font：bold italic 24pt Helvetica；。

4) CSS的规则从一个选择器开头，指定HTML元素（小写），用大括号括起属性和值。用逗号分隔开头的选择器名称表示样式都适用于它们。若无逗号分隔，表示一个标记嵌套在另一个标记时适用。还可以用“.”号开头指定HTML元素的类，HTML元素的类由HTML中的class属性指定，可混用以上的两种方法。用“#”开头指定适用于具体id的HTML元素。

5) 样式表可以放在<head>部分的<style>和</style>标记之间。或用<link>引用。可混用以上两种方法，在<style>标记范围内用@import引用。

6) 用户样式覆盖默认样式，作者样式覆盖用户样式，内联样式覆盖所有样式。一个元素上应用多个样式，最为详细规则定义的样式将覆盖不太详细规则定义样式相冲突的部分。

7) 只要position属性不是被设为static，就可以用left、top、right、bottom这些性质的任意组合来定义元素的位置。width、height定义大小，单位可以是：%、px（像素）、in（英寸）、cm（厘米）、pt（点）、em（当前字体行高）。

8) z-index默认为0，值越小越先被绘制，此规则只适用于同一容器内的子元素。

9) visibility、display都可以控制可见性，同设为none时，在常规的流布局中，visibility是分配了空间，display没有分配空间。

10) 用overflow指定超出元素边框是的处理。用clip确定显示元素的哪些部分。用rect指定具体区域。

11) 在JavaScipt中，获取了一个HTML元素后，就可以通过元素的style属性获取那个元素的CSS2Propertites对象。设置这些属性与设置HTML元素的style性质中的效果一样。但无法用JavaScript来设定样式表的信息。同时紧记，在使用CSS2Propertites对象的样式属性时，所有值都必须是字符串（要加上引号），有单位的情况也记得加上单位。CSS2Propertites没有提供查询CSS级联的方法，也没有提供判断应用于特定元素的完整样式集合的方法。

12) JavaScript中CSS性质的命名规范：去掉CSS性质名中包含的所以连字符（减号），且把原来紧接在连字符后的字母改成大写。若CSS性质对应有float属性，给属性要加上css前缀，变成cssFloat。

2.7 事件与事件处理

1) 主要的基本事件：onabor、onblur、onchange、onclick、onerror、onfocus、onkeydown、onkeypress、onkeyup、onload、onmousedown、onmouseout、onmouseover、onmouseup、onrest、onresize、onselect、onsubmit、onunload。

2) 事件处理程序被设置为JavaScript代码串，作为HTML的性质值，并在Document对象中有同名的JavaScript属性映射。当通过JavaScript进行访问时，事件处理程序的属性时函数。要通过JavaScript把一个事件处理程序赋给一个文档的元素，只要把事件处理程序属性设置为想用的函数即可，应该把函数自身赋予事件处理程序属性，而不是调用函数的结果，所以函数名称后无需加括号，或者用匿名函数。

3) 可以用JavaScript直接调用事件处理函数，但这不是模拟事件发生的真实状况，只是执行定影行为的那个属性值的函数。

4) 显式地调用事件处理函数可以通过JavaScript扩展HTML代码定义地事件处理函数（AOP？！），如： var oldHandler = b.onclick; function newHandler(){…} b.onclick = function() {oldHandler(); newHandler()} 。

5) 如果浏览器执行某种默认动作来相应一个事件，那么返回false可以阻止浏览器执行那个动作。一个例外是鼠标移动到一个超链上，要阻止默认动作，onmouseover事件处理程序要返回true。

6) HTML性质的事件处理程序作用域的头是调用的对象，下一个是触发事件处理程序的事件对象，还会延伸到包容层，最终到达Window对象。同时，作用链的精确构成尚未标准化，不同的浏览器有不同的实现。理想的方法是让它们只调用在别的地方定义的全局函数。

7) 在IE4~6中，用Event对象提供发生事件的详细情况，它是Window对象的一个属性（全局）。

8) 利用onPropertyChange事件，可捕捉多种情况，例如键盘输入、粘贴等，是捕捉对象内容改变的良好方式。