JS红宝书·读书笔记 -- 上篇

JavaScript 高级程序设计

个人博客：https://yeaseonzhang.github.io

花了半个多月的时间，终于又把“JS红宝书”又撸了一遍。

第一次读“JS红宝书”还是2015年初学JS的时候，那时候只是把语法部分读了一遍，还有一些浏览器相关知识做了下了解，大概也就读了半本的样子，
就开始了用JS进行开发了，在成长的道路上遇见了JQuery，当时真的是感觉到JQuery太友好了，慢慢放下了原生开发。

现在呢，更多的时候是在用框架进行开发，越来越觉得自己的JS基础很缺乏，然后就开启了“JS红宝书”二刷之路。

下面就把书中自己觉得重要的、没有掌握的知识整理出来。因为我觉得还是会三刷“JS红宝书”，希望把这本700多页的书越读越薄，勉励。

章节

• 在HTML中使用JavaScript
• 基本概念
• 变量、作用域和内存问题
• 引用类型
• 面向对象的程序设计
• 函数表达式
• BOM
• DOM
• DOM 扩展
• DOM2 和 DOM3

在HTML中使用JavaScript

---

async

加载外部脚本文件，通知浏览器立即下载，异步执行。

noscript 元素

noscript标签显示条件：

• 浏览器不支持脚本
• 浏览器支持脚本，但是脚本被禁用

基本概念

---

语法

标识符

• 第一个字符必须是一个字母、下划线或者一个美元符号
• 其他字符可以是字母、下划线、美元或者数字

严格模式

支持严格模式的浏览器包括：IE10+、Firefox4+、Safari 5.1+、Opera 12+和Chrome。

数据类型

undefined

对未初始化的变量执行typeof操作会返回undefined值，而对于未声明的变量执行typeof操作同样会返回undefined值。

null

typeof null // -> object

undefined值派生自null值。

console.log(null == undefind)   // -> true

isFinite()

测试一个数值是不是无穷值。

Number.NEGATIVE_INFINITY：负无穷
Number.POSITION_INFINITY：正无穷

NaN

在ECMAScript中，任何数值除以0会返回NaN。

isNaN()接受一个参数，确定这个参数是否"不是数值"。

数值转换

Number()

• 如果是null，返回0
• 如果是undefined，返回NaN

parseInt()
在ES5 中不支持解析八进制的能力。

parseInt('070');    // -> 70 not 56

通过第二个参数，指定转换基数（进制）默认十进制。

字符串

• ECMAScript中的字符串是不可变的
• toString()

在调用数值的toString方法，可以传递一个参数：输出数值的基数。没有toString方法的则返回该值的字面量

var num = 10;
console.log(num.toString(2));   // -> '1010'

object类型

Object类型的属性方法：

• constructor
• hasOwnProperty(propertyName)
• isPrototypeOf(obj)
• propertyIsEnumerable(propertyName)
• toLocalString()
• toString()
• valueOf()

操作符

• ++ or --

前置与后置的区别

var num1 = 2;
var num2 = 20;
var num3 = --num1 + num2;   // 21
var num4 = num1 + num2;     // 21

var num5 = 2;
var num6 = 20;
var num7 = num5-- + num6;   // 22
var num8 = num5 + num6;     // 21

• 一元加操作符用于强制类型转换，隐式Number()效果

for-in 语句

for-in语句是一种精确的迭代语句，可以用来枚举对象的属性。

通过for-in循环输出的属性名的顺序是不可预测的。

如果要迭代的对象的变量值为null或undefined，for-in语句会抛出错误。ES5更正了这一行为，不再抛出错误，只是不再执行循环体。

建议：在是使用for-in循环之前，先检查对象值是不是null或者undefined。

变量、作用域和内存问题

---

基本类型和引用类型

复制变量值

• 复制基本类型值，这两个变量相互独立，互不影响。
• 复制引用类型（对象），值引用是一个指针，改变其中一个对象，会影响另一个对象。

传递参数

function setName(obj) {
    obj.name = "Nicholas";
}
var person = new Object();
setName(person);
alert(person.name); //"Nicholas"

以上代码中创建一个对象，并将其保存在了变量person 中。然后，这个变量被传递到setName()函数中之后就被复制给了obj。在这个函数部，obj 和person 引用的是同一个对象。换句话说，即使这个变量是按值传递的，obj 也会按引用来访问同一个对象。于是，当在函数内部为obj 添加name属性后，函数外部的person 也将有所反映；因为person 指向的对象在堆内存中只有一个，而且是全局对象。有很多开发人员错误地认为：在局部作用域中修改的对象会在全局作用域中反映出来，就说明参数是按引用传递的。为了证明对象是按值传递的，我们再看一看下面这个经过修改的例子：

function setName(obj) {
    obj.name = "Nicholas";
    obj = new Object();
    obj.name = "Greg";
}
var person = new Object();
setName(person);
alert(person.name); //"Nicholas"

这个例子与前一个例子的唯一区别，就是在setName()函数中添加了两行代码：一行代码为obj重新定义了一个对象，另一行代码为该对象定义了一个带有不同值的name属性。在把person传递给setName()后，其name 属性被设置为"Nicholas"。然后，又将一个新对象赋给变量obj，同时将其name属性设置为"Greg"。如果person 是按引用传递的，那么person 就会自动被修改为指向其name属性值为"Greg"的新对象。但是，当接下来再访问person.name 时，显示的值仍然是"Nicholas"。这说明即使在函数内部修改了参数的值，但原始的引用仍然保持未变。实际上，当在函数内部重写obj时，这个变量引用的就是一个局部对象了。而这个局部对象会在函数执行完毕后立即被销毁。

检测类型

虽然在检测基本数据类型时typeof 是非常得力的助手，但在检测引用类型的值时，这个操作符的用处不大。通常，我们并不是想知道某个值是对象，而是想知道它是什么类型的对象。为此，ECMAScript提供了instanceof 操作符。

延长作用域

• try-catch语句中的catch块
• with语句

小结

• 基本类型值在内存中占据固定大小的空间，因此被保存在栈内存中；
• 从一个变量向另一个变量复制基本类型的值，会创建这个值的一个副本；
• 引用类型的值是对象，保存在堆内存中；
• 包含引用类型值的变量实际上包含的并不是对象本身，而是一个指向该对象的指针；

引用类型

---

Array类型

检测数组

if (value instanceof Array) {

}

ECMAScript5新增了 Array.isArray()方法

if (Array.isArray(value)) {

}

sort方法

该方法有缺陷，sort()方法会调用每个数组项的toString()转型方法，然后比较字符串进行排序。

var values = [0, 1, 5, 10, 15];
values.sort();
alert(values); //0,1,10,15,5

因此sort()方法接受一个比较函数作为参数。

function compare(value1, value2) {
    if (value1 < value2) {
        return -1;
    } else if (value1 > value2) {
        return 1;
    } else {
        return 0;
    }
}

var values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values); //0,1,5,10,15

splice方法

splice方法始终返回一个数组，该数组包含了从原始数组中删除的项。

var colors = ["red", "green", "blue"];
var removed = colors.splice(0,1); // 删除第一项
alert(colors); // green,blue
alert(removed); // red，返回的数组中只包含一项

removed = colors.splice(1, 0, "yellow", "orange"); // 从位置1 开始插入两项
alert(colors); // green,yellow,orange,blue
alert(removed); // 返回的是一个空数组

removed = colors.splice(1, 1, "red", "purple"); // 插入两项，删除一项
alert(colors); // green,red,purple,orange,blue
alert(removed); // yellow，返回的数组中只包含一项

迭代方法

ECMAScript5为数组定义了5个迭代方法。

• every(): 对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true。
• filter(): 对数组中的每一项运行给定函数，返回该函数会返回true 的项组成的数组。
• forEach(): 对数组中的每一项运行给定函数。这个方法没有返回值。
• map(): 对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。
• some(): 对数组中的每一项运行给定函数，如果该函数对任一项返回true，则返回true。

归并方法

ECMAScript 5 还新增了两个归并数组的方法。

• reduce()
• reduceRight()

reduce()和reduceRight()的函数接收4 个参数：前一个值、当前值、项的索引和数组对象。

var values = [1, 2, 3, 4, 5];
var sum = values.reduce((prev, cur, index, array) => {
    return prev + cur;
});
console.log(sum);

RegExp类型

正则表达式中的元字符

( [ { \ ^ $ | ) ? * + . ] }

注：匹配元字符必须转义

RegExp 构造函数

接受两个参数： 一个是要匹配的字符串模式，另一个是可选的标志字符串。

var pattern1 = /[bc]at/i;
// 等价于
var pattern2 = new RegExp('[bc]at', 'i');

注：由于RegExp构造函数的模式是字符串，所以在某些情况下要对字符串进行双重转义，所有元字符都必须双重转义。例如\n在字符串中被转义为\\n，而在正则表达式字符串中就会变成\\\\n。

RegExp实例方法

exex()方法

该方法是专门为捕获组而设计的。exec()接受一个参数，即要应用模式的字符串，然后返回包含第一个匹配项信息的数组；或者在没有匹配项的情况下返回null。返回的数组虽然是Array 的实例，但包含两个额外的属性：index 和input。其中，index 表示匹配项在字符串中的位置，而input 表示应用正则表达式的字符串。在数组中，第一项是与整个模式匹配的字符串，其他项是与模式中的捕获组匹配的字符串（如果模式中没有捕获组，则该数组只包含一项）。

var text = "mom and dad and baby";
var pattern = /mom( and dad( and baby)?)?/gi;

var matches = pattern.exec(text);
alert(matches.index); // 0
alert(matches.input); // "mom and dad and baby"
alert(matches[0]); // "mom and dad and baby"
alert(matches[1]); // " and dad and baby"
aler t(matches[2]); // " and baby"

对于exec()方法而言，即使在模式中设置了全局标志（g），它每次也只会返回一个匹配项。在不设置全局标志的情况下，在同一个字符串上多次调用exec()将始终返回第一个匹配项的信息。而在设置全局标志的情况下，每次调用exec()则都会在字符串中继续查找新匹配项。

test()方法

接受一个字符串参数。在模式与该参数匹配的情况下返回true；否则，返回false。

var text = "000-00-0000";
var pattern = /\d{3}-\d{2}-\d{4}/;

if (pattern.test(text)){
    alert("The pattern was matched.");
}

RegExp实例继承的toLocaleString()和toString()方法都会返回正则表达式的字面量，与创建正则表达式的方式无关。

var pattern = new RegExp("\\[bc\\]at", "gi");
alert(pattern.toString()); // /\[bc\]at/gi
alert(pattern.toLocaleString()); // /\[bc\]at/gi

Function类型

函数声明与函数表达式

解析器会率先读取函数声明，并使其在执行任何代码之前可用；至于函数表达式，则必须等到解析器执行到它所在的代码行，才会真正被解释执行。

// ok
alert(sum(10,10));
function sum(num1, num2){
    return num1 + num2;
}

// unexpected identifier(意外标识符)
alert(sum(10,10));
var sum = function(num1, num2){
    return num1 + num2;
};

注：要访问函数的指针而不执行函数的话，必须去掉函数名后的那对圆括号。

函数内部属性

• arguments
• this

arguments具有一个callee属性，该属性是一个指针，指向拥有这个arguments对象的函数。

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

等价于

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

达到一种解耦的效果。

ECMAScript 5也规范了一个函数对象属性：caller(看着很像callee)，这个属性中保存着调用当前函数的函数的引用，如果实在全局作用域中调用当前函数，它的值为null。

function outer(){
    inner();
}
function inner(){
    alert(inner.caller);
}
outer();

inner.caller指向outer()。为了实现更松散的耦合，也可以通过argument.callee.caller来访问相同的信息。

function outer() {
    inner();
}
function inner() {
    alert(arguments.callee.caller);
}
outer();

注：当函数在严格模式下运行时，访问arguments.callee 会导致错误。ECMAScript 5 还定义了arguments.caller属性，但在严格模式下访问它也会导致错误，而在非严格模式下这个属性始终是undefined。定义这个属性是为了分清arguments.caller 和函数的caller 属性。以上变化都是为了加强这门语言的安全性，这样第三方代码就不能在相同的环境里窥视其他代码了。
严格模式还有一个限制：不能为函数的caller 属性赋值，否则会导致错误。

函数属性和方法

每个函数都包含两个属性:

• length: 表示函数希望接收的命名参数的个数
• prototype: 保存实例方法

每个函数都包含两个非继承而来的方法：

• apply()
• call()
  这两个方法的用途都是在特定的作用域中调用函数，实际上等于设置函数体内this 对象的值。首先，apply()方法接收两个参数：一个是在其中运行函数的作用域，另一个是参数数组。其中，第二个参数可以是Array 的实例，也可以是arguments对象。
  call()方法与apply()方法的作用相同，它们的区别仅在于接收参数的方式不同。对于call()方法而言，第一个参数是this 值没有变化，变化的是其余参数都直接传递给函数。换句话说，在使用call()方法时，传递给函数的参数必须逐个列举出来。

注：在严格模式下，未指定环境对象而调用函数，则this 值不会转型为window。除非明确把函数添加到某个对象或者调用apply()或call()，否则this 值将是undefined。

在非严格模式下，call、apply的第一个参数传递为null或undefined时，函数体内的this会指向默认的宿主对象，在浏览器中则是window。

ECMAScript 5定义了一个方法bind()，这个方法会创建一个函数的实例，其this值会被绑定到传给bind()函数的值。

基本包装类型

使用new调用基本包装类型的构造函数，与直接调用同名的转型函数是不一样的。

var value = '25';
var number = Number(value); // 转型函数
console.log(typeof number); // 'number'

var obj = new Number(value); // 构造函数
console.log(typeof obj);    // 'object'

Number类型

Number类型的toString()方法很特别，可以传递一个表示基数的参数。

var num = 10;
alert(num.toString()); //"10"
alert(num.toString(2)); //"1010"
alert(num.toString(8)); //"12"
alert(num.toString(10)); //"10"
alert(num.toString(16)); //"a"

String类型

字符方法

• charAt()
• charCodeAt()

var stringValue = "hello world";

alert(stringValue.charAt(1)); //"e"
alert(stringValue.charCodeAt(1)); //输出字符编码"101"

字符串操作方法

• concat()
• slice()
• substr()
• substring()

这些方法对原字符均没有任何影响。

var stringValue = "hello ";
var result = stringValue.concat("world", "!");
alert(result); //"hello world!"

var stringValue = "hello world";
alert(stringValue.slice(3)); //"lo world"
alert(stringValue.substring(3)); //"lo world"
alert(stringValue.substr(3)); //"lo world"
alert(stringValue.slice(3, 7)); //"lo w"
alert(stringValue.substring(3,7)); //"lo w"
alert(stringValue.substr(3, 7)); //"lo worl"

// 参数是负值的情况下，它们的行为就不尽相同了。
// 其中，slice()方法会将传入的负值与字符串的长度相加，
// substr()方法将负的第一个参数加上字符串的长度，而将负的第二个参数转换为0。
// 最后，substring()方法会把所有负值参数都转换为0。
alert(stringValue.slice(-3)); //"rld"
alert(stringValue.substring(-3)); //"hello world"
alert(stringValue.substr(-3)); //"rld"
alert(stringValue.slice(3, -4)); //"lo w"
alert(stringValue.substring(3, -4)); //"hel"
alert(stringValue.substr(3, -4)); //""（空字符串）

字符串位置方法

• indexOf()
• lastIndexOf()

两个方法的第二个参数，表示从字符串中哪个位置开始搜索。

trim()方法

ECMAScript 5方法

字符串转换大小写方法

• toLowerCase()
• toLocaleLowerCase()
• toUpperCase()
• toLocaleUpperCase()

字符串的模式匹配方法

• match()
• search()
• replace()
• split()

match()方法，在字符串上调用这个方法，本质上和调用RegExp的exec()方法相同。match()方法只接受一个参数，要么是一个正则表达式，要么是一个RegExp对象。

var text = 'cat, bat, sat, fat';
var pattern = /.at/;

// 等价于 pattern.exec(text)
var matches = text.match(pattern);
alert(matches.index); //0
alert(matches[0]); //"cat"
alert(pattern.lastIndex); //0

search()方法的参数与match()方法相同，该方法返回字符串中第一个匹配项的索引，没有匹配项返回-1；个人认为serch()就是正则版的indexOf()。

var text = "cat, bat, sat, fat";
var pos = text.search(/at/);
aler t(pos); //1

ECMAScript提供了replace()方法，该方法接受两个参数，第一个参数可以是RegExp对象或者是一个字符串，第二个参数可以是一个字符串或者一个函数。

var text = "cat, bat, sat, fat";
var result = text.replace("at", "ond");
alert(result); //"cond, bat, sat, fat"

result = text.replace(/at/g, "ond");
aler t(result); //"cond, bond, sond, fond"

| 字符序列 | 替换文本 |
| : - : | : -- : |
| $$ | $ |
| $& | 匹配整个模式的子字符串。RegExp.lastMatch |
| $' | 匹配子字符串之前的字符串。RegExp.leftContext |
| $` | 匹配的子字符串之后的字符串。 RegExp.rightContext |
| $n | 匹配第n个捕获组的子字符串 n: 0~9 |
| $nn | 匹配第nn个捕获组的子字符串 nn: 01~99 |

var text = "cat, bat, sat, fat";
result = text.replace(/(.at)/g, "word ($1)");
alert(result); //word (cat), word (bat), word (sat), word (fat)

split()方法可以基于指定的分隔符(字符串 or RegExp对象)将一个字符串分割成多个子字符串，并将结构放在一个数组中。可以接受可选的第二个参数，用于指定数组的大小。

var colorText = "red,blue,green,yellow";
var colors1 = colorText.split(","); //["red", "blue", "green", "yellow"]
var colors2 = colorText.split(",", 2); //["red", "blue"]
var colors3 = colorText.split(/[^\,]+/); //["", ",", ",", ",", ""]

localeCompare()方法

比较两个字符串，并返回下列值中的 一个：

• 如果字符串在字母表中应该排在字符串参数之前，则返回一个负数
• 如果字符串等于字符串参数，则返回0；
• 如果字符串在字母表中应该排在字符串参数之后，则返回一个正数

var stringValue = "yellow";
alert(stringValue.localeCompare("brick")); //1
alert(stringValue.localeCompare("yellow")); //0
alert(stringValue.localeCompare("zoo")); //-1

fromCharCode()方法

这个方法的任务是接收一个或多个字符编码，然后将它们转换成一个字符串。相当于charCodeAt()反操作。

alert(String.fromCharCode(104, 101, 108, 108, 111)); //"hello"

Math 对象

• min()
• max()
• ceil()
• floor()
• round()
• random()

面向对象的程序设计

理解对象

属性类型

数据类型

• [[Configurable]]: 表示能否通过delete删除属性从而重新定义属性，能够修改属性的特性，或者能否把属性修改为访问器属性
• [[Enumerable]]: 表示能否通过for-in循环返回属性
• [[Writable]]: 表示能否修改属性的值
• [[Value]]: 包含这个属性的数据值。读取属性值的时候，从这个位置读；写入属性值的时候，把新值保存在这个位置。默认值undefined

要修改属性默认的特性，必须使用ECMAScript 5的Object.defineProperty()方法。这个方法接受三个参数：属性所在对象，属性名和一个描述符对象。其中描述符对象的属性值必须是：configurable、enumerable、writable和value。设置其中一个或多个。

var person = {};
Object.defineProperty(person, 'name', {
    writable: false,
    value: 'Yeaseon'
});

Object.defineProperty()方法不能对configurable: false的对象进行修改。

访问器属性

• [[Configurable]]: 表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为数据属性。
• [[Enumerable]]: 表示能否通过for-in循环返回属性。
• [[Get]]: 在读取属性时调用的函数，默认undefined
• [[Set]]: 在写入属性时调用的函数，默认undefined

var book = {
    _year: 2004,
    edition: 1
};
Object.defineProperty(book, "year", {
    get: function(){
        return this._year;
    },
    set: function(newValue){
        if (newValue > 2004) {
            this._year = newValue;
            this.edition += newValue - 2004;
        }
    }
});
book.year = 2005;
alert(book.edition); //2

读取属性的特性

ECMAScript 5的Object.getOwnPropertyDescriptor()方法，可以取得给定属性的描述符。该方法接收两个参数：属性所在的对象和要读取器描述符的属性名称，返回值是对象。

创建对象

工厂模式

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");

构造函数模式

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");

原型模式

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

var person1 = new Person();
person1.sayName(); //"Nicholas"

Person.prototype.constructor会指向Person，person1并没有直接连接到构造函数Person。

• 可以通过isPrototypeOf()方法来确定对象之间是否存在原型关系。从本质上讲，[[Prototype]]指向调用isPrototypeOf()方法的对象Person.prototype，则会返回true。

alert(Person.prototype.isPrototypeOf(person1)); //true

在ECMAScript 5增加了Object.getPrototypeOf()方法，该方法返回[[Prototype]]的值。

alert(Object.getPrototypeOf(person1) == Person.prototype); //true
alert(Object.getPrototypeOf(person1).name); //"Nicholas"

注: 虽然可以通过对象实例person1访问保存在原型中的值，但却不能重写原型中的值。

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

var person1 = new Person();
var person2 = new Person();

person1.name = "Greg"; //实质是在实例上增加一个name属性
alert(person1.name); //"Greg"——来自实例
alert(person2.name); //"Nicholas"——来自原型

可以通过delete删除实例属性，从而继续访问原型中的属性。

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

person1.name = "Greg";
alert(person1.name); //"Greg"——来自实例

delete person1.name;
alert(person1.name); //"Nicholas"——来自原型

• hasOwnProperty()方法可以检测一个属性是不是存在于实例，是则返回true。

• in操作符
  （prop in obj）通过in操作符可以判定对象是否有该属性，不论是本身含有还是原型含有，都返回true。
  可以通过in配合hasOwnProperty()确定该属性是存在于对象中还是原型中：

function detectProperty(obj, name) {
    if (name in obj) {
        obj.hasOwnProperty(name) ? '在对象中' : '在原型中';
    } else {
        console.log('不含有该属性');
    }
}

• ECMAScript 5Object.keys()方法可以取得对象上所有可枚举的实例属性。

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

var p1 = new Person();
p1.name = "Rob";
p1.age = 31;
var p1keys = Object.keys(p1);
alert(p1keys); //"name,age"

• Object.getOwnPropertyNames会得到所有实例属性，不论是否可枚举。

var keys = Object.getOwnPropertyNames(Person.prototype);
alert(keys); //"constructor,name,age,job,sayName"

简化Person.prototype写法：

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

这样写有一个缺陷，constructor属性则会等于Object，我们需要手动设置constructor。

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

但这同时也会导致constructor的[[Enumerable]]特性变成了true，默认情况下是false。再修改下写法：

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

Object.defineProperty(Person.prototype, "constructor", {
    enumerable: false,
    value: Person
});

原型重写会导致构造函数与最初原型之间的联系切断。

function Person(){
}
var friend = new Person();
Person.prototype = {  //重写
    constructor: Person,
    name : "Nicholas",
    age : 29,
    job : "Software Engineer",
    sayName : function () {
        alert(this.name);
    }
};
friend.sayName(); //error

结合使用构造函数和原型模式

用构造函数模式定义实例属性，用原型模式定义方法和共享属性。

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

继承

构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型的内部指针。

原型链

function SuperType () {
    this.property = true;
}

SuperType.prototype.getSuperValue = function () {
    return this.property;
};

function SubType () {
    this.subproperty = false;
}

SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function () {
    return this.subproperty;
};

var instance = new SubType();
console.log(instance.getSuperValue());  // true

instanceof操作符

用来确定原型和实例之间的关系。

alert(instance instanceof Object); //true
alert(instance instanceof SuperType); //true
alert(instance instanceof SubType); //true

第二种方式就是isPrototypeOf()方法，只要原型链中出现过的原型，都可以说是该原型链所派生的实例的原型。

alert(Object.prototype.isPrototypeOf(instance)); //true
alert(SuperType.prototype.isPrototypeOf(instance)); //true
alert(SubType.prototype.isPrototypeOf(instance)); //true

函数表达式

由于有声明提升的存在，定义函数不要放在条件表达式中

if (condition) {
    function sayHi () {
        console.log('Hi');
    }
} else {
    function sayHi () {
        console.log('Yo');
    }
}

在ECMAScript中属于无效语法，在不同浏览器中修正的做法并不一致。推荐的写法，如下：

var sayHi;

if (condition) {
    sayHi = function () {
        console.log('Hi');
    }
} else {
    sayHi = function () {
        console.log('Yo');
    }
}

这种函数表达式不存在声明提升，所以OK。

递归

函数作用域链

当某个函数被调用时，会创建一个执行环境及相应的作用域链。然后，使用arguments和其他命名参数的值来初始化函数的活动对象。在作用域链中，外部函数的活动对象始终处于第二位，外部函数的外部函数的活动对象处于第三位...，直到作用域终点的全局执行环境。

闭包

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

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

注：在闭包中使用this对象可能会导致一些问题。匿名函数的执行环境具有全局性，因此其this对象通常指向window。

var name = 'The window';

var obj = {
    name: 'my object',
    getNameFunc: function () {
        return function () {
            return this.nam;
        }
    }
}

console.log(obj.getNameFunc()());  // The Window (非严格模式)

模仿块级作用域

块级作用域

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

BOM

---

window 对象

全局作用域

抛开全局变量会成为window对象的属性不谈，定义全局变量与在window对象上直接定义属性还是有一点差别：全局变量不能通过delete操作符删除，而直接定义在window对象上的定义的属性可以。

窗口位置

获得窗口左边和上边的位置。

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

Firefox支持screenX和screenY，其他浏览器均支持screenLeft、screenTop。

但是还是需要注意一个问题：在IE Opera中，screenLeft screenTop 保存的的是可见区域的距离，也就是我们浏览器中不包含工具栏的区域与屏幕的距离；在Chrome、Firefox和Safari中screenY或screenTop返回的是整个浏览器窗口相对于屏幕坐标的值。

窗口大小

IE9+、Firefox、Safari、Opera和Chrome均提供了4个属性innerWidth、innerHeight、outerWidth和outerHeight。

• IE9+、Safari和Firefox中，outerWidth和outerHeight返回浏览器窗口本身的尺寸，而innerWidth和innerHeight则表示该容器中页面视图区的大小（减去边框宽度）
• Chrome中，inner*和outer*返回相同的值，即视口大小而非浏览器窗口的大小。
• 在IE、Firefox、Safari、Opera和Chrome中，都能通过document.documentElement.clientWidth和document.documentElement.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 {  // IE6 混杂模式
        pageWidth = document.body.clientWidth;
        pageHeight = document.doby.clientHeight;
    }
}

• resizeTo()接受浏览器窗口的新宽度和新高度
• resizeBy()接受新窗口与原窗口的宽度和高度差。

这两个方法可能被浏览器禁用。

导航

如果是浏览器内置的屏蔽程序组织的弹出窗口，那么window.open()很可能会返回null。

var newWindow = window.open('https://www.google.com.hk', '_blank');
if (newWindow == null) {
    console.log('The popup was blocked!');
}

如果是浏览器扩展或其他程序组织的弹出窗口，那么window.open()通常会抛出一个错误。

var blocked = false;

try {
    var newWindow = window.open('https://www.google.com.hk', '_blank');
    if (newWindow == null) {
        blocked = true;
    }
} catch (ex) {
    blocked = true;
}

if (blocked) {
    console.log('The popup was blocked');
}

location 对象

location对象的属性

• hash
• host
• hostname：与host不同的是，不带端口号
• href
• pathname: 返回URL中的目录和（或）文件名
• port
• protocol
• search：返回URL的查询字符串，这个字符串?开头

navigator 对象

location对象的属性

• appCodeName: 浏览器的名称，通常都是Mozilla
• appMinorVersion：此版本信息
• appName: 完整的浏览器名称
• appVersion：浏览器的版本
• buildID：浏览器编译版本
• cookieEnabled：表示cookie是否可用
• cpuClass：客户端计算机中使用的CPU类型
• javaEnabled()：表示当前浏览器中是否启用了java
• language: 浏览器的主语言
• mimeTypes：浏览器中注册的MIME类型数组
• onLine：表示浏览器是都连接到因特网
• oscpu：客户端计算机的操作系统或使用的CPU
• platform：浏览器所在的系统平台
• plugins：浏览器中安装的插件信息的数组
• preference()：设置用户的首选项
• systemLanguage：操作系统的语言
• userAgent：浏览器的用户代理字符串

DOM

---

节点层次

Node类型

每个节点都有一个nodeType属性，用于表明节点的类型。

• 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) {
    console.log('Node is an element');
}

• nodeName属性

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

节点关系

• childNodes属性

每个节点都有一个childNodes属性，其中保存着一个NodeList对象，该对象是一种类数组对象。

• parentNode属性

每个节点都有一个parentNode属性，该属性指向文档树中的父节点。包含在childNodes列表中的每个节点相互都是兄弟节点。使用previousSibling和nextSibling属性，可以访问其他兄弟节点。

注：列表中第一个节点的previousSibling属性值为null，同理列表中最后一个节点的nextSibling属性也是null。父节点的firstChild和lastChild属性分别指向其childNodes列表中的第一个和最后一个节点。如果不存在则为null。

hasChildNodes()方法在节点包含一个或多个子节点的情况下返回true，比查询childNodes.length更简便。

最后一个属性ownerDocument，该属性指向表示整个文档的文档节点（root），直接返回根节点不需要一层层向上回溯。

操作节点

• appendChild()

用于向childNodes列表的末尾添加一个节点。

var returnedNode = someNode.appendChild(newNode);
alert(returnedNode == newNode); //true
alert(someNode.lastChild == newNode); //true

任何DOM节点不可能同时出现在多个位置。

//someNode 有多个子节点
var returnedNode = someNode.appendChild(someNode.firstChild);
alert(returnedNode == someNode.firstChild); //false
alert(returnedNode == someNode.lastChild); //true

• insertBefore()

把节点放在指定位置，该方法接受两个参数：要插入的节点和作为参考的节点。插入节点后，被插入的节点会变成参照节点的前一个兄弟节点。参照节点是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

• replaceChild()

替换节点，接受两个参数：要插入的节点和要替换的节点。

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

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

• removeChild()

移除节点，接受一个参数：要被移除的节点。

//移除第一个子节点
var formerFirstChild = someNode.removeChild(someNode.firstChild);

//移除最后一个子节点
var formerLastChild = someNode.removeChild(someNode.lastChild);

• cloneNode()

复制节点，接受一个布尔值，表示是否深复制。复制后返回的节点没有父节点，可以通过插入等操作手动指定。

var deepList = myList.cloneNode(true);
alert(deepList.childNodes.length); //3（IE < 9）或7（其他浏览器）

var shallowList = myList.cloneNode(false);
alert(shallowList.childNodes.length); //0

注：cloneNode方法不会复制DOM节点的js属性。IE存在一个bug，它会复制事件处理程序。

• normalize()

稍后讨论

以上方法的返回值，都是被操作的节点。

Document类型

Document节点具有下列特征：

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

// 通过`documentElement`属性访问元素
var html = document.documentElement;
// 访问  元素
var body = document.body;
// 
var doctype = document.doctype;
//