《JavaScript 高级程序设计》

第 3 章 基本概念

3.5.2 位操作符

ECMAScript 中所有数值都是以 IEEE-754 64 位格式存储，但位操作符并不直接操作 64 位的值。而是先将 64 位的值转换成 32 位的整数，然后执行操作，最后再将结果转换为 64 位。（对于开发人员 64 位存储格式是透明的，因此整个过程像是只存在 32 位的整数一样）

3.5.6 关系操作符

• 比较的操作数为对象，则调用 valueOf() 方法（没有 valueOf() 调用 toString() 方法），用得到的值进行比较
• 比较的操作数为布尔值，则转换为数字比较

3.7.1 理解参数

• 修改 arguments 数组会改变形参的值（这并不是说它们访问相同的内存空间；它们的内存空间是独立的，但它们的值会同步。比如未传入形参时，修改了 arguments 数组形参值也不会变）

function func(para1, para2){
  console.log('修改前', arguments , para1, para2);
  arguments [0] = 'arguements_0';
  arguments [1] = 'arguements_1';
  console.log('修改后', arguments , para1, para2);
}
func('para1')

• arguments 对象的长度是由传入的参数个数决定的，不是由定义函数时的命名参数的个数决定的。
• ECMAScript 中的参数都是值传递，不存在引用传递

第 4 章 变量、作用域和内存问题

4.1 基本类型和引用类型的值

基本类型：

1. Undefined
2. Null
3. Boolean
4. Number
5. String（注意 String 是基本类型）

基本类型的值无法添加属性（尽管这样不会报错），eg：

var name = "zhang";
name.age = 17;
console.log(name.age);// undefined

引用类型：

1. Object

4.1.3 传递参数

ECMAScript 中所有函数的参数都是按值传递的。

eg：这里的 obj 形参是创建了一个指针让他与 person 指针指向同一个地址，obj 和 person 都指向同一个地址，但改变 obj 的指向 person 不改变

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

4.2.2 没有块级作用域

使用 var 声明的变量会自动被添加到最接近的环境中。在函数内部，最接近的环境就是函数的局部环境；在 with 语句中，最接近的环境是函数环境。如果初始化变量时没有使用 var 声明，该变量会自动被添加到全局环境。

// 1.if
if (true) {
    var color = "blue";
}
alert(color); //"blue"

// 2.for
for (var i=0; i < 10; i++){
}
alert(i); //10

// 3.function
function add(num1, num2) {
    var sum = num1 + num2;
    return sum;
}
alert(sum); //由于 sum 不是有效的变量，因此会导致错误

现在使用 ES6 的let会声明块级作用域变量。

4.3 垃圾收集

常用标记清除，不常用引用计数

第 5 章 引用类型

5.2 Array 类型

如果 slice() 方法的参数中有一个负数，则用数组长度加上该数来确定相应的位置。例如，在一个包含 5 项的数组上调用 slice(-2,-1) 与调用 slice(3,4) 得到的结果相同。如果结束位置小于起始位置，则返回空数组。

5.2.8 迭代方法

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

5.2.9 归并方法

ECMAScript 5 还新增了两个归并数组的方法： reduce() 和 reduceRight()。这两个方法都会迭代数组的所有项，然后构建一个最终返回的值。其中， reduce() 方法从数组的第一项开始，逐个遍历到最后。而 reduceRight() 则从数组的最后一项开始，向前遍历到第一项。

第 6 章 面向对象的程序设计

6.1.1 属性类型

1. 数据属性
2. 访问器属性（VUE 双向绑定实现的基础）

6.2 创建对象

1. 工厂模式（使用函数创建对象，为对象添加属性和方法然后返回对象，被构造函数模式取代）

   function createPersion(name, age) {
       return {
           name,
           age
       }
   }
   
   var p1 = createPersion("zhang", 17);
   var p2 = createPersion("foo", 18);

2. 构造函数模式（每个实例不共用属性和方法，JS 中函数是对象）

   function Persion(name, age) {
       this.name = name;
       this.age = age;
       this.print = function () {
           console.log(this.name);
       }
   }
   
   var p1 = new Persion("zhang", 17);
   var p2 = new Persion("foo", 18);

3. 原型模式（每个实例共用一套属性和方法）

   function Persion() {}
   Persion.prototype.name = "zhang";
   Persion.prototype.age = 17;
   Persion.prototype.print = function () {
       console.log(this.name);
   }
   
   var p1 = new Persion();
   var p2 = new Persion();

4. 组合使用构造函数模式和原型模式（既有共用又有不共用的属性和方法）

   • 这是目前使用最广泛的创建自定义类型的方法。

   • 使用对象覆盖原型（字面量方式修改原型）要注意已经创建的实例的constructor指针不会自动变（还是覆盖前的原型）。

   function Persion(name, age) {
       this.name = name;
       this.age = age;
   }
   Persion.prototype = {
       constructor: Persion,
       print: function () {
           console.log(this.name);
       }
   }
   
   var p1 = new Persion("zhang", 17);
   var p2 = new Persion("foo", 18);

5. 动态原型模式（给原型添加属性的操作放到构造函数内）

   function Persion(name, age) {
       this.name = name;
       this.age = age;
       // 第一次执行时初始化
       if (typeof this.print !== "function") {
           Persion.prototype.print = function () {
               console.log(this.name);
           }
       }
   }
   
   var p1 = new Persion("zhang", 17);
   var p2 = new Persion("foo", 18);

6. 寄生构造函数模式（和工厂模式几乎一样，可以为对象创建构造函数）

   function MyArray(){
       let arr = new Array();
       arr.push.apply(arr, arguments);
       arr.toPipeString = function(){
           return this.join("|");
       }
       return arr;
   }
   
   var marr = new MyArray(1,2,3);
   console.log(marr.toPipeString());

7. 稳妥构造函数模式

   • 稳妥对象：没有公共属性，方法也不引用this对象。适合用在安全环境中，或防止数据被其他程序改动。

   function Persion(name, age) {
       var o = {};
   
       // 除了使用 print 没有其他方法能获取到 name
       o.print = function () {
           console.log(name);
       }
       return o;
   }
   
   var p1 = new Persion("zhang", 17);
   var p2 = new Persion("foo", 18);

6.3 继承

OO 语言支持两种继承：接口继承和实现继承。由于函数没有签名，ES 无法实现接口继承。

1. 原型链

   有两个问题：1 属性共享， 2 无法参数传递

   function SuperType(para) {
       this.property = true;
       this.arr = [1, 2, 3];
       this.para = para;
   }
   
   SuperType.prototype.getSuperProp = function () {
       return this.property;
   }
   
   function SubType() {
       this.subproperty = false;
   }
   
   // 继承(这时 SubType.prototype.constructor 属性没有了，SubType.[[prototype]].constructor 为 SuperType)
   SubType.prototype = new SuperType();
   
   SubType.prototype.getSubProp = function () {
       return this.subproperty;
   }
   
   // 问题1：无法向父类构造函数传值
   var instance1 = new SubType();
   var instance2 = new SubType();
   
   // 问题2：instance2.arr 也改变了
   instance1.arr.push(4);

2. 借用构造函数

   和创建对象的构造函数模式的问题一样，每个实例不共用属性和方法。

   function SuperType(para) {
       this.para = para;
       this.getPara = function(){
           return this.para;
       }
   }
   
   function SubType() {
       SuperType.apply(this, arguments);
   }
   
   // 可以向父类构造函数传值
   var instance1 = new SubType("instance1");
   var instance2 = new SubType("instance2");

3. 组合继承

   原型链 + 借用构造函数

   JS 中最常用的继承模式。

   function SuperType(para) {
       this.property = true;
       this.arr = [1, 2, 3];
       this.para = para;
   }
   
   SuperType.prototype.getSuperProp = function () {
       return this.property;
   }
   
   function SubType() {
       SuperType.apply(this, arguments);
       this.subproperty = false;
   }
   
   // 继承
   SubType.prototype = new SuperType();
   SubType.prototype.constructor = SubType;
   
   SubType.prototype.getSubProp = function () {
       return this.subproperty;
   }
   
   // 可以向父类构造函数传值
   var instance1 = new SubType("instance1");
   var instance2 = new SubType("instance2");
   
   // instance2.arr 不变
   instance1.arr.push(4);

4. 原型式继承

   有两个问题：1 属性会共享，2 每个实例无法共用方法

   function createObj(obj) {
       function f() {};
       f.prototype = obj;
       return new f();
   }
   
   var person = {
       name: "zhang",
       age: [17]
   }
   
   // person、 zi 和 ma 共用引用属性 age
   var zi = createObj(person);
   var ma = createObj(person);
   
   zi.age.push(18);
   ma.age.push(17);
   console.log(person.age);

5. 寄生式继承

   和创建对象的寄生构造函数模式类似，也有属性会共享的问题

   function createObjParasitic(obj) {
       let o = Object.create(obj);
       // o 目前是如下对象：
       // {
       //     [[prototype]] = obj
       // }
       o.sayHi = function () {
           console.log("hi")
       }
       return o;
   }
   
   var person = {
       name: "zhang",
       age: [17]
   }
   
   var zi = createObjParasitic(person);
   
   zi.sayHi();

6. 寄生组合式继承

   寄生式继承 + 组合式继承

   将new SuperType()改为Object.create(SuperType.prototype)减少一次父类的调用，还避免了在SubType.prototype上添加不必要的属性（如：下面的property和arr属性）。

   function inheritPrototype(sub, sup) {
       // 使 sub.prototype 的 [[prototype]] “指针”指向 sup.prototype
       sub.prototype = Object.create(sup.prototype);
       sub.prototype.constructor = sub;
   }
   
   function SuperType() {
       this.property = true;
       this.arr = [1, 2, 3];
   }
   
   SuperType.prototype.getSuperProp = function () {
       return this.property;
   }
   
   function SubType() {
       SuperType.apply(this, arguments);
       this.subproperty = false;
   }
   
   inheritPrototype(SubType, SuperType);
   
   console.log((new SubType()).getSuperProp());

第 7 章 函数表达式

定义函数有两种形式：函数声明（会函数声明提升）和函数表达式。

7.2 闭包

闭包指有权访问另一个函数作用域中的变量的函数。

7.2.2 关于 this 对象

每个函数在被调用时都会自动取得两个特殊变量： this 和 arguments。内部函数在搜索这两个变量时，只会搜索到其活动对象为止，因此永远不可能直接访问外部函数中的这两个变量。不过，把外部作用域中的 this 对象保存在一个闭包能够访问到的变量里，就可以让闭包访问该对象了。

如果想访问作用域中的 this 和 arguments 对象必须把她们保存在闭包可以访问的变量中。

var name = "The Window";
var object = {
    name: "My Object",
    getNameFunc: function () {
        return function () {
            // this指向window
            return this.name;
        };
    }
};
console.log(object.getNameFunc()()); //"The Window"（在非严格模式下）

var name = "The Window";
var object = {
    name: "My Object",
    getNameFunc: function () {
        var that = this;
        return function () {
            // 闭包可以访问that
            // this指向window，that指向object
            return that.name;
        };
    }
};
console.log(object.getNameFunc()()); //"My Object"

7.4 私有变量

JS 中没有使用成员的概念，所有对象属性都是共有的。但在函数中定义的变量都可以认为是私有比阿尼浪，因为不能在函数外部访问这些变量（包括：参数、局部变量和函数内部定义的其他函数）。

7.4.2 模块模式

JS 以字面量的方式创建单例对象。

var singleton = {
    name: "xxx",
    method: function () {
        // ...
    }
}

7.4.3 增强的模块模式

// 这时 function(){...}() 是当做语句解析的
var application = function(){
    //私有变量和函数
    var components = new Array();
    //初始化
    components.push(new BaseComponent());
    //创建 application 的一个局部副本
    var app = new BaseComponent();
    //公共接口
    app.getComponentCount = function(){
        return components.length;
    };
    app.registerComponent = function(component){
        if (typeof component == "object"){
             components.push(component);
        }
    };
    //返回这个副本
    return app;
}();

第 8 章 BOM

8.1 window 对象

BOM 的核心是 window 对象，它表示浏览器的一个实例，同时也是 ES 中规定的 Global 对象。

8.1.2 窗口关系及框架

如果页面中包含框架，则每个框架都拥有自己的 window 对象，并且保存在 frames 集合中。在 frames 集合中，可以通过数值索引（从 0 开始，从左至右，从上到下）或者框架名称来访问相应的 window 对象。每个 window 对象都有一个 name 属性，其中包含框架的名称。

在使用框架的情况下，浏览器中会存在多个 Global 对象。在每个框架中定义的全局变量会自动成为框架中 window 对象的属性。由于每个 window 对象都包含原生类型的构造函数，因此每个框架都有一套自己的构造函数，这些构造函数一一对应，但并不相等。例如，top.Object并不等于top.frames[0].Object。这个问题会影响到对跨框架传递的对象使用instanceof操作符。

• window.top对象始终指向最外层框架，也就是浏览器窗口
• window.parent指向父窗口
• window.self指向 window

8.1.3 窗口位置

窗口相对屏幕的位置：window.screenLeft和window.screenTop

窗口位置移动（默认是禁用的）：window.moveTo()和window.moveBy()

8.1.4 窗口大小

浏览器窗口大小（不同浏览器对这些属性的解释不同）：window.innerHeight、window.innerWidth、window.outerWidth和window.outerWidth

页面视口信息：window.document.documentElement.clientWidth和window.document.documentElement.clientHeight

浏览器窗口大小改变（默认是禁用的）：window.resizeTo()和window.resizeBy()

8.1.6 间歇调用和超时调用

一般认为，使用超时调用来模拟间歇调用是一种最佳模式。在开发环境下，很少使用真正的间歇调用，原因是后一个间歇调用可能会在前一个间歇调用结束之前启动。而像下面示例中那样使用超时调用，则完全可以避免这一点。所以，最好不要使用间歇调用。

// 超时调用模拟间歇调用
var num = 0;
var max = 10;
function incrementNumber() {
    num++;
    //如果执行次数未达到 max 设定的值，则设置另一次超时调用
    if (num < max) {
        setTimeout(incrementNumber, 500);
    } else {
        alert("Done");
    }
}
setTimeout(incrementNumber, 500);

8.2 location 对象

8.2.2 位置操作

// 基本
location.assign("https://developer.mozilla.org")
// 下面两种和和显示调用 assign 方法一样
window.location = "https://developer.mozilla.org"
location.href = "https://developer.mozilla.org"
// 其他
location.hash = "#123"
location.pathname = "zh-CN"
// replace 的 location 不记录在历史记录中
location.replace("https://developer.mozilla.org")

8.3 navigator 对象

获取浏览器信息、主语言、插件、设置等信息。

8.4 screen 对象

用来获取浏览器窗口外部的显示器信息，如像素宽度、高度等。

8.5 history 对象

// 跳转到最近的 mdn 界面
history.go("developer.mozilla.org");

第 9 章 客户端检测

• 能力（特性）检测：检测浏览器是否支持某项功能

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

• 怪癖检测：检测浏览器某项功能是否有 bug

// 是否有将属性不列举的bug
var hasDontEnumQuirk = function() {
    var o = {
        // 这里新的 toString 应该要列举出来的，因为新的 toString 已经覆盖了旧的 [[Enumerable]] false 的 toString
        // 但 IE8 及更低版本的浏览器会不将 toString 列举。
        toString: function () {}
    };
    for (var prop in o) {
        if (prop === 'toString') {
            return false;
        }
    }
    return true;
}();
console.log(hasDontEnumQuirk());

• 用户代理检测：检测呈现引擎、浏览器、平台、设备和操作系统

  因为用户代理字符串有很长的发展历史，在此期间浏览器供应商试图在用户代理字符串中添加一些欺骗信息，让网站相信自己是另一种浏览器，使得用户代理检测比较复杂。但通过navigator.userAgent（大部分信息在这个字符串中），navigator.platform和window的属性还是可以检测出来呈现引擎、浏览器、平台、设备和操作系统这些信息的。

第 10 章 DOM

10.1 节点层次

HTML 页面中，文档元素始终是元素，XML 中没有预定义的元素，任何元素都可能成为文档元素。

10.1.1 Node 接口

• nodeType属性

每个节点都有nodeType属性，用于表示节点类型。节点类型在 Node 类型中定义的下列 12 个数值常量表示，任何节点的类型必居其一。

参见：Node.nodeType - Web APIs | MDN

• childNodes属性

childNodes属性中保存着一个NodeList对象。

NodeList对象是一种类数组对象，但不是 Array 实例。

DOM 结构变化会自动反映在NodeList对象中，也就是说NodeList对象是动态变化的，而不是一张快照。

将NodeList对象转为数组：

function convertToArray(nodes){
    return Array.prototype.slice.call(nodes, 0);
}

• clonNode()方法

参数为 true 或 false，true 执行深复制（克隆子节点），false 执行浅复制（不克隆子节点）。

clonNode()方法不会复制 JS 的属性（IE 存在 bug，会复制时间处理程序）。

• normalize()方法

  处理文档树中的文本节点。

10.1.2 Document 接口

Document 接口继承自 Node 接口，Document 接口描述了任何类型文档的公共属性和方法。

document 对象是 HTMLDocument 的一个实例。

• dcoumentElement属性

取得的引用

• doctype属性

取得的引用

• titel属性

修改titel属性不会改变