《javascript高级程序设计（第三版）》（2）

[caizhendi]

2020.04.01

阅读进度:第六章 6.2

1.理解对象

ECMA-262 把对象定义为：“无序属性的集合，其属性可以包含基本值、对象或者函数。”这就相当于说对象是一组没有特定顺序的值。我们可以把 ECMAScript 的对象想象成散列表：无非就是一组名值对，其中值可以是数据或函数。

1.1属性类型

ECMAScript 中有两种属性：数据属性和访问器属性。

1.1.1数据属性

数据属性包含一个数据值的位置。在这个位置可以读取和写入值。
[[Configurable]]：表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性。像前面例子中那样直接在对象上定义的属性，它们的这个特性默认值为 true。
[[Enumerable]]：表示能否通过for-in循环返回属性。像前面例子中那样直接在对象上定义的属性，它们的这个特性默认值为 true。
[[Writable]]：表示能否修改属性的值。像前面例子中那样直接在对象上定义的属性，它们的这个特性默认值为 true。
[[Value]]：包含这个属性的数据值。读取属性值的时候，从这个位置读；写入属性值的时候，把新值保存在这个位置。这个特性的默认值为undefined。对于像前面例子中那样直接在对象上定义的属性，它们[[Configurable]]、[[Enumerable]]和[[Writable]]特性都被设置为 true，而[[Value]]特性被设置为指定的值。
要修改属性默认的特性，必须使用 ECMAScript 5的Object.defineProperty()方法。这个方法接收三个参数：属性所在的对象、属性的名字和一个描述符对象。其中，描述符（descriptor）对象的属性必须是：configurable、enumerable、writable和value。设置其中的一或多个值，可以修改对应的特性值。例子见P140
注：一旦把属性定义为不可配置的，就不能再把它变回可配置了。可以多次调用Object.defineProperty()方法修改同一个属性，但在把configurable特性设置为 false 之后就会有限制了

1.1.2访问器属性

访问器属性不包含数据值；它们包含一对儿 getter 和 setter 函数。
访问器属性有如下 4 个特性。

• [[Configurable]]：表示能否通过 delete 删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为数据属性。对于直接在对象上定义的属性，这个特性的默认值为true。
• [[Enumerable]]：表示能否通过 for-in 循环返回属性。对于直接在对象上定义的属性，这个特性的默认值为 true。
• [[Get]]：在读取属性时调用的函数。默认值为 undefined。
• [[Set]]：在写入属性时调用的函数。默认值为 undefined。
  访问器属性不能直接定义，必须使用Object.defineProperty()来定义。例子见P141
  不一定非要同时指定 getter 和 setter。只指定 getter 意味着属性是不能写，尝试写入属性会被忽略。在严格模式下，尝试写入只指定了getter函数的属性会抛出错误。类似地，只指定setter函数的属性也不能读，否则在非严格模式下会返回undefined，而在严格模式下会抛出错误。
  兼容见P142

  2.定义多个属性

  ECMAScript 5又定义了一个Object.defineProperties()方法。利用这个方法可以通过描述符一次定义多个属性。这个方法接收两个对象参数：第一个对象是要添加和修改其属性的对象，第二个对象的属性与第一个对象中要添加或修改的属性一一对应。例子见P142底

  3.读取属性的特性

  使用 ECMAScript5的Object.getOwnPropertyDescriptor()方法，可以取得给定属性的描述符。这个方法接收两个参数：属性所在的对象和要读取其描述符的属性名称。返回值是一个对象，如果是访问器属性，这个对象的属性有 configurable、enumerable、get 和 set；如果是数据属性，这个对象的属性有configurable、enumerable、writable 和 value。例子见P143

[caizhendi]

2020.04.02

阅读进度:第六章 6.2.3

1.创建对象

1.1工厂模式

工厂模式是软件工程领域一种广为人知的设计模式，这种模式抽象了创建具体对象的过程。见P144

function createPerson(name, age, job){
 var o = new Object();
 o.name = name;
 o.age = age;
 o.job = job;
 o.sayName = function(){
 alert(this.name);
 };
 return o;
}
var person1 = createPerson("Nicholas", 29, "Software Engineer");
var person2 = createPerson("Greg", 27, "Doctor"); 

工厂模式虽然解决了创建多个相似对象的问题，但却没有解决对象识别的问题（即怎样知道一个对象的类型）。

1.2构造函数模式

可以创建自定义的构造函数，从而定义自定义对象类型的属性和方法。例子见P145

function Person(name, age, job){
 this.name = name;
 this.age = age;
 this.job = job;
 this.sayName = function(){
 alert(this.name);
 };
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");

构造函数始终都应该以一个大写字母开头，而非构造函数则应该以一个小写字母开头。这个做法借鉴自其他 OO 语言，主要是为了区别于ECMAScript中的其他函数；因为构造函数本身也是函数，只不过可以用来创建对象而已。
创建自定义的构造函数意味着将来可以将它的实例标识为一种特定的类型；而这正是构造函数模式胜过工厂模式的地方。

1.2.1将构造函数当作函数

构造函数与其他函数的唯一区别，就在于调用它们的方式不同。任何函数，只要通过new操作符来调用，那它就可以作为构造函数；而任何函数，如果不通过 new 操作符来调用，那它跟普通函数也不会有什么两样。例子见P146

1.2.2构造函数的问题

构造函数模式虽然好用，但也并非没有缺点。使用构造函数的主要问题，就是每个方法都要在每个实例上重新创建一遍。通过把函数定义转移到构造函数外部来解决这个问题。

function Person(name, age, job){
 this.name = name;
 this.age = age;
 this.job = job;
 this.sayName = sayName;
}
function sayName(){
 alert(this.name);
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor"); 

但又存在：在全局作用域中定义的函数实际上只能被某个对象调用，这让全局作用域有点名不副实。而更让人无法接受的是：如果对象需要定义很多方法，那么就要定义很多个全局函数。

[caizhendi]

2020.04.04

阅读进度:第六章 6.2.3.2 （原型与 in 操作符）P152

1.原型模式

我们创建的每个函数都有一个 prototype（原型）属性，这个属性是一个指针，指向一个对象，而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法。例子见P147
与构造函数模式不同的是，新对象的这些属性和方法是由所有实例共享的。换句话说， person1和person2 访问的都是同一组属性和同一个sayName()函数。要理解原型模式的工作原理，必须先理解ECMAScript中原型对象的性质。

1.1 理解原型对象

只要创建了一个新函数，就会根据一组特定的规则为该函数创建一个prototype属性，这个属性指向函数的原型对象。在默认情况下，所有原型对象都会自动获得一个 constructor（构造函数）属性，这个属性包含一个指向 prototype属性所在函数的指针。就拿前面的例子来说， Person.prototype. constructor 指向 Person。而通过这个构造函数，我们还可继续为原型对象添加其他属性和方法。图见P148
要格外注意的是，虽然这两个实例都不包含属性和方法，但我们却可以调用person1.sayName()。这是通过查找对象属性的过程来实现的。
虽然在所有实现中都无法访问到[[Prototype]]，但可以通过 isPrototypeOf()方法来确定对象之间是否存在这种关系。从本质上讲，如果[[Prototype]]指向调用 isPrototypeOf()方法的对象（Person.prototype），那么这个方法就返回 true，如下所示：

alert(Person.prototype.isPrototypeOf(person1)); //true 
alert(Person.prototype.isPrototypeOf(person2)); //true 
ECMAScript 5 增加了一个新方法，叫 Object.getPrototypeOf()，在所有支持的实现中，这个方法返回[[Prototype]]的值。
alert(Object.getPrototypeOf(person1) == Person.prototype); //true
alert(Object.getPrototypeOf(person1).name); //"Nicholas" 

每当代码读取某个对象的某个属性时，都会执行一次搜索，目标是具有给定名字的属性。搜索首先从对象实例本身开始。如果在实例中找到了具有给定名字的属性，则返回该属性的值；如果没有找到，则继续搜索指针指向的原型对象，在原型对象中查找具有给定名字的属性。如果在原型对象中找到了这个属性，则返回该属性的值。也就是说，在我们调用person1.sayName()的时候，会先后执行两次搜索。首先，解析器会问：“实例 person1有sayName属性吗？”答：“没有。”然后，它继续搜索，再问：“person1 的原型有 sayName 属性吗？”答：“有。”于是，它就读取那个保存在原型对象中的函数。当我们调用person2.sayName()时，将会重现相同的搜索过程，得到相同的结果。而这正是多个对象实例共享原型所保存的属性和方法的基本原理。
虽然可以通过对象实例访问保存在原型中的值，但却不能通过对象实例重写原型中的值。如果我们在实例中添加了一个属性，而该属性与实例原型中的一个属性同名，那我们就在实例中创建该属性，该属性将会屏蔽原型中的那个属性。例子见P149底
当为对象实例添加一个属性时，这个属性就会屏蔽原型对象中保存的同名属性；换句话说，添加这个属性只会阻止我们访问原型中的那个属性，但不会修改那个属性。即使将这个属性设置为null，也只会在实例中设置这个属性，而不会恢复其指向原型的连接。不过，使用 delete操作符则可以完全删除实例属性，从而让我们能够重新访问原型中的属性，见P150

delete person1.name; alert(person1.name); 

使用 hasOwnProperty()方法可以检测一个属性是存在于实例中，还是存在于原型中。这个方法（不要忘了它是从 Object继承来的）只在给定属性存在于对象实例中时，才会返回 true。
P151图展示了上面例子在不同情况下的实现与原型的关系（为了简单起见，图中省略了与Person构造函数的关系）。

[hzjjg]

牛逼

Get Outlook for Androidhttps://aka.ms/ghei36

---

From: caizhendi notifications@github.com Sent: Saturday, April 4, 2020 5:42:50 PM To: caizhendi/blog blog@noreply.github.com Cc: Subscribed subscribed@noreply.github.com Subject: Re: [caizhendi/blog] 《javascript高级程序设计（第三版）》（2） (#2)

2020.04.04 阅读进度:第六章 6.2.3.2 （原型与 in 操作符）P152 1.原型模式 我们创建的每个函数都有一个 prototype（原型）属性，这个属性是一个指针，指向一个对象，而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法。例子见P147 与构造函数模式不同的是，新对象的这些属性和方法是由所有实例共享的。换句话说， person1 和 person2 访问的都是同一组属性和同一个 sayName()函数。要理解原型模式的工作原理，必须先理解 ECMAScript 中原型对象的性质。 1.1 理解原型对象 只要创建了一个新函数，就会根据一组特定的规则为该函数创建一个 prototype 属性，这个属性指向函数的原型对象。在默认情况下，所有原型对象都会自动获得一个 constructor （构造函数）属性，这个属性包含一个指向 prototype 属性所在函数的指针。就拿前面的例子来说， Person.prototype. constructor 指向 Person。而通过这个构造函数，我们还可继续为原型对象添加其他属性和方法。图见P148 要格外注意的是，虽然这两个实例都不包含属性和方法，但我们却可以调用 person1.sayName()。这是通过查找对象属性的过程来实现的。 虽然在所有实现中都无法访问到[[Prototype]]，但可以通过 isPrototypeOf()方法来确定对象之间是否存在这种关系。从本质上讲，如果[[Prototype]]指向调用 isPrototypeOf()方法的对象（Person.prototype），那么这个方法就返回 true，如下所示： alert(Person.prototype.isPrototypeOf(person1)); //true alert(Person.prototype.isPrototypeOf(person2)); //true ECMAScript 5 增加了一个新方法，叫 Object.getPrototypeOf()，在所有支持的实现中，这个方法返回[[Prototype]]的值。 alert(Object.getPrototypeOf(person1) == Person.prototype); //true alert(Object.getPrototypeOf(person1).name); //"Nicholas" 每当代码读取某个对象的某个属性时，都会执行一次搜索，目标是具有给定名字的属性。搜索首先从对象实例本身开始。如果在实例中找到了具有给定名字的属性，则返回该属性的值；如果没有找到，则继续搜索指针指向的原型对象，在原型对象中查找具有给定名字的属性。如果在原型对象中找到了这个属性，则返回该属性的值。也就是说，在我们调用 person1.sayName()的时候，会先后执行两次搜索。首先，解析器会问：“实例 person1 有 sayName 属性吗？”答：“没有。”然后，它继续搜索，再问：“person1 的原型有 sayName 属性吗？”答：“有。”于是，它就读取那个保存在原型对象中的函数。当我们调用 person2.sayName()时，将会重现相同的搜索过程，得到相同的结果。而这正是多个对象实例共享原型所保存的属性和方法的基本原理。 虽然可以通过对象实例访问保存在原型中的值，但却不能通过对象实例重写原型中的值。如果我们在实例中添加了一个属性，而该属性与实例原型中的一个属性同名，那我们就在实例中创建该属性，该属性将会屏蔽原型中的那个属性。例子见P149底 当为对象实例添加一个属性时，这个属性就会屏蔽原型对象中保存的同名属性；换句话说，添加这个属性只会阻止我们访问原型中的那个属性，但不会修改那个属性。即使将这个属性设置为 null，也只会在实例中设置这个属性，而不会恢复其指向原型的连接。不过，使用 delete 操作符则可以完全删除实例属性，从而让我们能够重新访问原型中的属性，见P150 delete person1.name; alert(person1.name); 使用 hasOwnProperty()方法可以检测一个属性是存在于实例中，还是存在于原型中。这个方法（不要忘了它是从 Object 继承来的）只在给定属性存在于对象实例中时，才会返回 true。 P151图展示了上面例子在不同情况下的实现与原型的关系（为了简单起见，图中省略了与 Person 构造函数的关系）。

― You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHubhttps://nam11.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fcaizhendi%2Fblog%2Fissues%2F2%23issuecomment-609003908&data=02%7C01%7C%7Cecd81a72744548ed71f108d7d87c8b19%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637215901724282214&sdata=dm30s%2BQJYxZvKdiq2rOQYPm6JZVtM%2F%2B3YZXPYdyYXG0%3D&reserved=0, or unsubscribehttps://nam11.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FADNAJT2CRH2SPWEEYBP7DA3RK36JVANCNFSM4LY6BL3Q&data=02%7C01%7C%7Cecd81a72744548ed71f108d7d87c8b19%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637215901724282214&sdata=YKz7uRVH%2F2fQvAYPi0q7gnZbsNRCIu8v64%2BGXSYD7DY%3D&reserved=0.

[caizhendi]

2020.04.06

阅读进度:第六章 6.2.4 P159

1.原型与 in 操作符

有两种方式使用 in 操作符：单独使用和在 for-in 循环中使用。在单独使用时，in操作符会在通过对象能够访问给定属性时返回true，无论该属性存在于实例中还是原型中。例子见P152
同时使用 hasOwnProperty()方法和in操作符，就可以确定该属性到底是存在于对象中，还是存在于原型中，由于 in 操作符只要通过对象能够访问到属性就返回 true，hasOwnProperty()只在属性存在于实例中时才返回 true，因此只要 in 操作符返回 true 而 hasOwnProperty()返回false，就可以确定属性是原型中的属性。例子见P152底，P153顶
在使用 for-in循环时，返回的是所有能够通过对象访问的、可枚举的（enumerated）属性，其中既包括存在于实例中的属性，也包括存在于原型中的属性。屏蔽了原型中不可枚举属性（即将[[Enumerable]]标记为 false 的属性）的实例属性也会在for-in循环中返回，因为根据规定，所有开发人员定义的属性都是可枚举的——只有在 IE8 及更早版本中例外。 IE 早期版本的实现中存在一个bug，即屏蔽不可枚举属性的实例属性不会出现在 for-in 循环中。例子见P153
兼容性：在 IE中，由于其实现认为原型的toString()方法被打上了值为false的[[Enumerable]]标记，因此应该跳过 该属性，结果我们就不会看到警告框。该 bug 会影响默认不可枚举的所有属性和方法，包括： hasOwnProperty()、propertyIsEnumerable()、toLocaleString()、toString()和 valueOf()。ECMAScript 5 也将 constructor和prototype属性的[[Enumerable]]特性设置为false，但并不是所有浏览器都照此实现。
要取得对象上所有可枚举的实例属性，可以使用 ECMAScript 5 的 Object.keys()方法。这个方法 接收一个对象作为参数，返回一个包含所有可枚举属性的字符串数组。例子见P154上
如果是通过实例调用，则Object.keys()返回的数组只包含"name"和"age"这两个实例属性。 如果你想要得到所有实例属性，无论它是否可枚举，都可以使用 Object.getOwnPropertyNames()方法。例子见P154 注意结果中包含了不可枚举的 constructor 属性。Object.keys()和Object.getOwnPropertyNames()方法都可以用来替代for-in循环。支持这两个方法的浏览器有 IE9+、Firefox 4+、Safari 5+、Opera 12+和 Chrome。

2.更简单的原型语法

读者大概注意到了，前面例子中每添加一个属性和方法就要敲一遍Person.prototype。为减少不必要的输入，也为了从视觉上更好地封装原型的功能，更常见的做法是用一个包含所有属性和方法的对象字面量来重写整个原型对象，如下面的例子所示。

function Person(){
}
Person.prototype = {
 name : "Nicholas",
 age : 29,
 job: "Software Engineer",
 sayName : function () {
 alert(this.name);
 }
};

在上面的代码中，我们将 Person.prototype 设置为等于一个以对象字面量形式创建的新对象。 最终结果相同，但有一个例外：constructor属性不再指向 Person 了。前面曾经介绍过，每创建一 个函数，就会同时创建它的prototype对象，这个对象也会自动获得 constructor 属性。而我们在 这里使用的语法，本质上完全重写了默认的 prototype 对象，因此constructor属性也就变成了新 对象的 constructor 属性（指向 Object 构造函数），不再指向 Person 函数。此时，尽管 instanceof 操作符还能返回正确的结果，但通过constructor 已经无法确定对象的类型了。例子见P155
在此，用 instanceof 操作符测试 Object 和 Person 仍然返回 true，但 constructor 属性则 等于 Object 而不等于 Person 了。如果 constructor 的值真的很重要，可以像下面这样特意将它设 置回适当的值。

function Person(){
}
Person.prototype = {
 constructor : Person,
 name : "Nicholas",
 age : 29,
 job: "Software Engineer",
 sayName : function () {
 alert(this.name);
 }
};

注意，以这种方式重设constructor属性会导致它的[[Enumerable]]特性被设置为true。默认情况下，原生的constructor属性是不可枚举的，因此如果你使用兼容 ECMAScript 5 的 JavaScript 引 擎，可以试一试 Object.defineProperty()。

//重设构造函数，只适用于 ECMAScript 5 兼容的浏览器
Object.defineProperty(Person.prototype, "constructor", {
 enumerable: false,
 value: Person
});

3.原型的动态性

由于在原型中查找值的过程是一次搜索，因此我们对原型对象所做的任何修改都能够立即从实例上反映出来——即使是先创建了实例后修改原型也照样如此。

var person = new Person();
Person.prototype.sayHi = function(){
 alert("hi");
};
person.sayHi(); //"hi"（没有问题！）

以上代码先创建了 Person的一个实例，并将其保存在 person 中。然后，下一条语句在 Person. prototype 中添加了一个方法sayHi()。即使person实例是在添加新方法之前创建的，但它仍然可以访问这个新方法。其原因可以归结为实例与原型之间的松散连接关系。当我们调用 person.sayHi()时，首先会在实例中搜索名为 sayHi 的属性，在没找到的情况下，会继续搜索原型。因为实例与原型之间的连接只不过是一个指针，而非一个副本，因此就可以在原型中找到新的 sayHi 属性并返回保存在那里的函数。尽管可以随时为原型添加属性和方法，并且修改能够立即在所有对象实例中反映出来，但如果是重写整个原型对象，那么情况就不一样了。我们知道，调用构造函数时会为实例添加一个指向最初原型的[[Prototype]]指针，而把原型修改为另外一个对象就等于切断了构造函数与最初原型之间的联系。 请记住：实例中的指针仅指向原型，而不指向构造函数。例子见P156 （有点不理解 需加强）

4.原生对象的原型

原型模式的重要性不仅体现在创建自定义类型方面，就连所有原生的引用类型，都是采用这种模式创建的。所有原生引用类型（Object、Array、String，等等）都在其构造函数的原型上定义了方法。
通过原生对象的原型，不仅可以取得所有默认方法的引用，而且也可以定义新方法。可以像修改自定义对象的原型一样修改原生对象的原型，因此可以随时添加方法。
注意：尽管可以这样做，但我们不推荐在产品化的程序中修改原生对象的原型。如果因某个实现中缺少某个方法，就在原生对象的原型中添加这个方法，那么当在另一个支持该方法的实现中运行代码时，就可能会导致命名冲突。而且，这样做也可能会意外地重写原生方法。

5.原型对象的问题

原型模式缺点：它省略了为构造函数传递初始化参数这一环节，结果所有实例在默认情况下都将取得相同的属性值。虽然这会在某种程度上带来一些不方便，但还不是原型的最大问题。原型模式的最大问题是由其共享的本性所导致的。例子见P158

[caizhendi]

2020.04.07

阅读进度:第六章 6.3 P162

1.造函数模式和原型模式

创建自定义类型的最常见方式，就是组合使用构造函数模式与原型模式。构造函数模式用于定义实例属性，而原型模式用于定义方法和共享的属性。另外，这种混成模式还支持向构造函数传递参数；可谓是集两种模式之长。例子见P159

function Person(name, age, job){
 this.name = name;
 this.age = age;
 this.job = job;
 this.friends = ["Shelby", "Court"];
}
Person.prototype = {
 constructor : Person,
 sayName : function(){
 alert(this.name);
 }
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
person1.friends.push("Van");
alert(person1.friends); //"Shelby,Count,Van"
alert(person2.friends); //"Shelby,Count"
alert(person1.friends === person2.friends); //false
alert(person1.sayName === person2.sayName); //true

这种构造函数与原型混成的模式，是目前在ECMAScript 中使用最广泛、认同度最高的一种创建自定义类型的方法。可以说，这是用来定义引用类型的一种默认模式。

2. 动态原型模式

有其他 OO 语言经验的开发人员在看到独立的构造函数和原型时，很可能会感到非常困惑。动态原型模式正是致力于解决这个问题的一个方案，它把所有信息都封装在了构造函数中，而通过在构造函数中初始化原型（仅在必要的情况下），又保持了同时使用构造函数和原型的优点。换句话说，可以通过检查某个应该存在的方法是否有效，来决定是否需要初始化原型。例子见P159底

3. 寄生构造函数模式

这种模式 的基本思想是创建一个函数，该函数的作用仅仅是封装创建对象的代码，然后再返回新创建的对象；但 从表面上看，这个函数又很像是典型的构造函数。例子见P160 除了使用 new操作符并把使用的包装函数叫做构造函数之外，这个模式跟工厂模式其实是一模一样的。构造函数在不返回值的情况下，默认会返回新对象实例。而通过在构造函数的末尾添加一个return语句，可以重写调用构造函数时返回的值。 这个模式可以在特殊的情况下用来为对象创建构造函数。假设我们想创建一个具有额外方法的特殊数组。由于不能直接修改Array构造函数，因此可以使用这个模式。例子见P161
关于寄生构造函数模式，有一点需要说明：首先，返回的对象与构造函数或者与构造函数的原型属性之间没有关系；也就是说，构造函数返回的对象与在构造函数外部创建的对象没有什么不同。为此， 不能依赖 instanceof 操作符来确定对象类型。由于存在上述问题，我们建议在可以使用其他模式的情况下，不要使用这种模式。

4. 稳妥构造函数模式

所谓稳妥对象，指的是没有公共属性，而且其方法也不引用 this 的对象。稳妥对象最适合在一些安全的环境中（这些环境中会禁止使用this和new），或者在防止数据被其他应用程序（如Mashup程序）改动时使用。稳妥构造函数遵循与寄生构造函数类似的模式，但有两点不同：一是新创建对象的 实例方法不引用 this；二是不使用new操作符调用构造函数。按照稳妥构造函数的要求，可以将前面的Person构造函数重写如下。例子见P161底

[caizhendi]

2020.04.08

阅读进度:第六章 6.3.3 P168

1.继承

继承是 OO 语言中的一个最为人津津乐道的概念。许多 OO 语言都支持两种继承方式：接口继承和实现继承。接口继承只继承方法签名，而实现继承则继承实际的方法。ECMAScript只支持实现继承，而且其实现继承主要是依靠原型链 来实现的。

1.1原型链

ECMAScript 中描述了原型链的概念，并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。简单回顾一下构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。 实现原型链有一种基本模式，例子见P163顶 详解见163

1.1.1 别忘记默认的原型

所有函数的默认原型都是 Object的实例，因此默认原 型都会包含一个内部指针，指向 Object.prototype。

1.1.2 确定原型和实例的关系

可以通过两种方式来确定原型和实例之间的关系。第一种方式是使用instanceof操作符，只要用这个操作符来测试实例与原型链中出现过的构造函数，结果就会返回 true。例子见P165 object instanceof constructor
第二种方式是使用isPrototypeOf()方法。同样，只要是原型链中出现过的原型，都可以说是该原型链所派生的实例的原型，因此isPrototypeOf()方法也会返回 true。例子见P165

1.1.3 谨慎地定义方法

给原型添加方法的代码一定要放在替换原型的语句之后。

function SuperType(){
 this.property = true;
}
SuperType.prototype.getSuperValue = function(){
 return this.property;
};
function SubType(){
 this.subproperty = false;
}
//继承了 SuperType
SubType.prototype = new SuperType();
//添加新方法
SubType.prototype.getSubValue = function (){
 return this.subproperty;
};
//重写超类型中的方法
SubType.prototype.getSuperValue = function (){
 return false;
};
var instance = new SubType();
alert(instance.getSuperValue()); //false

还有一点需要提醒读者，即在通过原型链实现继承时，不能使用对象字面量创建原型方法。因为这 样做就会重写原型链。例子见P166

function SuperType(){
 this.property = true;
}
SuperType.prototype.getSuperValue = function(){
 return this.property;
};
function SubType(){
 this.subproperty = false;
}
//继承了 SuperType
SubType.prototype = new SuperType();
//使用字面量添加新方法，会导致上一行代码无效
SubType.prototype = {
 getSubValue : function (){
 return this.subproperty;
 },
 someOtherMethod : function (){
 return false;
 }
};
var instance = new SubType();
alert(instance.getSuperValue()); //error!

以上代码展示了刚刚把SuperType的实例赋值给原型，紧接着又将原型替换成一个对象字面量而导致的问题。由于现在的原型包含的是一个 Object的实例，而非 SuperType 的实例，因此我们设想中的原型链已经被切断——SubType 和 SuperType 之间已经没有关系了。

1.1.4原型链的问题

最主要的问题来自包含引用类型值的原型。我们前面介绍过包含引用类型值的原型属性会被所有实例共享；而 这也正是为什么要在构造函数中，而不是在原型对象中定义属性的原因。在通过原型来实现继承时，原 型实际上会变成另一个类型的实例。例子见P167
原型链的第二个问题是：在创建子类型的实例时，不能向超类型的构造函数中传递参数。

2.借用构造函数

在解决原型中包含引用类型值所带来问题的过程中，开发人员开始使用一种叫做借用构造函数（constructor stealing）的技术（有时候也叫做伪造对象或经典继承）。这种技术的基本思想相当简单，即在子类型构造函数的内部调用超类型构造函数。。别忘了，函数只不过是在特定环境中执行代码的对象，因此通过使用 apply()和call()方法也可以在（将来）新创建的对象上执行构造函数。例子见P167底

function SuperType(){
 this.colors = ["red", "blue", "green"];
}
function SubType(){
 //继承了 SuperType
 SuperType.call(this);
}
var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
var instance2 = new SubType();
alert(instance2.colors); //"red,blue,green"

代码中加注释的那一行代码“借调”了超类型的构造函数。通过使用call()方法（或apply()方法也可以），我们实际上是在（未来将要）新创建的 SubType 实例的环境下调用了SuperType构造函数。这样一来，就会在新SubType对象上执行SuperType()函数中定义的所有对象初始化代码。结果，SubType的每个实例就都会具有自己的 colors属性的副本了。

2.1 传递参数

相对于原型链而言，借用构造函数有一个很大的优势，即可以在子类型构造函数中向超类型构造函数传递参数。

2.2 借用构造函数的问题

如果仅仅是借用构造函数，那么也将无法避免构造函数模式存在的问题——方法都在构造函数中定义，因此函数复用就无从谈起了。而且，在超类型的原型中定义的方法，对子类型而言也是不可见的，结果所有类型都只能使用构造函数模式。考虑到这些问题，借用构造函数的技术也是很少单独使用的。

[caizhendi]

2020.04.09

阅读进度:第七章 175

1.组合继承

有时候也叫做伪经典继承，指的是将原型链和借用构造函数的 技术组合到一块，从而发挥二者之长的一种继承模式。其背后的思路是使用原型链实现对原型属性和方 法的继承，而通过借用构造函数来实现对实例属性的继承。例子见P168底

function SuperType(name){
 this.name = name;
 this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
 alert(this.name);
};
function SubType(name, age){
 //继承属性
 SuperType.call(this, name);

 this.age = age;
}
//继承方法
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function(){
 alert(this.age);
};
var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
instance1.sayName(); //"Nicholas";
instance1.sayAge(); //29
var instance2 = new SubType("Greg", 27);
alert(instance2.colors); //"red,blue,green"
instance2.sayName(); //"Greg";
instance2.sayAge(); //27

组合继承避免了原型链和借用构造函数的缺陷，融合了它们的优点，成为JavaScript中最常用的继承模式。而且，instanceof和isPrototypeOf()也能够用于识别基于组合继承创建的对象。

2.原型式继承

他的想法是借助原型可以基于已有的对象创建新对象，同时还不必因此创建自定义类型。为了达到这个目的，他给出了如下函数。

function object(o){
 function F(){}
 F.prototype = o;
 return new F();
}

在 object()函数内部，先创建了一个临时性的构造函数，然后将传入的对象作为这个构造函数的原型，最后返回了这个临时类型的一个新实例。从本质上讲，object()对传入其中的对象执行了一次浅复制。例子见P170
ECMAScript 5通过新增Object.create()方法规范化了原型式继承。这个方法接收两个参数：一个用作新对象原型的对象和（可选的）一个为新对象定义额外属性的对象。在传入一个参数的情况下，Object.create()与 object()方法的行为相同。例子见P170
Object.create()方法的第二个参数与Object.defineProperties()方法的第二个参数格式相同：每个属性都是通过自己的描述符定义的。以这种方式指定的任何属性都会覆盖原型对象上的同名属 性。例子见P171

3.寄生式继承

寄生式继承的思路与寄生构造函数和工厂模式类似，即创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后再像真地是它做了所有工作一样返回对象。以下代码示范了寄生式继承模式。

function createAnother(original){
 var clone = object(original); //通过调用函数创建一个新对象
 clone.sayHi = function(){ //以某种方式来增强这个对象
 alert("hi");
 };
 return clone; //返回这个对象
}

在主要考虑对象而不是自定义类型和构造函数的情况下，寄生式继承也是一种有用的模式。前面示范继承模式时使用的object()函数不是必需的；任何能够返回新对象的函数都适用于此模式。

4.寄生组合式继承

组合继承最大的问题就是无论什么情况下，都会调用两次超类型构造函数：一次是在创建子类型原型的时候，另一次是在子类型构造函数内部。没错，子类型最终会包含超类型对象的全部实例属性，但我们不得不在调用子 类型构造函数时重写这些属性。例子见P172
所谓寄生组合式继承，即通过借用构造函数来继承属性，通过原型链的混成形式来继承方法。其背后的基本思路是：不必为了指定子类型的原型而调用超类型的构造函数，我们所需要的无非就是超类型原型的一个副本而已。本质上，就是使用寄生式继承来继承超类型的原型，然后再将结果指定给子类型的原型。寄生组合式继承的基本模式如下所示。

function inheritPrototype(subType, superType){
 var prototype = object(superType.prototype); //创建对象
 prototype.constructor = subType; //增强对象
 subType.prototype = prototype; //指定对象
}

5.小结

在没有类的情况下，可以采用下列模式创建对象。

• 工厂模式，使用简单的函数创建对象，为对象添加属性和方法，然后返回对象。这个模式后来被构造函数模式所取代。
• 构造函数模式，可以创建自定义引用类型，可以像创建内置对象实例一样使用new操作符。不过，构造函数模式也有缺点，即它的每个成员都无法得到复用，包括函数。由于函数可以不局限于任何对象（即与对象具有松散耦合的特点），因此没有理由不在多个对象间共享函数。
• 原型模式，使用构造函数的prototype属性来指定那些应该共享的属性和方法。组合使用构造函数模式和原型模式时，使用构造函数定义实例属性，而使用原型定义共享的属性和方法。 下列可供选择的继承模式
• 原型式继承，可以在不必预先定义构造函数的情况下实现继承，其本质是执行对给定对象的浅 复制。而复制得到的副本还可以得到进一步改造。
• 寄生式继承，与原型式继承非常相似，也是基于某个对象或某些信息创建一个对象，然后增强对象，最后返回对象。为了解决组合继承模式由于多次调用超类型构造函数而导致的低效率问题，可以将这个模式与组合继承一起使用。
• 寄生组合式继承，集寄生式继承和组合继承的优点与一身，是实现基于类型继承的最有效方式。

[caizhendi]

2020.04.17

阅读进度:第七章 7.3 P184

1、函数表达式

首先是 function关键字，然后是函数的名字，这就是指定函数名的方式。
关于函数声明，它的一个重要特征就是函数声明提升，意思是在执行代码之前会先读取函数声明。这就意味着可以把函数声明放在调用它的语句后面。
第二种创建函数的方式是使用函数表达式。

var functionName = function(arg0, arg1, arg2){
 //函数体
};

这种形式看起来好像是常规的变量赋值语句，即创建一个函数并将它赋值给变量functionName。这种情况下创建的函数叫做匿名函数因为function关键字后面没有标识符。匿名函数的 name 属性是空字符串。

1.1 递归

递归函数是在一个函数通过名字调用自身的情况下构成的。
例子见P177 arguments.callee是一个指向正在执行的函数的指针，因此可以用它来实现对函数 的递归调用。

function factorial(num){
 if (num <= 1){
 return 1;
 } else {
 return num * arguments.callee(num-1);
 }
}

因此，在编写递归函数时，使用 arguments.callee 总比使用函数名更保险。但在严格模式下，不能通过脚本访问 arguments.callee，访问这个属性会导致错误。不过，可以使用命名函数表达式来达成相同的结果。见P178

1.2闭包

闭包是指有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式，就是在一个函数内部创建另一个函数。例子见P178
。当某个函数被调用时，会创建一个执行环境（execution context）及相应的作用域链。 然后，使用 arguments 和其他命名参数的值来初始化函数的活动对象（activation object）。但在作用域链中，外部函数的活动对象始终处于第二位，外部函数的外部函数的活动对象处于第三位，……直至作为作用域链终点的全局执行环境。例子见P179
作用域链本质上是一个指向变量对象的指针列表，它只 引用但不实际包含变量对象。
P180 重点理解

//创建函数
var compareNames = createComparisonFunction("name");
//调用函数
var result = compareNames({ name: "Nicholas" }, { name: "Greg" });
//解除对匿名函数的引用（以便释放内存）
compareNames = null;

建议：由于闭包会携带包含它的函数的作用域，因此会比其他函数占用更多的内存。过度使用闭包可能会导致内存占用过多，我们建议读者只在绝对必要时再考虑使用闭包。

1.2.1 闭包与变量

function createFunctions(){
 var result = new Array();
 for (var i=0; i < 10; i++){
 result[i] = function(){
 return i;
 };
 }
 return result;
}

因为每个函数的作用域链中都保存着createFunctions()函数的活动对象，所以它们引用的都是同一个变量 i 。 当 createFunctions()函数返回后，变量 i 的值是 10，此时每个函数都引用着保存变量 i 的同一个变量 对象，所以在每个函数内部 i 的值都是 10。但是，我们可以通过创建另一个匿名函数强制让闭包的行为 符合预期，如下所示。

function createFunctions(){
 var result = new Array();
 for (var i=0; i < 10; i++){
 result[i] = function(num){
 return function(){
 return num;
 };
 }(i);
 }
 return result;
}

1.2.2关于this对象

我们知道，this 对象是在运行时基于函数的执 行环境绑定的：在全局函数中，this等于window，而当函数被作为某个对象的方法调用时，this等于那个对象。不过，匿名函数的执行环境具有全局性，因此其 this 对象通常指向window。当然，在通过call()或 apply()改变函数执行环境的情况下，this就会指向其他对象。
每个函数在被调用时都会自动取得两个特殊变量：this 和 arguments。内部函数在搜索这两个变量时，只会搜索到其活动对象为止，因此永远不可能直接访问外部函数中的这两个变量。
注意：this 和arguments也存在同样的问题。如果想访问作用域中的arguments对象，必须将对该对象的引用保存到另一个闭包能够访问的变量中。
在几种特殊情况下，this 的值可能会意外地改变。

var name = "The Window";
var object = {
 name : "My Object",
 getName: function(){
 return this.name;
 }
};

这里的 getName()方法只简单地返回 this.name 的值。以下是几种调用object.getName()的方式以及各自的结果。

object.getName(); //"My Object"
(object.getName)(); //"My Object"
(object.getName = object.getName)(); //"The Window"，在非严格模式下

虽然加上括号之后，就好像只是在引用一个函数，但 this 的值得到了维持，因为 object.getName 和(object.getName)的定义是相同的。第三行代码先执行了一条赋值语句，然后再调用赋值后的结果。因为这个赋值表达式的值是 函数本身，所以 this 的值不能得到维持，结果就返回了"The Window"。

1.2.3内存泄露

具体来说，如果闭包的作用域链中保存着一个 HTML 元素，那么就意味着该元素将无法被销毁。来看下面的例子。

function assignHandler(){
 var element = document.getElementById("someElement");
 element.onclick = function(){
 alert(element.id);
 };
}

以上代码创建了一个作为element元素事件处理程序的闭包，而这个闭包则又创建了一个循环引 用（事件将在第13章讨论）。由于匿名函数保存了一个对 assignHandler()的活动对象的引用，因此 就会导致无法减少element的引用数。只要匿名函数存在，element 的引用数至少也是 1，因此它所 占用的内存就永远不会被回收。不过，这个问题可以通过稍微改写一下代码来解决，如下所示。

function assignHandler(){
 var element = document.getElementById("someElement");
 var id = element.id;

 element.onclick = function(){
 alert(id);
 };

 element = null;
}

通过把 element.id的一个副本保存在一个变量中，并且在闭包中引用该变量消除了循环引用。但仅仅做到这一步，还是不能解决内存泄漏的问题。必须要记住：闭包会引用包含函数的整个活动对象，而其中包含着 element。即使闭包不直接引用element，包含函数的活动对象中也仍然会保存一个引用。因此，有必要把 element变量设置为null。这样就能够解除对 DOM 对象的引用，顺利地减少其引用数，确保正常回收其占用的内存。

[caizhendi]

2020.04.19

阅读进度: 第八章 P193

1.模块模式

模块模式是为单例创建私有变量和特权方法。所谓单例指的就是只有一个实例的对象。按照惯例，JavaScript 是以对象字面量的方式来创建单例对象的。
模块模式通过为单例添加私有变量和特权方法能够使其得到增强，其语法形式如下：

var singleton = function(){
 //私有变量和私有函数
 var privateVariable = 10;
 function privateFunction(){
 return false;
 }
//特权/公有方法和属性
 return {
 publicProperty: true,
 publicMethod : function(){
 privateVariable++;
 return privateFunction();
 }
 };
}();

这个模块模式使用了一个返回对象的匿名函数。在这个匿名函数内部，首先定义了私有变量和函数。然后，将一个对象字面量作为函数的值返回。返回的对象字面量中只包含可以公开的属性和方法。由于这个对象是在匿名函数内部定义的，因此它的公有方法有权访问私有变量和函数。从本质上来讲，这个对象字面量定义的是单例的公共接口。这种模式在需要对单例进行某些初始化，同时又需要维护其私有变量时是非常有用的。例子见P190

2.增强的模块模式

进一步改进了模块模式，即在返回对象之前加入对其增强的代码。这种增强的模块模式适合那些单例必须是某种类型的实例，同时还必须添加某些属性和（或）方法对其加以增强的情况。例子见P191

3.小结

函数表达式不同于函数声明。函数声明要求有名字，但函数表达式不需要。没有名字的函数表达式也叫做匿名函数。 递归函数应该始终使用arguments.callee来递归地调用自身，不要使用函数名——函数名可 能会发生变化。
当在函数内部定义了其他函数时，就创建了闭包。闭包有权访问包含函数内部的所有变量，原理如下：
在后台执行环境中，闭包的作用域链包含着它自己的作用域、包含函数的作用域和全局作用域。通常，函数的作用域及其所有变量都会在函数执行结束后被销毁。 但是，当函数返回了一个闭包时，这个函数的作用域将会一直在内存中保存到闭包不存在为止。使用闭包可以在 JavaScript 中模仿块级作用域（JavaScript 本身没有块级作用域的概念）。要点如下：
创建并立即调用一个函数，这样既可以执行其中的代码，又不会在内存中留下对该函数的引用。结果就是函数内部的所有变量都会被立即销毁——除非将某些变量赋值给了包含作用域（即外 部作用域）中的变量。 闭包还可以用于在对象中创建私有变量，可以使用闭包来实现公有方法，而通过公有方法可以访问在包含作用域中定义的变量。有权访问私有变量的公有方法叫做特权方法。

[caizhendi]

2020.04.18

阅读进度:第八章 P192

1.模仿块级作用域

JavaScript 没有块级作用域的概念。这意味着在块语句中定义的变量，实际上是在包含函数中而非语句中创建的。

function outputNumbers(count){
 for (var i=0; i < count; i++){
 alert(i);
 }
 alert(i); //计数
}

这个函数中定义了一个for循环，而变量i的初始值被设置为 0。在 Java、C++等语言中，变量 i 只会在 for 循环的语句块中有定义，循环一旦结束，变量 i 就会被销毁。可是在 JavaScrip 中，变量 i是定义在 ouputNumbers()的活动对象中的，因此从它有定义开始，就可以在函数内部随处访问它。即使像下面这样错误地重新声明同一个变量，也不会改变它的值。

function outputNumbers(count){
 for (var i=0; i < count; i++){
 alert(i);
 }

 var i; //重新声明变量
 alert(i); //计数
}

JavaScript 从来不会告诉你是否多次声明了同一个变量；遇到这种情况，它只会对后续的声明视而不见。匿名函数可以用来模仿块级作用域并避免这个问题。 用作块级作用域（通常称为私有作用域）的匿名函数的语法如下所示。

(function(){
 //这里是块级作用域
})();

将函数声明包含在一对圆括号中，表示它实际上是一个 函数表达式。而紧随其后的另一对圆括号会立即调用这个函数。

function(){
 //这里是块级作用域
}(); //出错！

JavaScript 将function关键字当作一个函数声明的开始，而函 数声明后面不能跟圆括号。然而，函数表达式的后面可以跟圆括号。要将函数声明转换成函数表达式， 只要像下面这样给它加上一对圆括号即可。

(function(){
 //这里是块级作用域
})();

无论在什么地方，只要临时需要一些变量，就可以使用私有作用域，例如：

function outputNumbers(count){
 (function () {
 for (var i=0; i < count; i++){
 alert(i);
 }
 })();
 alert(i); //导致一个错误！
}

在匿名函数中定义的任何变量，都会在执行结束时被销毁。
这种技术经常在全局作用域中被用在函数外部，从而限制向全局作用域中添加过多的变量和函数。一般来说，我们都应该尽量少向全局作用域中添加变量和函数。这种做法可以减少闭包占用的内存问题，因为没有指向匿名函数的引用。只要函数执行完毕，就可以立即销毁其作用域链了。

2.私有变量

JavaScript 中没有私有成员的概念；所有对象属性都是公有的。有一个私有变量的概念。任何在函数中定义的变量，都可以认为是私有变量，因为不能在函数的外部访问这些变量。私有变量包括函数的参数、局部变量和在函数内部定义的其他函数。

function add(num1, num2){
 var sum = num1 + num2;
 return sum;
}

在这个函数内部，有 3 个私有变量：num1、num2 和 sum。在函数内部可以访问这几个变量，但在函数外部则不能访问它们。如果在这个函数内部创建一个闭包，那么闭包通过自己的作用域链也可以访问这些变量。而利用这一点，就可以创建用于访问私有变量的公有方法。
我们把有权访问私有变量和私有函数的公有方法称为特权方法（privileged method）。有两种在对象 上创建特权方法的方式。第一种是在构造函数中定义特权方法，基本模式如下。

function MyObject(){
 //私有变量和私有函数
 var privateVariable = 10;
 function privateFunction(){
 return false;
 }
 //特权方法
 this.publicMethod = function (){
 privateVariable++;
 return privateFunction();
 };
}

这个模式在构造函数内部定义了所有私有变量和函数。然后，又继续创建了能够访问这些私有成员的特权方法。能够在构造函数中定义特权方法，是因为特权方法作为闭包有权访问在构造函数中定义的所有变量和函数。
利用私有和特权成员，可以隐藏那些不应该被直接修改的数据，例子见P187
不过，在构造函数中定义特权方法也有一个缺点，那就是你必须使用构造函数模式来达到这个目的。

2.1静态私有变量

通过在私有作用域中定义私有变量或函数，同样也可以创建特权方法，其基本模式如下所示。例子见p188

(function(){

 //私有变量和私有函数
 var privateVariable = 10;
 function privateFunction(){
 return false;
 }
 //构造函数
 MyObject = function(){
 };
 //公有/特权方法
 MyObject.prototype.publicMethod = function(){
 privateVariable++;
 return privateFunction();
 };
})();

这个模式创建了一个私有作用域，并在其中封装了一个构造函数及相应的方法。 需要注意的是，这个模式在定义构造函数时并没有使用函数声明，而是使用了函数表达式。函数声明只能创建局部函数，但那并不是我们想要的。出于同样的原因，我们也没 有在声明 MyObject 时使用 var 关键字。记住：初始化未经声明的变量，总是会创建一个全局变量。因此，MyObject就成了一个全局变量，能够在私有作用域之外被访问到。但也要知道，在严格模式下 给未经声明的变量赋值会导致错误。
这个模式与在构造函数中定义特权方法的主要区别，就在于私有变量和函数是由实例共享的。由于特权方法是在原型上定义的，因此所有实例都使用同一个函数。而这个特权方法，作为一个闭包，总是保存着对包含作用域的引用。

[caizhendi]

2020.04.20

阅读进度: 8.1.5 P199

1.window 对象

BOM 的核心对象是window，它表示浏览器的一个实例。它既是通过JavaScript访问浏览器窗口的一个接口，又是 ECMAScript 规定的 Global 对象。

1.1.1全局作用域

所有在全局作用域中声明 的变量、函数都会变成 window 对象的属性和方法。例子见p193
定义全局变量与在 window 对象上直接定义属性还 是有一点差别：全局变量不能通过delete操作符删除，而直接在 window对象上的定义的属性可以。兼容：IE8及更早版本在遇到使用delete删除window属性的语句时，不管该属性最初是如何创建的，都会抛出错误，以示警告。IE9及更高版本不会抛出错误。
尝试访问未声明的变量会抛出错误，但是通过查询 window 对象，可以知道某个可能未声明的变量是否存在。

1.1.2窗口关系及框架

如果页面中包含框架，则每个框架都拥有自己的window 对象，并且保存在frames集合中。在frames集合中，可以通过数值索引（从0开始，从左至右，从上到下）或者框架名称来访问相应的 window 对 象。每个 window 对象都有一个name属性，其中包含框架的名称。例子见P195
最好使用 top而非window来引用这些框架（例如，通过 top.frames[0]）。top对象始终指向最高（最外）层的框架，也就是浏览器窗口。
与 top 相对的另一个window对象是parent。parent（父）对象始终指向当前框架的直接上层框架。在某些情况下，parent有可能等于top；但在没有框架的情况下，parent 一定等于top（此时它们都等于window）。例子见p196
注意，除非最高层窗口是通过window.open()打开的，否则其 window对象的name属性不会包含任何值。与框架有关的最后一个对象是self，它始终指向window；实际上，self 和 window 对象可以互 换使用。引入 self 对象的目的只是为了与top和parent对象对应起来，因此它不格外包含其他值。
所有这些对象都是 window 对象的属性，可以通过 window.parent、window.top等形式来访问。同时，这也意味着可以将不同层次的window对象连缀起来，例如window.parent.parent.frames[0]。

1.1.3窗口位置

用来确定和修改window对象位置的属性和方法有很多。
IE、Safari、Opera 和 Chrome 都提供了 screenLeft 和 screenTop属性，分别用于表示窗口相对于屏幕左边和上边的位置。Firefox 则在 screenX 和 screenY 属性中提供相同的窗口位置信息，Safari 和 Chrome 也同时支持这两个属性。
使用下列代码可以跨浏览器取得窗口左边和上边的位置。

var leftPos = (typeof window.screenLeft == "number") ?
 window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ?
 window.screenTop : window.screenY;

在 IE、Opera 中，screenLeft 和 screenTop 中保存 的是从屏幕左边和上边到由window对象表示的页面可见区域的距离。换句话说，如果 window 对象是 最外层对象，而且浏览器窗口紧贴屏幕最上端——即 y 轴坐标为 0，那么 screenTop 的值就是位于页面 可见区域上方的浏览器工具栏的像素高度。但是，在 Chrome、Firefox和 Safari中，screenY 或screenTop 中保存的是整个浏览器窗口相对于屏幕的坐标值，即在窗口的 y 轴坐标为 0 时返回 0。
最终结果，就是无法在跨浏览器的条件下取得窗口左边和上边的精确坐标值。然而，使用 moveTo() 和 moveBy()方法倒是有可能将窗口精确地移动到一个新位置。这两个方法都接收两个参数，其中moveTo()接收的是新位置的x和y坐标值，而moveBy()接收的是在水平和垂直方向上移动的像素数。例子见p198
注意：这两个方法都不适用于框架，只能对最外层的 window 对象使用。

1.1.4窗口大小

跨浏览器确定一个窗口的大小不是一件简单的事。IE9+、Firefox、Safari、Opera 和 Chrome 均为此提 供了 4 个属性：innerWidth、innerHeight、outerWidth 和 outerHeight。
跨浏览器确定一个窗口的大小不是一件简单的事。IE9+、Firefox、Safari、Opera 和 Chrome 均为此提 供了 4 个属性：innerWidth、innerHeight、outerWidth 和 outerHeight。在 IE9+、Safari 和 Firefox 中，outerWidth和outerHeight返回浏览器窗口本身的尺寸（无论是从最外层的 window 对象还是从 某个框架访问）。在Opera中，这两个属性的值表示页面视图容器①的大小。而 innerWidth 和 innerHeight 则表示该容器中页面视图区的大小（减去边框宽度）。在 Chrome 中，outerWidth、outerHeight 与 innerWidth、innerHeight返回相同的值，即视口（viewport）大小而非浏览器窗口大小。
在 IE、Firefox、Safari、Opera 和 Chrome 中，document.documentElement.clientWidth 和 document.documentElement.clientHeight中保存了页面视口的信息。IE6中，这些属性必须在标准模式下才有效；如果是混杂模式，就必须通过 document.body.clientWidth 和 document.body. clientHeight 取得相同信息。而对于混杂模式下的 Chrome，则无论通过 document.documentElement 还是 document.body 中的 clientWidth 和 clientHeight 属性，都可以取得视口的大小。 虽然最终无法确定浏览器窗口本身的大小，但却可以取得页面视口的大小，如下所示。

var pageWidth = window.innerWidth,
 pageHeight = window.innerHeight;

if (typeof pageWidth != "number"){
 if (document.compatMode == "CSS1Compat"){
 pageWidth = document.documentElement.clientWidth;
 pageHeight = document.documentElement.clientHeight;
 } else {
 pageWidth = document.body.clientWidth;
 pageHeight = document.body.clientHeight;
 }
}

对于移动设备，window.innerWidth和window.innerHeight 保存着可见视口，也就是屏幕上可见页面区域的大小。移动 IE 浏览器不支持这些属性，但通过 document.documentElement.clientWidth 和 document.documentElement.clientHeihgt 提供了相同的信息。随着页面的缩放，这些值 也会相应变化。 在其他移动浏览器中，document.documentElement 度量的是布局视口，即渲染后页面的实际大小（与可见视口不同，可见视口只是整个页面中的一小部分）。移动 IE 浏览器把布局视口的信息保存在document.body.clientWidth和document.body.clientHeight中。这些值不会随着页面缩放变化。
使用 resizeTo()和resizeBy()方法可以调整浏览器窗口的大小。这两个方法都接收两个参数，其中resizeTo()接收浏览器窗口的新宽度和新高度，而resizeBy()接收新窗口与原窗口的宽 度和高度之差。例子见p199 需要注意的是，这两个方法与移动窗口位置的方法类似，也有可能被浏览器禁用；而且，在Opera和IE7（及更高版本）中默认就是禁用的。另外，这两个方法同样不适用于框架，而只能对最外层的window对象使用。

[caizhendi]

2020.04.21

阅读进度: 8.2 P207

1. 导航和打开窗口

使用 window.open()方法既可以导航到一个特定的 URL，也可以打开一个新的浏览器窗口。这个方法可以接收 4 个参数：要加载的URL、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。通常只须传递第一个参数，最后一个参数只在不打开新窗口的情况下使用。)传递了第二个参数，而且该参数是已有窗口或框架的名称，那么就会在具有该名称的窗口或框架中加载第一个参数指定的 URL。例子见200
第二个参数也可以是下列任何一个特殊的窗口名 称：_self、_parent、_top 或_blank。

1.1弹出窗口

如果给 window.open()传递的第二个参数并不是一个已经存在的窗口或框架，那么该方法就会根据在第三个参数位置上传入的字符串创建一个新窗口或新标签页。如果没有传入第三个参数，那么就会打开一个带有全部默认设置（工具栏、地址栏和状态栏等）的新浏览器窗口（或者打开一个新标签页——根据浏览器设置）。第三个参数是一个逗号分隔的设置字符串，表示在新窗口中都显示哪些特性。设置选项见p200
可以通过逗号分隔的名值对列表来指定。其中，名值对以等号 表示（注意，整个特性字符串中不允许出现空格）。

window.open("http://www.wrox.com/","wroxWindow", "height=400,width=400,top=10,left=10,resizable=yes");

window.open()方法会返回一个指向新窗口的引用。引用的对象与其他window对象大致相似，但我们可以对其进行更多控制。例如，有些浏览器在默认情况下可能不允许我们针对主浏览器窗口调整大小或移动位置，但却允许我们针对通过window.open()创建的窗口调整大小或移动位置。通过这个返回的对象，可以像操作其他窗口一样操作新打开的窗口。

var wroxWin = window.open("http://www.wrox.com/","wroxWindow",
 "height=400,width=400,top=10,left=10,resizable=yes");
//调整大小
wroxWin.resizeTo(500,500);
//移动位置
wroxWin.moveTo(100,100);
调用 close()方法还可以关闭新打开的窗口。
wroxWin.close();

这个方法仅适用于通过window.open()打开的弹出窗口。对于浏览器的主窗口，如果没有得到用户的允许是不能关闭它的。不过，弹出窗口倒是可以调用top.close()在不经用户允许的情况 下关闭自己。
新创建的 window对象有一个opener属性，其中保存着打开它的原始窗口对象。这个属性只在弹出窗口中的最外层 window 对象（top）中有定义，而且指向调用 window.open()的窗口或框架。

var wroxWin = window.open("http://www.wrox.com/","wroxWindow",
 "height=400,width=400,top=10,left=10,resizable=yes");
alert(wroxWin.opener == window); //true

在 Chrome 中，将新创建的标签页的opener属性设置为 null，即表示在单独的进程中运行新标签页，将 opener 属性设置为null就是告诉浏览器新创建的标签页不需要与打开它的标签页通信，因此可以在独立的进程中运行。标签页之间的联系一旦切断，将没有办法恢复。

1.2安全限制

对于那些不是用户有意打开的弹出窗口，Chrome采取了不同的处理方式。它不会像其他浏览器那样简单地屏蔽这些弹出窗口，而是只显示它们的标题栏，并把它们放在浏览器窗口的右下角。更多浏览器的限制见p202

1.3弹出窗口屏蔽程序

大多数浏览器都内置有弹出窗口屏蔽程序，于是，在弹出窗口被屏蔽时，就应该考虑两种可能性。如果是浏览器内置的屏蔽程序阻止的弹出窗口，那么window.open()很可能会返回null。此时，只要检测这个返回的值就可以确定弹出窗口是否被屏蔽了。

var wroxWin = window.open("http://www.wrox.com", "_blank");
if (wroxWin == null){
 alert("The popup was blocked!");
}

如果是浏览器扩展或其他程序阻止的弹出窗口，那么 window.open()通常会抛出一个错误。因此，要想准确地检测出弹出窗口是否被屏蔽，必须在检测返回值的同时，将对 window.open()的调用封装在一个try-catch 块中，如下所示。

var blocked = false;
try {
 var wroxWin = window.open("http://www.wrox.com", "_blank");
 if (wroxWin == null){
 blocked = true;
 }
} catch (ex){
 blocked = true;
}
if (blocked){
 alert("The popup was blocked!");
}

在任何情况下，以上代码都可以检测出调用window.open()打开的弹出窗口是不是被屏蔽了。但要注意的是，检测弹出窗口是否被屏蔽只是一方面，它并不会阻止浏览器显示与被屏蔽的弹出窗口有关的消息。

1.4间歇调用和超时调用

JavaScript 是单线程语言，但它允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行。前者是在指定的时间过后执行代码，而后者则是每隔指定的时间就执行一次代码。
超时调用需要使用window对象的setTimeout()方法，它接受两个参数：要执行的代码和以毫秒表示的时间（即在执行代码前需要等待多少毫秒）。其中，第一个参数可以是一个包含JavaScript代码的字符串（就和在 eval()函数中使用的字符串一样），也可以是一个函数。例如，下面对setTimeout()的两次调用都会在一秒钟后显示一个警告框。

//不建议传递字符串！
setTimeout("alert('Hello world!') ", 1000);
//推荐的调用方式
setTimeout(function() {
 alert("Hello world!");
}, 1000);

虽然这两种调用方式都没有问题，但由于传递字符串可能导致性能损失，因此不建议以字符串作为第一个参数。第二个参数是一个表示等待多长时间的毫秒数，但经过该时间后指定的代码不一定会执行。setTimeout()的第二个参数告诉JavaScript再过多长时间把当前任务添加到队列中。如果队列是空的，那么添加的代码会立即 执行；如果队列不是空的，那么它就要等前面的代码执行完了以后再执行。
调用 setTimeout()之后，该方法会返回一个数值ID，表示超时调用。这个超时调用ID是计划执行代码的唯一标识符，可以通过它来取消超时调用。要取消尚未执行的超时调用计划，可以调用clearTimeout()方法并将相应的超时调用ID作为参数传递给它，如下所示。

//设置超时调用
var timeoutId = setTimeout(function() {
 alert("Hello world!");
}, 1000);
//注意：把它取消
clearTimeout(timeoutId);

只要是在指定的时间尚未过去之前调用clearTimeout()，就可以完全取消超时调用。前面的代码在设置超时调用之后马上又调用了clearTimeout()，结果就跟什么也没有发生一样。
注意：超时调用的代码都是在全局作用域中执行的，因此函数中 this 的值在非严格模 式下指向 window 对象，在严格模式下是 undefined。
间歇调用与超时调用类似，只不过它会按照指定的时间间隔重复执行代码，直至间歇调用被取消或者页面被卸载。设置间歇调用的方法是setInterval()，它接受的参数与 setTimeout()相同：要执行的代码（字符串或函数）和每次执行之前需要等待的毫秒数。下面来看一个例子。

//不建议传递字符串！
setInterval ("alert('Hello world!') ", 10000);
//推荐的调用方式
setInterval (function() {
 alert("Hello world!");
}, 10000);

调用 setInterval()方法同样也会返回一个间歇调用 ID，该 ID 可用于在将来某个时刻取消间歇调用。要取消尚未执行的间歇调用，可以使用clearInterval()方法并传入相应的间歇调用ID。取消间歇调用的重要性要远远高于取消超时调用，因为在不加干涉的情况下，间歇调用将会一直执行到页面卸载。
在使用超时调用时，没有必要跟踪超时调用ID，因为每次执行代码之后，如果不再设置另一次超时调用，调用就会自行停止。一般认为，使用超时调用来模拟间歇调用的是一种最佳模式。在开发环境下，很少使用真正的间歇调用，原因是后一个间歇调用可能会在前一个间歇调用结束之前启动。而像前面示例中那样使用超时调用，则完全可以避免这一点。所以，最好不要使用间歇调用。

1.5系统对话框

浏览器通过 alert()、confirm()和prompt()方法可以调用系统对话框向用户显示消息。它们的外观由操作系统及（或）浏览器设置决定，而不是由CSS决定。此外，通过这几个方法打开的对话框都是同步和模态的。也就是说，显示这些对话框的时候代码会停止执行，而关掉这些对话框后代码又会恢复执行。
为了确定用户是单击了 OK 还是 Cancel，可以检查 confirm()方法返回的布尔值：true表示单击了OK，false 表示单击了 Cancel 或单击了右上角的 X 按钮。
如果用户单击了OK按钮，则prompt()返回文本输入域的值；如果用户单击了Cancel或没有单击OK而是通过其他方式关闭了对话框，则该方法返回 null。
除了上述三种对话框之外，GoogleChrome浏览器还引入了一种新特性。如果当前脚本在执行过程中会打开两个或多个对话框，那么从第二个对话框开始，每个对话框中都会显示一个复选框，以便用户阻止后续的对话框显示，除非用户刷新页面。如果用户勾选了其中的复选框，并且关闭了对话框，那么除非用户刷新页面，所有后续的系统对话框（包括警告框、确认框和提示框）都会被屏蔽。还有两个可以通过JavaScript 打开的对话框，即“查找”和“打印”。这两个对话框都是异步显示的，能够将控制权立即交还给脚本。window.print();显示“打印”对话框，window.find();显示“查找”对话框。

[caizhendi]

2020.04.22

阅读进度: 8.4 P214

1. location对象

提供了与当前窗口中加载的文档有关的信息，还提供了一 些导航功能。location对象是很特别的一个对象，因为它既是 window 对象的属性，也是 document 对象的属性；换句话说，window.location和document.location 引用的是同一个对象。
下表列出了 location 对象的所有属性，见p207

1.1查询字符串参数

创建一个函数，用以解析查询字符串，然后返回包含所有参数的一个对象：

function getQueryStringArgs(){
 //取得查询字符串并去掉开头的问号
 var qs = (location.search.length > 0 ? location.search.substring(1) : ""),

 //保存数据的对象
 args = {},

 //取得每一项
 items = qs.length ? qs.split("&") : [],
 item = null,
 name = null,
value = null,
 //在 for 循环中使用
 i = 0,
 len = items.length;
 //逐个将每一项添加到 args 对象中
 for (i=0; i < len; i++){
 item = items[i].split("=");
 name = decodeURIComponent(item[0]);
 value = decodeURIComponent(item[1]);
 if (name.length) {
 args[name] = value;
 }
 }

 return args;
}

1.2位置操作

使用 location对象可以通过很多方式来改变浏览器的位置。首先，也是最常用的方式，就是使用assign()方法并为其传递一个URL，如下所示。location.assign("http://www.wrox.com");
这样，就可以立即打开新URL并在浏览器的历史记录中生成一条记录。如果是将location.href或window.location 设置为一个URL值，也会以该值调用assign()方法。
修改location对象的其他属性也可以改变当前加载的页面。下面的例子展示了通过将hash、search、hostname、pathname和port属性设置为新值来改变URL。例子见p209
每次修改 location的属性（hash除外），页面都会以新 URL 重新加载。
当通过上述任何一种方式修改URL之后，浏览器的历史记录中就会生成一条新记录，因此用户通过单击“后退”按钮都会导航到前一个页面。要禁用这种行为，可以使用 replace()方法。这个方法只接受一个参数，即要导航到的 URL；结果虽然会导致浏览器位置改变，但不会在历史记录中生成新记录。在调用replace()方法之后，用户不能回到前一个页面。
与位置有关的最后一个方法是reload()，作用是重新加载当前显示的页面。如果调用reload()时不传递任何参数，页面就会以最有效的方式重新加载。也就是说，如果页面自上次请求以来并没有改变过，页面就会从浏览器缓存中重新加载。如果要强制从服务器重新加载，则需要像下面这样为该方法 传递参数true。

location.reload(); //重新加载（有可能从缓存中加载）
location.reload(true); //重新加载（从服务器重新加载）

2. navigator 对象

下表列 出了存在于所有浏览器中的属性和方法，以及支持它们的浏览器版本。见p210 常用userAgent用来检测显示网页的浏览器类型。

2.1检测插件

检测浏览器中是否安装了特定的插件是一种最常见的检测例程。对于非 IE 浏览器，可以使用 plugins 数组来达到这个目的。该数组中的每一项都包含下列属性。
name：插件的名字。
description：插件的描述。
filename：插件的文件名。
length：插件所处理的 MIME 类型数量。
在检测插件时，需要像下面这样循环迭代每个插件并将插件的 name 与给定的名字进行比较。

//检测插件（在 IE 中无效）
function hasPlugin(name){
 name = name.toLowerCase();
 for (var i=0; i < navigator.plugins.length; i++){
 if (navigator. plugins [i].name.toLowerCase().indexOf(name) > -1){
 return true;
 }
 }
 return false;
}

检测 IE 中的插件比较麻烦，因为 IE不支持Netscape 式的插件。在IE中检测插件的唯一方式就是使用专有的 ActiveXObject类型，并尝试创建一个特定插件的实例。。IE 是以 COM 对象的方式实现插 件的，而 COM 对象使用唯一标识符来标识。

//检测 IE 中的插件
function hasIEPlugin(name){
 try {
 new ActiveXObject(name);
 return true;
 } catch (ex){
 return false;
 }
}

2.2注册处理程序

Firefox 2为 navigator对象新增了registerContentHandler()和 registerProtocolHandler()方法。这两个方法可以让一个站点指明它可以处理特定类型的信息。
registerContentHandler()方法接收三个参数：要处理的 MIME 类型、可以处理该 MIME 类型的页面的 URL 以及应用程序的名称。例如：

navigator.registerContentHandler("application/rss+xml",
 "http://www.somereader.com?feed=%s", "Some Reader");

第一个参数是RSS源的MIME类型。第二个参数是应该接收 RSS 源 URL的URL，其中的%s表示RSS源URL，由浏览器自动插入。当下一次请求RSS源时，浏览器就会打开指定的 URL，而相应的Web应用程序将以适当方式来处理该请求。
类似的调用方式也适用于registerProtocolHandler()方法，它也接收三个参数：要处理的协议（例如，mailto 或 ftp）、处理该协议的页面的URL和应用程序的名称。例如，要想将一个应用程序注册为默认的邮件客户端，可以使用如下代码。

navigator.registerProtocolHandler("mailto",
 "http://www.somemailclient.com?cmd=%s", "Some Mail Client");

这个例子注册了一个mailto协议的处理程序，该程序指向一个基于Web的电子邮件客户端。同样，第二个参数仍然是处理相应请求的URL，而%s则表示原始的请求。

[caizhendi]

2020.04.23

阅读进度: 第九章 P217

1. screen对象

screen 对象基本上只用来表明客户端的能力，其中包括浏览器窗口外部的显示器的信息，如像素宽度和高度等。每个浏览器中的screen对象都包含着各不相同的属性，下表列出了所有属性及支持相应属性的浏览器。见p214
时候也可能会用到其中的信息来调整浏览器窗口大小，使其占据屏幕的可用空间，例如：window.resizeTo(screen.availWidth, screen.availHeight);
涉及移动设备的屏幕大小时，情况有点不一样。运行 iOS 的设备始终会像是把设备竖着拿在手里一样，因此返回的值是768×1024。而Android设备则会相应调用 screen.width 和 screen.height 的值。

2.history对象

history 对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。因为history是window对象的属性，因此每个浏览器窗口、每个标签页乃至每个框架，都有自己的 history对象与特定的window对象关联。出于安全方面的考虑，开发人员无法得知用户浏览过的 URL。不过，借由用户访问过的页面列表，同样可以在不知道实际 URL 的情况下实现后退和前进。
使用 go()方法可以在用户的历史记录中任意跳转，可以向后也可以向前。这个方法接受一个参数，表示向后或向前跳转的页面数的一个整数值。负数表示向后跳转（类似于单击浏览器的“后退”按钮），正数表示向前跳转（类似于单击浏览器的“前进”按钮）。例子：

//后退一页
history.go(-1);
//前进一页
history.go(1);
//前进两页
history.go(2);

也可以给 go()方法传递一个字符串参数，此时浏览器会跳转到历史记录中包含该字符串的第一个位置——可能后退，也可能前进，具体要看哪个位置最近。如果历史记录中不包含该字符串，那么这个方法什么也不做，例如：

//跳转到最近的 wrox.com 页面
history.go("wrox.com");
//跳转到最近的 nczonline.net 页面
history.go("nczonline.net");
另外，还可以使用两个简写方法 back()和 forward()来代替 go()。顾名思义，这两个方法可以 模仿浏览器的“后退”和“前进”按钮。
//后退一页
history.back();
//前进一页
history.forward();

history 对象还有一个length属性，保存着历史记录的数量。这个数量包括所有历史记录，即所有向后和向前的记录。对于加载到窗口、标签页或框架中的第一个页面而言， history.length 等于 0。

3.小结

浏览器对象模型（BOM）以window对象为依托，表示浏览器窗口以及页面可见区域。同时，window 对象还是 ECMAScript 中的Global对象，因而所有全局变量和函数都是它的属性，且所有原生的构造函数及其他函数也都存在于它的命名空间下。

• （1）在使用框架时，每个框架都有自己的 window 对象以及所有原生构造函数及其他函数的副本。每个框架都保存在frames集合中，可以通过位置或通过名称来访问。
• （2）有一些窗口指针，可以用来引用其他框架，包括父框架。top对象始终指向最外围的框架，也就是整个浏览器窗口。parent对象表示包含当前框架的框架，而 self 对象则回指 window。
• （3）调用 replace()方法可以导航到一个新URL，同时该 URL 会替换浏览器历史记录中当前显示的页面。

[hzjjg]

阅

[caizhendi]

2020.04.25

阅读进度: 9.3.1 P222
检测 Web 客户端的手段很多，而且各有利弊。但最重要的还是要知道，不到万不得已，就不要使用客户端检测。只要能找到更通用的方法，就应该优先采用更通用的方法。一言以蔽之，先设计最通用的方案，然后再使用特定于浏览器的技术增强该方案。

1. 能力检测

最常用也最为人们广泛接受的客户端检测形式是能力检测（又称特性检测）。能力检测的目标不是识别特定的浏览器，而是识别浏览器的能力。采用这种方式不必顾及特定的浏览器如何如何，只要确定浏览器支持特定的能力，就可以给出解决方案。能力检测的基本模式如下：

if (object.propertyInQuestion){
 //使用 object.propertyInQuestion
}

要理解能力检测，首先必须理解两个重要的概念。如前所述，第一个概念就是先检测达成目的的最常用的特性。第二个重要的概念就是必须测试实际要用到的特性。一个特性存在，不一定意味着另一个特性也存在。例子：

function getWindowWidth(){
 if (document.all){ //假设是 IE
 return document.documentElement.clientWidth; //错误的用法！！！
 } else {
 return window.innerWidth;
 }
}

这是一个错误使用能力检测的例子。getWindowWidth()函数首先检查document.all是否存在，如果是则返回 document.documentElement.clientWidth。

1.1更可靠的能力检测

能力检测对于想知道某个特性是否会按照适当方式行事（而不仅仅是某个特性存在）非常有用。上一节中的例子利用类型转换来确定某个对象成员是否存在，但这样你还是不知道该成员是不是你想要的。来看下面的函数，它用来确定一个对象是否支持排序。

//不要这样做！这不是能力检测——只检测了是否存在相应的方法
function isSortable(object){
 return !!object.sort;
}

这个函数通过检测对象是否存在sort()方法，来确定对象是否支持排序。问题是，任何包含sort属性的对象也会返回 true。 检测某个属性是否存在并不能确定对象是否支持排序。更好的方式是检测 sort 是不是一个函数。这里的 typeof 操作符用于确定sort的确是一个函数，因此可以调用它对数据进行排序。
在可能的情况下，要尽量使用typeof进行能力检测。特别是，宿主对象没有义务让typeof返回合理的值。最令人发指的事儿就发生在IE中。大多数浏览器在检测到 document.createElement() 存在时，都会返回 true。

//在 IE8 及之前版本中不行
function hasCreateElement(){
 return typeof document.createElement == "function";
}

这就意味着，在浏览器环境下测试任何对象的某个特性是否 存在，要使用下面这个函数。

function isHostMethod(object, property) {
 var t = typeof object[property];
 return t=='function' ||
 (!!(t=='object' && object[property])) ||
 t=='unknown';
}

目前使用 isHostMethod()方法还是比较可靠的，因为它考虑到了浏览器的怪异行为。不过也要注意，宿主对象没有义务保持目前的实现方式不变，也不一定会模仿已有宿主对象的行为。所以，这个函数——以及其他类似函数，都不能百分之百地保证永远可靠。作为开发人员，必须对自己要使用某个功能的风险作出理性的估计。

1.1.2能力检测，不是浏览器检测

实际上，根据浏览器不同将能力组合起来是更可取的方式。如果你知道自己的应用程序需要使用某些特定的浏览器特性，那么最好是一次性检测所有相关特性，而不要分别检测。

//确定浏览器是否支持 Netscape 风格的插件
var hasNSPlugins = !!(navigator.plugins && navigator.plugins.length);
//确定浏览器是否具有 DOM1 级规定的能力
var hasDOM1 = !!(document.getElementById && document.createElement &&
 document.getElementsByTagName);

2.怪癖检测

与能力检测类似，怪癖检测的目标是识别浏览器的特殊行为。但与能力检测确认浏览器支持什么能力不同，怪癖检测是想要知道浏览器存在什么缺陷。 例如，IE8 及更早版本中存在一个bug，即如果某个实例属性与[[Enumerable]]标记为false的某个原型属性同名，那么该实例属性将不会出现在fon-in循环当中。可以使用如下代码来检测这种“怪癖”。

var hasDontEnumQuirk = function(){
 var o = { toString : function(){} };
 for (var prop in o){
if (prop == "toString"){
 return false;
 }
 }
 return true;
}();

另一个经常需要检测的“怪癖”是 Safari 3以前版本会枚举被隐藏的属性。见p221

[hzjjg]

阅

[caizhendi]

2020.04.26

阅读进度: 9.3.2 P228

1. 用户代理字符串的历史

HTTP 规范（包括1.0和1.1版）明确规定，浏览器应该发送简短的用户代理字符串，指明浏览器的名称和版本号。RFC 2616（即HTTP1.1协议规范）是这样描述用户代理字符串的：
“产品标识符常用于通信应用程序标识自身，由软件名和版本组成。使用产品标识符的大多数领域也允许列出作为应用程序主要部分的子产品，由空格分隔。按照惯例，产品要按照相应的重要程度依次列出，以便标识应用程序。”用户代理字符串应该以一组产品的形式给出，字符串格式为：标识符/产品 版本号。

1.1早期的浏览器

美国 NCSA发布了世界上第一款Web浏览器Mosaic。其用户代理字符串非常简单：Mosaic/0.9。 Netscape Communications公司介入浏览器开发领域后，遂将自己产品的代号定名为Mozilla，其用户代理字符串 具有如下格式：Mozilla/版本号 [语言] (平台; 加密类型)。 注： 加密类型，即安全加密的类型。可能的值有 U（128 位加密）、I（40位加密）和N（未加密）。1.2Netscape Navigator 3 和 Internet Explorer 3
1996 年，NetscapeNavigator3发布，随即超越Mosaic 成为当时最流行的Web浏览器。而用户代理字符串只作了一些小的改变，删除了语言标记，同时允许添加操作系统或系统使用的CPU等可选信息。于是，格式变成如下所示。
Mozilla/版本号 (平台; 加密类型 [; 操作系统或 CPU 说明])
微软也发布了其第一款赢得用户广泛认可的Web浏览器，即 Internet Explorer 3。由于Netscape浏览器在当时占绝对市场份额，许多服务器在提供网页之前都要专门检测该浏览器。如果用户通过 IE 打不开相关网页，那么这个新生的浏览器很可能就会夭折。于是，微软决定将IE的用户代理字符串修改成兼容 Netscape 的形式，结果如下：
Mozilla/2.0 (compatible; MSIE 版本号; 操作系统) IE 成功地将 自己标识为Mozilla，从而伪装成Netscape Navigator。微软的这一做法招致了很多批评，因为它违反了 浏览器标识的惯例。更不规范的是，IE 将真正的浏览器版本号插入到了字符串的中间。

1.3 Netscape Communicator 4 和 IE4～IE8

见p223

1.4 Gecko

Gecko 是 Firefox的呈现引擎。当初的Gecko是作为通用 Mozilla 浏览器的一部分开发的，而第一个 采用 Gecko 引擎的浏览器是 Netscape 6。
新格式：Mozilla/Mozilla 版本号 (平台; 加密类型; 操作系统或 CPU; 语言; 预先发行版本) Gecko/Gecko 版本号 应用程序或产品/应用程序或产品版本号
具体见p224底

1.5 WebKit

Apple 公司宣布要发布自己的 Web 浏览器，名字定为 Safari。Safari 的呈现引擎叫 WebKit。 这款新浏览器和呈现引擎的开发人员也遇到了与Internet Explorer3.0类似的问题：如何确保这款浏览器不被流行的站点拒之门外？答案就是向用户代理字符串中放入足够多的信息，以便站点能够信任它与其他流行的浏览器是兼容的。于是，WebKit的用户代理字符串就具备了如下格式：
Mozilla/5.0 (平台; 加密类型; 操作系统或 CPU; 语言) AppleWebKit/AppleWebKit 版本号 (KHTML, like Gecko) Safari/Safari 版本号

1.6 Konqueror

KDE Linux 集成的 Konqueror，是一款基于 KHTML 开源呈现引擎的浏览器。尽管 Konqueror 只 能在 Linux 中使用，但它也有数量可观的用户。为确保最大限度的兼容性，Konqueror效仿IE选择了如下用户代理字符串格式：
Mozilla/5.0 (compatible; Konqueror/ 版本号; 操作系统或 CPU )

1.7 Chrome

谷歌公司的 Chrome浏览器以WebKit作为呈现引擎，但使用了不同的 JavaScript 引擎。在 Chrome 0.2 这个最初的 beta版中，用户代理字符串完全取自WebKit，只添加了一段表示 Chrome 版本号的信息，格 式如下：
Mozilla/5.0 ( 平台; 加密类型; 操作系统或 CPU; 语言) AppleWebKit/AppleWebKit 版本号 (KHTML, like Gecko) Chrome/ Chrome 版本号 Safari/ Safari 版本

1.8 Opera

Opera 应该是最有争议的一款浏览器了。Opera 默认的用户代理字符串是所有现代浏览器中最合理的——正确地标识了自身及其版本号。在 Opera 8.0 之前，其用户代理字符 串采用如下格式：
Opera/ 版本号 (操作系统或 CPU; 加密类型) [语言]

1.9 iOS 和 Android

移动操作系统 iOS 和 Android 默认的浏览器都基于 WebKit，而且都像它们的桌面版一样，共享相同的基本用户代理字符串格式。iOS 设备的基本格式如下：
Mozilla/5.0 (平台; 加密类型; 操作系统或 CPU like Mac OS X; 语言) AppleWebKit/AppleWebKit 版本号 (KHTML, like Gecko) Version/浏览器版本号 Mobile/移动版本号 Safari/Safari 版本号
Android 浏览器中的默认格式与iOS的格式相似，没有移动版本号（但有 Mobile 记号）。例如：
Mozilla/5.0 (Linux; U; Android 2.2; en-us; Nexus One Build/FRF91) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1

[caizhendi]

2020.04.27

阅读进度: 第十章

1. 用户代理字符串检测技术

考虑到历史原因以及现代浏览器中用户代理字符串的使用方式，通过用户代理字符串来检测特定的浏览器并不是一件轻松的事。因此，首先要确定的往往是你需要多么具体的浏览器信息。不推荐使用以下代码：

if (isIE6 || isIE7) { //不推荐!!!
 //代码
}

这个例子是想要在浏览器为IE6或IE7时执行相应代码。这种代码其实是很脆弱的，因为它要依据特定的版本来决定做什么。如果是IE8怎么办呢？只要IE有新版本出来，就必须更新这些代码。不过，像下面这样使用相对版本号则可以避免此问题：

if (ieVer >=6){
 //代码
}

1.1识别呈现引擎

如前所述，确切知道浏览器的名字和版本号不如确切知道它使用的是什么呈现引擎。如果Firefox、Camino 和 Netscape都使用相同版本的Gecko，那它们一定支持相同的特性。我们要编写的脚本将主要检测五大呈现引擎：IE、Gecko、WebKit、KHTML 和 Opera。
为了不在全局作用域中添加多余的变量，我们将使用模块增强模式来封装检测脚本。检测脚本的基本代码结构如下所示：例子见p229
这里声明了一个名为client的全局变量，用于保存相关信息。匿名函数内部定义了一个局部变量engine，它是一个包含默认设置的对象字面量。在这个对象字面量中，每个呈现引擎都对应着一个属性，属性的值默认为 0。如果检测到了哪个呈现引擎，那么就以浮点数值形式将该引擎的版本号写入相应的属性。而呈现引擎的完整版本（是一个字符串），则被写入 ver 属性。作这样的区分可以支持像下面这样编写代码：

if (client.engine.ie) { //如果是 IE，client.ie 的值应该大于 0
 //针对 IE 的代码
} else if (client.engine.gecko > 1.5){
 if (client.engine.ver == "1.8.1"){
 //针对这个版本执行某些操作
 }
}

要正确地识别呈现引擎，关键是检测顺序要正确。由于用户代理字符串存在诸多不一致的地方，如果检测顺序不对，很可能会导致检测结果不正确。为此，第一步就是识别Opera，因为它的用户代理字符串有可能完全模仿其他浏览器。我们不相信Opera，是因为（任何情况下）其用户代理字符串（都）不会将自己标识为 Opera。
应该放在第二位检测的呈现引擎是WebKit。因为WebKit 的用户代理字符串中包含"Gecko"和"KHTML"这两个子字符串，所以如果首先检测它们，很可能会得出错误的结论。
WebKit 的用户代理字符串中的"AppleWebKit"是独一无二的，因此检测这个字符串最合适。下面就是检测该字符串的示例代码：

var ua = navigator.userAgent;
if (window.opera){
 engine.ver = window.opera.version();
 engine.opera = parseFloat(engine.ver);
} else if (/AppleWebKit\/(\S+)/.test(ua)){
 engine.ver = RegExp["$1"];
 engine.webkit = parseFloat(engine.ver);
}

WebKit 版本与Safari版本的详细对应情况如下表所示。见p230底
接下来要测试的呈现引擎是 KHTML。同样，KHTML 的用户代理字符串中也包含"Gecko"，因此 在排除 KHTML 之前，我们无法准确检测基于Gecko的浏览器。相应检测代码见p231
在排除了 WebKit 和 KHTML之后，就可以准确地检测 Gecko 了。但是，在用户代理字符串中，Gecko的版本号不会出现在字符串"Gecko"的后面，而是会出现在字符串"rv:"的后面。这样，我们就必须使用一个比前面复杂一些的正则表达式，如下所示。例子见p231底
最后一个要检测的呈现引擎就是IE了。IE的版本号位于字符串"MSIE"的后面、一个分号的前面，因此相应的正则表达式非常简单，如下所示：p232

1.2识别浏览器

对 Opera 和 IE 而言，browser 对象中的值等于 engine 对象中的值。对 Konqueror 而言，browser. konq 和 browser.ver 属性分别等于 engine.khtml 和 engine.ver属性。为了检测Chrome和Safari，我们在检测引擎的代码中添加了 if 语句。提取Chrome 的版本号时，需要查找字符串"Chrome/"并取得该字符串后面的数值。而提取Safari的版本号时，则需要查找字符串 "Version/"并取得其后的数值。由于这种方式仅适用于Safari3及更高版本，因此需要一些备用的代 码，将WebKit的版本号近似地映射为Safari 的版本号。
在检测 Firefox的版本时，首先要找到字符串"Firefox/"，然后提取出该字符串后面的数值（即版本号）。当然，只有呈现引擎被判别为Gecko时才会这样做。

1.3识别平台

那些具有各种平台版本的浏览器（如Safari、Firefox 和 Opera）在不同的平台下可能会有不同的问题。目前的三大主流平台是Windows、Mac和Unix（包括各种 Linux）。为了检测这些平台，还需要像下面这样再添加一个新对象。

var client = function(){
 var engine = {
 //呈现引擎
 ie: 0,
 gecko: 0,
 webkit: 0,
 khtml: 0,
 opera: 0,
 //具体的版本号
 ver: null
 };
 var browser = {
 //浏览器
 ie: 0,
 firefox: 0,
 safari: 0,
 konq: 0,
 opera: 0,
 chrome: 0,
 //具体的版本号
 ver: null
 };
 var system = {
 win: false,
 mac: false,
 x11: false
 };
 //在此检测呈现引擎、平台和设备
 return {
 engine: engine,
 browser: browser,
 system: system
 };
}();

在确定平台时，检测navigator.platform要比检测用户代理字符串更简单，后者在不同浏览器中会给出不同的平台信息。而navigator.platform属性可能的值包括"Win32"、"Win64"、"MacPPC"、"MacIntel"、"X11"和"Linux i686"，这些值在不同的浏览器中都是一致的。

1.4识别Windows 操作系统

在 Windows 平台下，还可以从用户代理字符串中进一步取得具体的操作系统信息。在WindowsXP之前，Windows 有两种版本，分别针对家庭用户和商业用户。针对家庭用户的版本分别是 Windows 95、 98 和 Windows ME。而针对商业用户的版本则一直叫做Window NT，最后由于市场原因改名为Windows2000。这两个产品线后来又合并成一个由WindowsNT发展而来的公共的代码基，代表产品就是WindowsXP。随后，微软在 WindowsXP基础上又构建了WindowsVista。具体见p236

1.5识别移动设备

添加见p239
然后，通常简单地检测字符串"iPhone"、"iPod"和"iPad"，就可以分别设置相应属性的值了。

system.iphone = ua.indexOf("iPhone") > -1;
system.ipod = ua.indexOf("iPod") > -1;
system.ipod = ua.indexOf("iPad") > -1;

检查系统是不是MacOS、字符串中是否存在"Mobile"，可以保证无论是什么版本，system.ios中都不会是 0。然后，再使用正则表达式确定是否存在iOS的版本号。如果有，将system.ios设置为表示版本号的浮点值；否则，将版本设置为 2。
检测 Android操作系统也很简单，也就是搜索字符串"Android"并取得紧随其后的版本号。
最后一种主要的移动设备平台是WindowsMobile（也称为 Windows CE），用于 Pocket PC 和Smartphone 中。由于从技术上说这些平台都属于Windows平台，因此 Windows 平台和操作系统都会返 回正确的值。

1.6识别游戏系统

检测前述游戏系统的代码如下：

system.wii = ua.indexOf("Wii") > -1;
system.ps = /playstation/i.test(ua);

对于 Wii，只要检测字符串"Wii"就够了，而其他代码将发现这是一个Opera浏览器，并将正确的版本号保存在 client.browser.opera中。对于Playstation，我们则使用正则表达式来以不区分大小写的方式测试用户代理字符串。

2. 完整的代码
   以下是完整的用户代理字符串检测脚本，包括检测呈现引擎、平台、Windows操作系统、移动设备和游戏系统。见p242下
   3.使用方法 我们在前面已经强调过了，用户代理检测是客户端检测的最后一个选择。只要可能，都应该优先采用能力检测和怪癖检测。用户代理检测一般适用于下列情形。
   • (1) 不能直接准确地使用能力检测或怪癖检测。例如，某些浏览器实现了为将来功能预留的存根 （stub）函数。在这种情况下，仅测试相应的函数是否存在还得不到足够的信息。
   • (2) 同一款浏览器在不同平台下具备不同的能力。这时候，可能就有必要确定浏览器位于哪个平 台下。
   • (3) 为了跟踪分析等目的需要知道确切的浏览器。

     4.小结

     客户端检测方法有3种：

3. 能力检测：在编写代码之前先检测特定浏览器的能力。例如，脚本在调用某个函数之前，可能 要先检测该函数是否存在。这种检测方法将开发人员从考虑具体的浏览器类型和版本中解放出 来，让他们把注意力集中到相应的能力是否存在上。能力检测无法精确地检测特定的浏览器和 版本。
4. 怪癖检测：怪癖实际上是浏览器实现中存在的 bug，例如早期的 WebKit 中就存在一个怪癖，即 它会在 for-in循环中返回被隐藏的属性。怪癖检测通常涉及到运行一小段代码，然后确定浏览器是否存在某个怪癖。由于怪癖检测与能力检测相比效率更低，因此应该只在某个怪癖会干扰脚本运行的情况下使用。怪癖检测无法精确地检测特定的浏览器和版本。
5. 用户代理检测：通过检测用户代理字符串来识别浏览器。用户代理字符串中包含大量与浏览器 有关的信息，包括浏览器、平台、操作系统及浏览器版本。用户代理字符串有过一段相当长的发展历史，在此期间，浏览器提供商试图通过在用户代理字符串中添加一些欺骗性信息，欺骗网站相信自己的浏览器是另外一种浏览器。用户代理检测需要特殊的技巧，特别是要注意Opera会隐瞒其用户代理字符串的情况。即便如此，通过用户代理字符串仍然能够检测出浏览器所用 的呈现引擎以及所在的平台，包括移动设备和游戏系统。 在决定使用哪种客户端检测方法时，一般应优先考虑使用能力检测。怪癖检测是确定应该如何处理 代码的第二选择。而用户代理检测则是客户端检测的最后一种方案，因为这种方法对用户代理字符串具 有很强的依赖性。

[caizhendi]

2020.04.28

阅读进度: 10.1.2 P253

DOM（文档对象模型）是针对 HTML 和 XML 文档的一个 API（应用程序编程接口）。1998 年 10 月 DOM１级规范成为W3C的推荐标准，为基本的文档结构及查询提供了接口。

1.节点层次

节点分为几种不同的类 型，每种类型分别表示文档中不同的信息及（或）标记。每个节点都拥有各自的特点、数据和方法，另 外也与其他节点存在某种关系。节点之间的关系构成了层次，而所有页面标记则表现为一个以特定节点 为根节点的树形结构。以下面的 HTML 为例：

<html>
 <head>
 <title>Sample Page</title>
 </head>
 <body>
 <p>Hello World!</p>
 </body>
</html>

文档节点是每个文档的根节点。在这个例子中，文档节点只有一个子节点，即元素，我们称之为文档元素。文档元素是文档的最外层元素，文档中的其他所有元素都包含在文档元素中。每个文档只能有一个文档元素。在 HTML 页面中，文档元素始终都是元素。在 XML 中，没有预定义的元素，因此任何元素都可能成为文档元素。HTML元素通过元素节点表示，特性（attribute） 通过特性节点表示，文档类型通过文档类型节点表示，而注释则通过注释节点表示。

1.1Node类型

DOM1 级定义了一个 Node 接口，该接口将由 DOM 中的所有节点类型实现。这个 Node接口在JavaScript 中是作为 Node类型实现的；除了IE之外，在其他所有浏览器中都可以访问到这个类型。JavaScript中的所有节点类型都继承自Node类型，因此所有节点类型都共享着相同的基本属性和方法。每个节点都有一个nodeType属性，用于表明节点的类型。节点类型由在 Node 类型中定义的下列12个数值常量来表示，任何节点类型必居其一：

Node.ELEMENT_NODE(1);
Node.ATTRIBUTE_NODE(2);
Node.TEXT_NODE(3);
Node.CDATA_SECTION_NODE(4);
Node.ENTITY_REFERENCE_NODE(5);
Node.ENTITY_NODE(6);
Node.PROCESSING_INSTRUCTION_NODE(7);
Node.COMMENT_NODE(8);
Node.DOCUMENT_NODE(9);
Node.DOCUMENT_TYPE_NODE(10);
Node.DOCUMENT_FRAGMENT_NODE(11);
Node.NOTATION_NODE(12)

为了确保跨浏览器兼容，最好还是将nodeType属性与数字值进行比较，如下所示：

if (someNode.nodeType == 1){ //适用于所有浏览器
 alert("Node is an element.");
}

1.1.1 nodeName 和 nodeValue 属性

在使用这两个值以前，最好是像下面这样先检测一下节点的类型。

if (someNode.nodeType == 1){
 value = someNode.nodeName; //nodeName 的值是元素的标签名
}

在这个例子中，首先检查节点类型，看它是不是一个元素。如果是，则取得并保存nodeName的值。对于元素节点，nodeName中保存的始终都是元素的标签名，而 nodeValue 的值则始终为 null。

1.1.2 节点关系

节点间的各种关系可以用传统的家族关系来描 述，相当于把文档树比喻成家谱。每个节点都有一个 childNodes 属性，其中保存着一个 NodeList 对象。NodeList是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。请注意，虽然可以通过方括号语法来访问NodeList的值，而且这个对象也有 length 属性，但它并不是 Array 的实例。NodeList对象的独特之处在于，它实际上是基于 DOM 结构动态执行查询的结果，因此DOM结构的变化能够自动反映 在 NodeList 对象中。

下面的例子展示了如何访问保存在 NodeList 中的节点——可以通过方括号，也可以使用 item() 方法。

var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes.item(1);
var count = someNode.childNodes.length;

对 arguments对象使用Array.prototype.slice()方法可以 将其转换为数组。而采用同样的方法，也可以将 NodeList 对象转换为数组。来看下面的例子：

//在 IE8 及之前版本中无效
var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes,0);

要想在 IE 中将NodeList转换为数组，必须手动枚举所有成员。下列代码在所有浏览器中都可以运行，例子见p250 每个节点都有一个parentNode属性，该属性指向文档树中的父节点。包含在childNodes列表中的所有节点都具有相同的父节点，因此它们的parentNode属性都指向同一个节点。此外，包含在childNodes列表中的每个节点相互之间都是同胞节点。通过使用列表中每个节点的 previousSibling和nextSibling属性，可以访问同一列表中的其他节点。列表中第一个节点的 previousSibling属性值为null，而列表中最后一个节点的 nextSibling属性的值同样也为null。当然，如果列表中只有一个节点，那么该节点的 nextSibling 和 previousSibling 都为 null。

另外，hasChildNodes()也是一个非常有用的方法，这个方法在节点包含一或多个子节点的情况下返回true；应该说，这是比查询childNodes列表的length属性更简单的方法。

所有节点都有的最后一个属性是ownerDocument，该属性指向表示整个文档的文档节点。这种关系表示的是任何节点都属于它所在的文档，任何节点都不能同时存在于两个或更多个文档中。通过这个属性，我们可以不必在节点层次中通过层层回溯到达顶端，而是可以直接访问文档节点。

1.1.3 操作节点

DOM 提供了一些操作节点的方法。其中，最常用的方法是 appendChild()，用于向childNodes列表的末尾添加一个节点。添加节点后，childNodes的新增节点、父节点及以前的最后一个子节点的关系指针都会相应地得到更新。更新完成后，appendChild()返回新增的节点。 如果需要把节点放在childNodes列表中某个特定的位置上，而不是放在末尾，那么可以使用insertBefore()方法。这个方法接受两个参数：要插入的节点和作为参照的节点。插入节点后，被插入的节点会变成参照节点的前一个同胞节点（previousSibling），同时被方法返回。如果参照节点是null，则insertBefore()与 appendChild()执行相同的操作，如下面的例子所示。

//插入后成为最后一个子节点
returnedNode = someNode.insertBefore(newNode, null);
alert(newNode == someNode.lastChild); //true
//插入后成为第一个子节点
var returnedNode = someNode.insertBefore(newNode, someNode.firstChild);
alert(returnedNode == newNode); //true
alert(newNode == someNode.firstChild); //true
//插入到最后一个子节点前面
returnedNode = someNode.insertBefore(newNode, someNode.lastChild);
alert(newNode == someNode.childNodes[someNode.childNodes.length-2]); //true

前面介绍的 appendChild()和insertBefore()方法都只插入节点，不会移除节点。而下面要介绍的replaceChild()方法接受的两个参数是：要插入的节点和要替换的节点。要替换的节点将由这个方法返回并从文档树中被移除，同时由要插入的节点占据其位置。例子：

//替换第一个子节点
var returnedNode = someNode.replaceChild(newNode, someNode.firstChild);
//替换最后一个子节点
returnedNode = someNode.replaceChild(newNode, someNode.lastChild);

如果只想移除而非替换节点，可以使用removeChild()方法。这个方法接受一个参数，即要移除的节点。被移除的节点将成为方法的返回值。

1.1.4 其他方法

第一个就是 cloneNode()，用于创建调用这个方法的节点 的一个完全相同的副本。cloneNode()方法接受一个布尔值参数，表示是否执行深复制。在参数为 true 的情况下，执行深复制，也就是复制节点及其整个子节点树；在参数为false的情况下，执行浅复制， 即只复制节点本身。复制后返回的节点副本属于文档所有，但并没有为它指定父节点。因此，这个节点 副本就成为了一个“孤儿”，除非通过appendChild()、insertBefore()或replaceChild()将它添加到文档中。

注意：cloneNode()方法不会复制添加到DOM节点中的 JavaScript属性，例如事件处理程序等。这个方法只复制特性、（在明确指定的情况下也复制）子节点，其他一切 都不会复制。IE在此存在一个bug，即它会复制事件处理程序，所以我们建议在复制之前最好先移除事件处理程序。

最后一个方法是normalize()，这个方法唯一的作用就是处理文档树中的文本节点。由于解析器的实现或 DOM 操作等原因，可能会出现文本节点不包含文本，或者接连出现两个文本节点的情况。当在某个节点上调用这个方法时，就会在该节点的后代节点中查找上述两种情况。如果找到了空文本节点，则删除它；如果找到相邻的文本节点，则将它们合并为一个文本节点。

[hzjjg]

阅

[caizhendi]

2020.04.29

阅读进度: 10.1.3 P261

1.Document类型

JavaScript 通过Document类型表示文档。在浏览器中，document 对象是 HTMLDocument（继承 自Document 类型）的一个实例，表示整个HTML页面。而且，document 对象是 window对象的一个属性，因此可以将其作为全局对象来访问。Document 节点具有下列特征：

• nodeType 的值为 9；
• nodeName 的值为"#document"；
• nodeValue 的值为 null；
• parentNode 的值为 null；
• ownerDocument 的值为 null；
• 其子节点可能是一个DocumentType（最多一个）、Element（最多一个）、ProcessingInstruction或 Comment。

Document 类型可以表示 HTML 页面或者其他基于 XML 的文档。不过，最常见的应用还是作为 HTMLDocument 实例的 document对象。通过这个文档对象，不仅可以取得与页面有关的信息，而且还能操作页面的外观及其底层结构。

1.1文档的子节点

虽然 DOM 标准规定 Document 节点的子节点可以是 DocumentType、Element、ProcessingInstruction 或 Comment，但还有两个内置的访问其子节点的快捷方式。第一个就是documentElement属性，该属性始终指向 HTML 页面中的元素。另一个就是通过childNodes 列表访问文档元素， 但通过 documentElement 属性则能更快捷、更直接地访问该元素。以下面这个简单的页面为例。

<html>
 <body>

 </body>
</html>

这个页面在经过浏览器解析后，其文档中只包含一个子节点，即元素。可以通过 documentElement 或 childNodes 列表来访问这个元素，如下所示。

var html = document.documentElement; //取得对<html>的引用
alert(html === document.childNodes[0]); //true
alert(html === document.firstChild); //true

作为 HTMLDocument 的实例，document对象还有一个 body 属性，直接指向元素。因为开发人员经常要使用这个元素，所以document.body在JavaScript代码中出现的频率非常高，其用法如下。

var body = document.body; //取得对<body>的引用

所有浏览器都支持 document.documentElement 和 document.body属性。Document另一个可能的子节点是 DocumentType。通常将标签看成一个与文档其他部分不同的实体，可以通过doctype属性（在浏览器中是 document.doctype）来访问它的信息。 浏览器对 document.doctype的支持差别很大，可以给出如下总结：

• IE8 及之前版本：如果存在文档类型声明，会将其错误地解释为一个注释并把它当作 Comment节点；而 document.doctype 的值始终为 null。
• IE9+及 Firefox：如果存在文档类型声明，则将其作为文档的第一个子节点；document.doctype是一个 DocumentType节点，也可以通过document.firstChild 或 document.childNodes[0]访问同一个节点。

• Safari、Chrome和Opera：如果存在文档类型声明，则将其解析，但不作为文档的子节点。document.doctype是一个DocumentType节点，但该节点不会出现在 document.childNodes 中。 从技术上说，出现在元素外部的注释应该算是文档的子节点。然而，不同的浏览器在是否解析这些注释以及能否正确处理它们等方面，也存在很大差异。以下面简单的 HTML 页面为例。

  <!--第一条注释 -->
  <html>
  <body>
  
  </body>
  </html>
  <!--第二条注释 -->

  看起来这个页面应该有3个子节点：注释、元素、注释。从逻辑上讲，我们会认为 document.childNodes 中应该包含与这3个节点对应的3项。但是，现实中的浏览器在处理位于 外部的注释方面存在如下差异：

  1. IE8 及之前版本、Safari 3.1 及更高版本、Opera 和 Chrome 只为第一条注释创建节点，不为第二条注释创建节点。结果，第一条注释就会成为document.childNodes 中的第一个子节点。
  2. IE9 及更高版本会将第一条注释创建为document.childNodes 中的一个注释节点，也会将第二条注释创建为 document.childNodes 中的注释子节点。
  3. Firefox 以及Safari3.1之前的版本会完全忽略这两条注释。

1.2文档信息

作为 HTMLDocument的一个实例，document对象还有一些标准的 Document对象所没有的属性。这些属性提供了 document对象所表现的网页的一些信息。其中第一个属性就是title，包含着