红宝书笔记

摘要：红宝书笔记在中使用加载外部脚本文件，通知浏览器立即下载，异步执行脚本可以延迟到文档完全被解析和显示之后在执行浏览器不支持脚本。对数组中的每一项运行给定函数，返回该函数会返回的项组成的数组。

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

defer：脚本可以延迟到文档完全被解析和显示之后在执行

noscript：
浏览器不支持脚本。
浏览器支持脚本，但是脚本被禁用

复制变量值

复制基本类型值，这两个变量相互独立，互不影响。

复制引用类型（对象），值引用是一个指针，改变其中一个对象，会影响另一个对象。

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

在函数重写obj时，这个变量引用就是一个局部对象。而这个对象会在函数执行完毕后立即被销毁。

检测类型

使用typeof检测基本数据类型，但是在检测引用类型的值是，这个操作符的用处不大，因为使用typeof无法知道它是什么类型的对象。为此，ECMAScript提供了 instanceof操作符。

var s = "test";
var b = true;
var i = 22;
var u;
var n = null;
var o = new Object()
console.log(typeof s); // string
console.log(typeof b); // boolean
console.log(typeof i); // number
console.log(typeof u); // undefined
console.log(typeof n); // object
console.log(typeof o); // object

延长作用域链

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

垃圾回收

标记清除

垃圾收集器在运行的时候会给存储在内存中的所有变量都加上标记

引用计数

当它们被赋值为指向某个对象时，要给它们原本持有的引用所指向的对象的引用计数减1，然后给它们新指向的对象的引用计数加1。当它们的生命期结束的时候，要给它们所指向的对象的引用计数减1，当引用计数为0时，则可以将其占用的内存空间进行回收

检测数组

value instanceof Array
Array.isArray(value)

栈方法（后进先出）

push：将参数逐个添加到数据末尾

pop：从数组末尾移除最后一项

队列方法（先进先出）

shift：删除数组的第一项并返回该项

unshift：向数组前添加任意个项并返回新数组的长度

重排序方法

reverse：反转数组

sort：按升序排列数组

操作方法

concat：将参数添加到数组的末尾，并返回新的数组

slice：基于当前数组中的一或多个项创建一个新数组，slice()方法可以接受一或者两个参数，即要返回项的起始和结束为止

var colors = ["red", "green", "blue", "yellow", "purple"];
var colors2 = colors.slice(1)
var colors3 = colors.slice(4)
console.log(colors2); // ["green", "blue", "yellow", "purple"]
console.log(colors3); // ["purple"]

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，返回的数组中只包含一项

位置方法

indexOf：从数组开头开始向后查找位置

lastIndexOf：从数组末尾开始向前查找

迭代方法

every(): 对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true。

filter(): 对数组中的每一项运行给定函数，返回该函数会返回true 的项组成的数组。

forEach(): 对数组中的每一项运行给定函数。这个方法没有返回值。

map(): 对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。

some(): 对数组中的每一项运行给定函数，如果该函数对任一项返回true，则返回true。

缩小方法

reduce()：遍历数组所有项，并返回最终的值，从第一项开始，逐个遍历到最后

reduceRight()：从最后一项开始，逐个遍历到第一项

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

函数内部属性

函数内部有两个特殊的对象：argumens和this

属性和方法

每个函数都包含两个属性

length: 表示函数希望接收的命名参数的个数

prototype: 保存实例方法

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

call()和apply()这两个方法的用途都是在特定的作用域中调用函数，实际上等于设置函数体内this对象的值

apply()接收两个参数：一个是在其中运行的函数作用域，另一个是参数数组

call()接收的参数，第一个参数是this值没有变化，变化的是其余参数都直接传递给函数

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

function sum (num1, num2) {
    return num1 + num2;
}
function callSum1 (num1, num2) {
    return sum.apply(this, [num1, num2]);
}
function callSum2 (num1, num2) {
    return sum.call(this, num1, num2);
}
callSum1(10, 10); // 20
callSum2(10, 10); // 20
var callSum3 = sum.bind(null)
callSum3(10, 10) // 20

Global对象

encodeURI()和encodeURIComponet()方法可以对URI进行编码，以便发送给浏览器

encodeURI()编码后的结果是除了空格之外的其他字符都原封不动，只有空格被替换成了%20，对应decodeURI()方法

encodeURIComponet()方法则会使用对应的编码替换所有非字母数字字符，这也正式可以对整个URL使用encodeURI()，而只能对附加在现有URL后面的字符串使用encodeURIComponet()的原因所在。对应decodeURIComponet()方法

属性类型

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

数据属性

[[Configurable]]：表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性，默认值为true

[[Enumerable]]：表示能否通过for-in循环返回属性。默认值为true

[[Writable]]：表示能否修改属性的值。默认值为true

[[Value]]：包含这个属性的数据值，默认值为undefined

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

var person = {}
Object.defineProperty(person, "name", {
    writable: false,
    configurable: false,
    value: "Nicholas"
});
console.log(person.name); // Nicholas
person.name = "Greg";
console.log(person.name); // Nicholas
delete person.name
console.log(person.name); // Nicholas

Object.defineProperty()方法会对configurable为false的属性修改做限制

访问器属性

[[Configurable]]：表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为数据属性。默认值为true

[[Enumerable]]：表示能否通过for-in循环返回属性。默认值为true

[[Get]]：在读取属性时调用的函数。默认值为undefined

[[Set]]：在写入属性时调用的函数。默认值为undefined

访问器属性不能直接定义，必须使用Object.defineProperty()来定义

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;
console.log(book.edition); // 2

定义多个属性

ECMAScript5定义了一个Object.defineProperties()方法。利用这个方法可以通过描述符一次定义多个属性。这个方法接收两个对象参数。

var book = {};
Object.defineProperties(book, {
    _year: {
        value: 2004
    },
    edition: {
        value: 1
    },
    year: {
        get: function() {
            return this._year
        },
        set: function(newValue) {
            if (newValue > 2004) {
                this._year = newValue;
                this.edition += newValue - 2004
            }
        }
    }
});

读取属性的特性

使用Object.getOwnPropertyDescriptor()方法，可以取得给定属性的描述符

var descriptor = Object.getOwnPropertyDescriptor(book, "_year")
console.log(descriptor.value); // 2004
console.log(descriptor.configurable); // false

工厂模式

function createPerson (name, age, job) {
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function () {
        console.log(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 () {
        console.log(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 () {
    console.log(this.name);
};
var person1 = new Person();
var person2 = new Person();

在默认情况下，所有原型对象都会自动获得一个constructor（构造函数）属性，这个属性包含一个指向一个prototype属性所在函数的指针。例如，Person.prototype.constructor指向Person

我们可以通过isPrototypeof()方法来确定对象之间是否存在原型关系。从本质上讲，如果[[Prototype]]指向调用isPrototypeof()方法的对象（Person.prototye），那么这个方法就返回true。

console.log(Person.prototype.isPrototypeOf(person1)); // true
console.log(Person.prototype.isPrototypeOf(person2)); // true

ECMAScript5增加了一个新方法，叫Object.getPrototypeOf()，在所有支持的实现中，这个方法返回[[Prototype]]的值。例如：

console.log(Object.getPrototypeOf(person1) === Person.prototype); // true

虽然可以通过对象实例访问保存在原型中的值，但却不能通过对象实例重写原型中的值。如果我们在实例中添加了一个属性，而该属性与实例原型中的一个属性同名，那我们就在实例中创建该属性，该属性将会屏蔽原型中的那个属性。

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";
console.log(person1.name); //"Greg" — 来自实例
delete person1.name;
console.log(person1.name); //"Nicholas" — 来自原型

通过delete操作符删除实例的属性，就恢复了对原型中name属性的连接。因此接下来再调用person1.name是，就返回了原型中name属性的值了。
Object.hasOwnProperty()方法可以检测一个属性是否存在于实例中，还是存在于原型中。

原型与in操作符

in操作符只要通过对象能够访问到属性就返回true，Object.hasOwnProperty()只在属性存在于实例中才返回true，因此只要in操作符返回true而Object.hasOwnProperty()返回false，就可以确定属性是原型中的属性。

function hasPrototypeProperty (object, name) {
    if (name in object) {
         return object.hasOwnProperty(name) // true：属性在实例中，false：属性在对象中
    } else {
        console.log("没有该属性");
    }
}

要取得对象上所有可枚举的实例属性，可以使用ECMAScript5的Object.keys()方法

function Person () {}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function () {
    console.log(this.name);
};
Object.keys(Person.prototype); //  ["name", "age", "job", "sayName"]
var person1 = new Person();
person1.name = "Rob";
person1.age = 31;
Object.keys(person1); // ["name", "age"]

Object.getOwnPropertyNames()可以得到所有的属性，无论它是否可枚举

Object.getOwnPropertyNames(Person.prototype); //  ["constructor", "name", "age", "job", "sayName"]

更简单的原型方法

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

我们将Person.prototype设置为一个新的对象，本质上是完全重写了默认的prototype对象。但是这样有一个例外，constructor属性不再指向Person了，而是指向Object。所以我们需要将他的constructor属性设置成Person

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

但是这种方式重设constructor属性会导致它的[[Enumerable]]的特性被设置为true，默认情况下，原生的constructor属性是不可枚举的。

function Person () {}
Person.prototype = {
    name: "Nicholas",
    age: 29,
    job: "Software Engineer",
    sayName: function () {
        console.log(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 () {
        console.log(this.name);
    }
}
friend.sayName(); // error

原生对象的原型

原型模式的重要性不仅体现在创建自定义类型方面，就连所有的原生的引用类型，都是采用这种模式创建的。所有原生引用类型（Object、Array、String，等等）都在其构造函数的原型上定义了方法。

原型对象的问题
原型模式的所有实例在默认情况下都将取得相同的属性值，最大的问题是其共享的本性所导致的。

function Person () {}
Person.prototype = {
    constructor: Person,
    name: "Nicholas",
    age: 29,
    job: "Software Engineer",
    friends: ["Shelby", "Court"],
    sayName: function () {
        console.log(this.name);
    }
}
var person1 = new Person();
var person2 = new Person();
person1.friends.push("Van");
console.log(person1.friends); // ["Shelby", "Court", "Van"]
console.log(person2.friends); //  ["Shelby", "Court", "Van"]

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

创建自定义类型的最常见的方式，构造函数模式用于定义实例属性，而原型模式用于定义方法和共享的属性。

每个实例都会有自己的一份实例属性的副本，但同事又共享着对方法的引用，最大的节省了内存

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

动态原型模式
通过在构造函数中初始化原型（仅在必要的情况下），又保持同时使用构造函数和原型模式的优点。换句话说，可以通过检查某个应该存在的方法是否有效，来决定是否需要初始化原型。

function Person (name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.friends = ["Shelby", "Court"];
    if (typeof this.sayName === "function") {
        Person.prototype.sayName = function () {
            console.log(this.name);
        };
    }
}

原型链

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

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;
};
var instance = new SubType();
console.log(instance.getSuperValue()); // true

别忘记默认原型

所用引用类型默认都继承Object，而这个继承也是通过原型链实现的。所有函数的默认原型都是Object的实例，因此默认原型都会包含一个内部指针，指向Object.prototype。

确定原型与实例的关系

instanceof操作符

console.log(instance instanceof Object); // true
console.log(instance instanceof SuperType); // true
console.log(instance instanceof SubType); // true

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

console.log(Object.isPrototypeOf(instance)); // true
console.log(SuperType.isPrototypeOf(instance)); // true
console.log(SubType.isPrototypeOf(instance)); // true

谨慎的定义方法

子类型有时需要重写超类型中的某个方法，或者需要添加超类型中不存在的某个方法。但不管怎样，给原型添加方法的代码一定要放在替换原型语句之后。

原型链的问题

通过原型来实现继承时，原型实际上会变成另一个类型的实例，包含引用类型值的原型属性会被所有实例共享。

在创建子类型的实例时，不能向超类型的构造函数中传递参数。

借用构造函数

在解决原型中包含引用类型值所带来问题的过程中，开始使用借用构造函数的技术。即在子类型构造函数的内部调用超类型构造函数

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

传递参数

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

function SuperType (name) {
    this.name = name;
}
function SubType () {
    // 继承了SuperType
    SuperType.call(this, "Nicholas");
    this.age = 29
}
var instance = new SubType();
console.log(instance.name); // "Nicholas"
console.log(instance.age); // 29

借用构造函数的问题

方法都在构造函数中定义，因为函数复用就无从谈起

组合继承

既能通过在原型上定义方法实现了函数复用，又能保证每个实例都有它自己的属性

function SuperType (name) {
    this.name = name;
    this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function () {
    console.log(this.name);
};
function SubType (name, age) {
    // 继承了SuperType
    SuperType.call(this, name);
    this.age = age
}
// 继承了SuperType
SubType.prototype = new SuperType();
SubType.prototype.sayAge = function () {
    console.log(this.age);
};
var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
console.log(instance1.colors); // ["red", "blue", "green", "black"]
instance1.sayName(); // "Nicholas"
instance1.sayAge(); // 29
var instance2 = new SubType("Greg", 27);
console.log(instance2.colors); // ["red", "blue", "green"]
instance2.sayName(); // "Greg"
instance2.sayAge(); // 27

定义函数的方式有两种：一种是函数声明，另一种是函数表达式。
函数声明的特征是函数声明提升，意思是在执行代码之前会先读取函数声明。

函数作用域链

当某个函数第一次被调用时，会创建一个执行环境及相应的作用域链，并把作用域链赋值给一个特殊的内部属性（即[[Scope]]）。然后，使用this.arguments和其他命名参数的值来初始化函数的活动对象。但在作用域链中，外部函数的活动对象始终处于第二位，外部函数的外部函数的活动对象始终处于第三位，......直至作为作用域链终点的全局执行环境。

闭包与变量

// i 最终为10
function createFunctions () {
    var result = new Array();
    for (var i = 0; i < 10; i++) {
        result[i] = function () {
            return i
        }
    }
    return result;
}
// i 为 0，1，2...9
function createFunctions () {
    var result = new Array();
    for (var i = 0; i < 10; i++) {
        result[i] = function (num) {
            return function (arguments) {
                return num;
            };
        }(i)
    }
    return result;
}

关于this对象

this对象是在运行中基于函数的执行环境绑定的：在全局函数中，this等于window，而当函数被作为某个对象的方法调用时，this等于那个对象。不过匿名函数的执行环境具有全局性，因此其this对象通常指向window。当然，再通过call()和apply()改变执行函数执行环境的情况下，this就会指向其他对象

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

模仿块级作用域

匿名函数可以用来模仿块级作用域并避免这个问题。用块级作用域(通常称为私有作用域)的匿名函数的语法如下所示。

(function(){

})()

私有变量

function Person(name) {
    this.getName = function() {
        retirm name;
    }
    this.setName = function(value) {
        name = value
    }
}
var person = new Person("Nicholas");
console.log(person.getName()); // "Nicholas"
person.setName("Greg");
console.log(person.getName()); // "Greg"

以上代码的构造函数中定义了两个特权方法：getName()和setName()。这两个方法都可以在构造函数外部使用，而且都有权访问私有变量name。但在Person构造函数外部，没有任何方法访问name。由于这两个方法是在构造函数内部定义的，它们作为闭包能够通过作用域链访问name。
静态私有变量

全局作用域

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

var age = 29;
window.color = "red";
delete window.age; // 不会报错
delete window.color // 不会报错 返回true
var newValue = oldValue; // 会抛出错误，因为oldValue未定义
var newValue = window.oldValue; // 不会报错，因为这是一次属性查询

窗口关系及框架

了解frameset和frame
窗口位置

下列代码可以跨浏览器取得窗口左边和上边的位置
Opera支持screenX，screenY。其他浏览器支持screenLeft，screenTop

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

locatoin对象的属性

replace方法替换当前浏览窗口，reload方法刷新浏览器窗口

navigator对象
识别浏览器的信息

DOM是针对HTML和XML文档的一个API。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)

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

nodeName和nodeValue属性

nodeName返回节点的标签名，如p，div，span等
nodeValue的值始终是null

节点关系

操作节点

appendChild()：向childNodes列表的末尾添加一个节点

insertBefore()：向childNodes列表某个特定位置添加一个节点。该方法接收两个参数：要插入的节点和作为参照的节点，并返回要插入的节点，如果参照节点是null，则和appendChild()执行相同的操作

replaceChild()：替换节点。接收要插入的节点和要替换的节点两个参数。要替换的节点将被返回并从文档书中被移除。

removeChild()：移除节点。接收一个参数，就是需要移除的节点

cloneNode()：创建调用这个方法节点的一个完全相同的副本。接受一个布尔值参数，表示是否执行深复制

normalize()

createElement()：创建元素

createTextNode()：创建文本节点

createComment()：创建注释节点

getElementById()方法：通过id获取

getElementsByName()方法：通过name属性，一般使用它获取表单元素，少用

getElementsByTagName()方法：通过标签名获取元素

getElementsByClassName()方法：通过类名获取元素

querySelector()方法：接收一个CSS选择符，返回与该模式匹配的第一个元素，没有则返回null

querySelectorAll()方法：接收一个CSS选择符，返回一个NodeList实例

macthsSelector()方法：接收一个CSS选择符，如果调用元素与该选择符匹配，返回true否则返回false

事件流

事件冒泡
IE的事件流叫做事件冒泡，即事件开始由最具体的元素接收，然后逐级向上传播到较为不具体的节点
事件捕获
Netscape的事件流叫事件捕获，即不太具体的节点应该更早接收事件，而最具体的节点应该最后接收事件
DOM事件流
包括三个阶段：事件捕获阶段。处于目标阶段和事件冒泡阶段

事件处理程序

DOM2级时间处理程序
addEventListener
removeEventListener
定义了两个方法用于处理指定和删除事件处理程序的操作。所有的DOM节点中都包含这两个方法，接受三个参数：事件名、事件处理程序和布尔值。最后这个布尔值如果是true，表示在捕获阶段调用事件处理程序；false表示在冒泡阶段调用事件处理程序，默认是false。
通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除。如果通过addEventListener()添加的匿名函数将无法移除。传入的函数要相同，否则无法移除
attachEvent
detachEvent
这两个方法接受两个参数：事件名（带on）和事件处理函数。
var btn = document.getElementById("myBtn");
var handler = function(){ console.log("clicked") };
btn.attachEvent("onclick", handler);
btn.detachEvent("onclick", handler); // 有效

事件对象

DOM的事件对象

事件类型

UI事件
load：当页面完全加载后在window上面触发，img图片加载完
unload：当页面完全卸载
abort：当用户停止下载过程
error：当发生JavaScript错误时在window触发
select：当用户选择文本框中的一个或者多个触发
resize：当窗口大小变化是触发
scroll：用户滚动时触发

内存和性能
事件委托利用了时间冒泡，指定一个事件处理程序，就可以管理某一个类型的所有事件

HTML5脚本编程

跨文档消息传递
核心方法是postMessage()方法，接受两个参数：一条消息和一个表示消息接收方来自哪个域的字符串。
// 注意：所有支持XDM的浏览器也支持iframe的contentWindow属性

var iframeWindow = document.getElementById("myframe").contentWindow;
iframeWindow.postMessage("A secret", "http://www.wrox.com");

高级技巧

高级函数
安全的类型检测

function isArray (value) {
    return Object.prototype.toString.call(value) === "[object Array]";
}
function isFunction (value) {
    return Object.prototype.toString.call(value) === "[object Function]";
}
function isRegExp (value) {
    return Object.prototype.toString.call(value) === "[object RegExp]";
}

作用域安全的构造函数
防止this指向window对象

function Person (name, age, job) {
    if (this instanceof Person) {
        this.name = name;
        this.age = age;
        this.job = job;
    } else {
        return new Person(name, age, jon);
    }
}

惰性载入函数
function createXHR(){
    if (typeof XMLHttpRequest != "undefined"){
        return new XMLHttpRequest();
    } else if (typeof ActiveXObject != "undefined"){
        if (typeof arguments.callee.activeXString != "string"){
            var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"],
                i,len;
            for (i=0,len=versions.length; i < len; i++){
                try {
                    new ActiveXObject(versions[i]);
                    arguments.callee.activeXString = versions[i];
                    break;
                } catch (ex){
                    //跳过
                }
            }
        }
        return new ActiveXObject(arguments.callee.activeXString);
    } else {
        throw new Error("No XHR object available.");
    }
}

第一种实现方法：
function createXHR () {
    if (typeof XMLHttpRequest != "undefined") {
        createXHR = function () {
            return new XMLHttpRequest();
        };
    } else if (typeof ActiveXObjext != "undefined") {
        createXHR = function () {
            if (typeof arguments.callee.activeXString != "string") {
                var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"],
                    i,len;
                for (i = 0, len = versions.length; i < len; i++) {
                    try {
                        new ActiveXObject(versions[i]);
                        arguments.callee.activeXString = versions[i];
                        break;
                    } catch (e) {
                        // skip
                    }
                }
            }
            return new ActiveXObject(arguments.callee.activeXString);
        };
    } else {
        createXHR = function () {
            throw new Error("No XHR object available.");
        }
    }
    return createXHR();
}

第二种改法：
var createXHR = (function () {
    if (typeof XMLHttpRequest != "undefined") {
        return function () {
            return new XMLHttpRequest();
        };
    } else if (typeof ActiveXObjext != "undefined") {
        return function () {
            if (typeof arguments.callee.activeXString != "string") {
                var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"],
                    i,len;
                for (i = 0, len = versions.length; i < len; i++) {
                    try {
                        new ActiveXObject(versions[i]);
                        arguments.callee.activeXString = versions[i];
                        break;
                    } catch (e) {
                        // skip
                    }
                }
            }
            return new ActiveXObject(arguments.callee.activeXString);
        };
    } else {
        return function () {
            throw new Error("No XHR object available.");
        }
    }
})();

函数绑定

bind函数：
function bind (fn, context) {
    return function () {
        fn.call(context, arguments)
    }
}

函数柯里化
function curry (fn) {
    var args = Array.prototype.slice.call(arguments, 1);
    return function () {
        var innerArgs = Array.prototype.slice.call(arguments)
        var finalArgs = args.concat(innerArgs)
        return fn.apply(null, finalArgs);
    }
}
function bind (fn, context) {
    var args = Array.prototype.slice.call(arguments, 2);
    return function () {
        var innerArgs = Array.prototype.slice.call(arguments)
        var finalArgs = args.concat(innerArgs)
        return fn.apply(context, finalArgs);
    }
}