JS红宝书·读书笔记

JavaScript高级程序设计

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

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

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

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

在HTML中使用JavaScript

---

async

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

noscript元素

noscript标签显示条件：

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

基本概念

---

语法

标识符

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

严格模式

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

数据类型

undefined

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

null

1	typeof null // -> object

undefined值派生自null值。

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

isFinite()

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

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

NaN

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

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

数值转换

Number()

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

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

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

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

字符串

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

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

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

object类型

Object类型的属性方法：

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

操作符

• ++ or --

前置与后置的区别

1 2 3 4 5 6 7 8 9

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。

变量、作用域和内存问题

---

基本类型和引用类型

复制变量值

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

传递参数

1 2 3 4 5 6

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 指向的对象在堆内存中只有一个，而且是全局对象。有很多开发人员错误地认为：在局部作用域中修改的对象会在全局作用域中反映出来，就说明参数是按引用传递的。为了证明对象是按值传递的，我们再看一看下面这个经过修改的例子：

1 2 3 4 5 6 7 8

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类型

检测数组

1 2 3

if (value instanceof Array) { }

ECMAScript5新增了 Array.isArray()方法

1 2 3

if (Array.isArray(value)) { }

sort方法

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

1 2 3

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13

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方法始终返回一个数组，该数组包含了从原始数组中删除的项。

1 2 3 4 5 6 7 8 9 10 11 12

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 个参数：前一个值、当前值、项的索引和数组对象。

  1 2 3 4 5

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

RegExp类型

正则表达式中的元字符

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

注：匹配元字符必须转义

RegExp 构造函数

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

1 2 3

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

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

RegExp实例方法

exec()方法

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

1 2 3 4 5 6 7 8 9

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。

1 2 3 4 5 6

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()方法都会返回正则表达式的字面量，与创建正则表达式的方式无关。

1 2 3

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

Function类型

函数声明与函数表达式

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

1 2 3 4 5 6 7 8 9 10 11

// 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对象的函数。

1 2 3 4 5 6 7

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

等价于

1 2 3 4 5 6 7

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

达到一种解耦的效果。

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

1 2 3 4 5 6 7

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

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

1 2 3 4 5 6 7

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调用基本包装类型的构造函数，与直接调用同名的转型函数是不一样的。

1 2 3 4 5 6

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()方法很特别，可以传递一个表示基数的参数。

1 2 3 4 5 6

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()

1 2 3 4

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

字符串操作方法

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

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对象。

1 2 3 4 5 6 7 8

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()。

1 2 3

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

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

1 2 3 4 5 6

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

1 2 3

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对象)将一个字符串分割成多个子字符串，并将结构放在一个数组中。可以接受可选的第二个参数，用于指定数组的大小。

1 2 3 4

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；
• 如果字符串在字母表中应该排在字符串参数之后，则返回一个正数

1 2 3 4

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

fromCharCode()方法

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

1	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。设置其中一个或多个。

1 2 3 4 5

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

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

访问器属性

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

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()方法，可以取得给定属性的描述符。该方法接收两个参数：属性所在的对象和要读取器描述符的属性名称，返回值是对象。

创建对象

工厂模式

1 2 3 4 5 6 7 8 9 10 11 12

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 3 4 5 6 7 8 9 10

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

原型模式

1 2 3 4 5 6 7 8 9 10 11

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。

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

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

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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删除实例属性，从而继续访问原型中的属性。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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()确定该属性是存在于对象中还是原型中：

  1 2 3 4 5 6 7

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

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会得到所有实例属性，不论是否可枚举。

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

简化Person.prototype写法：

1 2 3 4 5 6 7 8 9 10

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

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

1 2 3 4 5 6 7 8 9 10 11

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13

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

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

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

继承

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

原型链

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

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操作符

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

1 2 3

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

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

1 2 3

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

函数表达式

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

1 2 3 4 5 6 7 8 9

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

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

1 2 3 4 5 6 7 8 9 10 11

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

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

递归

函数作用域链

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

闭包

1 2 3 4 5 6 7 8 9

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

1 2 3 4 5 6 7 8 9 10 11

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。

1 2 3 4 5 6 7 8 9 10 11 12

var name = 'The window'; var obj = { name: 'my object', getNameFunc: function () { return function () { return this.nam; } } } console.log(obj.getNameFunc()()); // The Window (非严格模式)

模仿块级作用域

块级作用域

1 2 3

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

BOM

---

window 对象

全局作用域

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

窗口位置

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

1 2	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中保存了页面视口信息。

获取页面视口大小

1 2 3 4 5 6 7 8 9 10 11 12

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。

1 2 3 4

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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属性与数字值进行比较：

1 2 3

if (someNode.nodeType == 1) { console.log('Node is an element'); }

• nodeName属性

  1 2 3

  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列表的末尾添加一个节点。

1 2 3

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

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

1 2 3 4

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

• insertBefore()

把节点放在指定位置，该方法接受两个参数：要插入的节点和作为参考的节点。插入节点后，被插入的节点会变成参照节点的前一个兄弟节点。参照节点是null的话，insertBefore与appendChild执行相同的操作，都插入列表末尾。

1 2 3 4 5 6 7 8 9 10 11 12

//插入后成为最后一个子节点 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()

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

1 2 3 4 5

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

• removeChild()

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

1 2 3 4 5

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

• cloneNode()

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

1 2 3 4 5

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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