ES5下

这是 ES5 的入门篇教程的笔记，网址：JavaScript 教程，以下内容中黑体表示大标题，还有一些重点；斜体表示对于自身，还需要下功夫学习的内容。这里面有一些自己的见解，所以若是发现问题，欢迎指出~

实例对象与 new 命令
面向对象编程是目前主流的编程范式，它将真实世界各种复杂的关系，抽象为一个个对象，然后由对象之间的分工与合作，完成对真实世界的模拟。
对象是单个事物的抽象。
对象是一个容器，封装了属性（property）和方法（method）。
属性是对象的状态，方法是对象的行为。两者最主要的区别在于属性属于对象静态的一面，方法属于对象动态的一面。
构造函数
面向对象编程的第一步，就是要生成对象，通常需要一个模板，表示某一类实物的共同特征，然后对象根据这个模板生成。
典型的面向对象编程语言（比如 C ++ 和 JAVA），都有“类”（class）这个概念。所谓“类”就是对象的模板，对象就是“类”的实例。但是 JavaScript 语言的对象体系，不是基于“类”的，而是基于构造函数（constructor）和原型链（prototype）。
构造函数，为了与普通函数区别，构造函数名字的第一个字母通常大写。它有两个特点：1）函数体内部使用了 this 关键字，代表了所要生成的对象实例；2）生成对象的时候，必须使用 new 命令。
new 命令
new 命令的作用，就是执行构造函数，返回一个实例对象。
new 命令本身就可以执行构造函数，所以后面的构造函数可以带括号，也可以不带括号。但是为了表示这里是函数调用，推荐使用括号。

// 推荐的写法
let v = new Vehicle();
// 不推荐的写法
let v = new Vehicle(); // 这两种写法都是等价的

new 命令的原理
使用 new 命令时，它后面的函数依次执行下面的步骤：

1、创建一个空对象，作为将要返回的对象实例；2、将这个空对象的原型，指向构造函数的 prototype 属性；3、将这个空对象赋值给函数内部的 this 关键字；4、开始执行构造函数内部的代码。

如果构造函数内部由 return 语句，而且 return 后面跟着一个对象，new 命令会返回 return 语句指定的对象；否则，就会不管 return 语句，返回 this 对象。（也就是说，new 后，只能返回对象，要么是自身，要么是一个新对象。）
构造函数与普通函数最主要的区别，是内部有没有 this 关键字的函数。
对普通函数使用 new 命令，会返回一个空对象。

function getMessage() {
    let a = 1;
    return 'this is a message';
}
let msg = new getMessage(); // {}
typeof msg // "object"

构造函数作为模板，可以生成实例对象，但是，有时拿不到构造函数，只能拿到一个现有的对象，通过 Object.create()方法，可以将这个现有的对象作为模板，生成新的实例对象。

let person1 = {
    name: '张三',
    greeting: function() {console.log('Hi! I\'m '+ this.name +'.');
    }
}
let person2 = Obejct.create(person1); // person2 继承了 person1 的属性和方法。person2.name // 张三
person2.greeting() // Hi! I'm 张三.

this 关键字
如果 this 所在的方法不在对象的第一层，这时 this 只是指向当前一层的对象，而不会继承更上面一层。
由于 this 的指向是不确定的，所以切勿在函数中包含多层的 this。

let a = {
    p: 'Hello',
    b: {m: function() {console.log(this.p);
        }
    }
};
a.b.m() // undefined a.b.m 方法在 a 对象的第二层，该方法内部的 this 不是指向 a，而是指向 a.b。

let o = {f1: function () {console.log(this);
        let f2 = function () {console.log(this);
        }(); // 这里是执行函数了，就变成了值}
}
o.f1()
// Object 第一层指向对象 o
// Window 第二层指向全局对象

// 实际执行的如下
let temp = function () {console.log(this);
};
let o = {f1: function() {console.log(this);
        let f2 = temp();}
}

数组中的 map 和 foreach 方法，允许提供一个函数作为参数，这个函数内部不应该使用 this。因为两者回调的 this，是指向 window 对象的。（内层的 this 不指向外部，而是指向顶层对象）解决这种方法可以用中间变量，也可以将 this 当作 foreach 方法的第二个参数，固定运行环境。
JavaScript 提供了 call、apply、bind 三个方法，来切换 / 固定 this 的指向。
函数实例的 call 方法，可以指定函数内部 this 的指向（即函数执行时所在的作用域），然后在所指定的作用域中，调用该函数。
call 的第一个参数就是 this 所要指向的那个对象，后面饿参数则是函数调用时所需的函数。
apply 方法的作用与 call 方法类似，也是改变 this 指向，然后再调用该函数。唯一的区别就是，它接收一个数组作为函数执行时的参数。
如果两个方法没有参数，或者参数为 null 或 undefined，则等同于指向全局对象。

let obj = {};
let f = function () {return this;};
f() === window // true
f.call(obj) === obj // true

func.call(thisVlaue, arg1, arg2, ...)
func.apply(thisValue, [arg1, arg2, ...])
function f(x, y) {console.log(x + y);
}
f.call(null, 1, 1) //2
f.apply(null, [1, 1]) //2

// JS 不提供找出数组最大元素的函数，结合 apply 方法和 Math.max 方法，就可以返回数组的最大元素
let a = [10, 2, 4, 15, 9];
Math.max.apply(null, a) // 15

bind 方法用于将函数体内的 this 绑定到某个对象，然后返回一个新函数。

let d = new Date();
d.getTime() // 1561974996108
let print = d.getTime; // 赋值后，内部的 this 已经不指向 Date 对象的实例了
print() // Uncaught TypeError: this is not a Date object.

// 使用 bind
let print = d.getTime.bind(d);
print() // 1561974996108

空元素（null）与 undefined 的差别在于，数组的 forEach 方法会跳过空元素，但是不会跳过 undefined。

对象的继承
大部分面向对象的编程语言，都是通过“类（class）”实现对象的继承。传统上，JavaSCript 语言的继承不通过 class，而是通过“原型对象（prototype）”实现。
构造函数的缺点：同一个构造函数的多个实例之间，无法共享属性，从而造成对系统资源的浪费。

function Cat(name, color) {
    this.name = name;
    this.color = color;
    this.meow = function () {console.log('喵喵');
    };
}
let cat1 = new Cat('大毛', '白色');
let cat2 = new Cat('二毛', '黑色');
cat1.meow === cat2.meow // false cat1 和 cat2 是同一个构造函数的两个实例，它们都具有 meow 方法。由于 meow 方法是生成在每个实例对象上面的，所以两个实例就生成了两次，没有必要，也浪费了系统资源，需要共享，也就是 JavaScript 的原型对象（prototype）。

prototype 属性的作用
JavaScript 继承机制的涉及思想就是，原型对象的所有属性和方法，都能被实例对象共享。也就是说，如果属性和方法定义在原型上，那么所有实例对象就能共享，不仅节省了内存，还体现了实例对象之间的联系。（感觉像是 Java 类中的公共属性和公共方法一样。。。）
JavaScript 规定，每个函数都有一个 prototype 属性，指向一个对象。对于普通函数来说，该属性基本无用，但是，对于构造函数来说，生成实例的时候，该属性会自动成为实例对象的原型。

function f() {}
typeof f.prototype // "object"

function Animal(name) {this.name = name;}
Animal.prototype.color = 'white'; // 原型对象上添加一个 color 属性，下面的实例对象都共享了该属性。let cat1 = new Animal('大毛');
let cat2 = new Animal('二毛');
cat1.color // 'white'
cat2.color // 'white'
// 原型对象的属性不是实例对象自身的属性。只要修改原型对象，变动就立刻会体现在所有实例对象上
Animal.prototype.color = 'yellow';
cat1.color // "yellow"
cat2.color // "yellow"
// 如果实例对象自身就有某个属性或方法，它就不会再去原型对象寻找这个属性或方法。cat1.color = 'black';
cat1.color // 'black'
cat2.color // 'yellow'

综上，原型对象的作用，就是定义所有实例对象共享的属性和方法，而实例对象可以视作从原型对象衍生出来的子对象。
原型链
JavaScript 规定，所有对象都有自己的原型对象（prototype）。一方面，任何我一个对象，都可以充当其他对象的原型；另一方面，由于原型对象也是对象，所以它也有自己的原型。因此，就会形成一个“原型链”（prototype chain）：对象到原型，再到原型的原型……如果一层层地上溯，所有对象的原型最终都可以上溯到 Object.prototype，即 Object 构造函数的 prototype 属性。也就是说，所有对象都继承了 Object.prototype 的属性。这就是所有对象都有 valueOf 和 toString 方法的原因，因为这是从 Object.prototype 继承的。
其实，Object.prototype 对象也有他的原型，Object.prototype 的原型是 null。null 没有任何属性和方法，也米有自己的原型。因此，原型链的尽头就是 null。

Object.getPrototypeOf(Object.prototype) // null

如果对象自身和它的原型，都定义了一个同名属性，那么优先读取对象自身的属性，这叫做“覆盖”（overriding）。举例来说，如果让构造函数的 prototype 属性指向一个数组，就意味着实例对象可以调用数组方法。
constructor 属性
prototype 对象有一个 constructor 属性，默认指向 prototype 对象所在的构造函数。
constructor 属性的作用是，可以得知某个实例对象，到底是哪一个构造函数产生的。

function P() {}
P.prototype.constructor === P // true constructor 属性定义在 prototype 对象上，意味着可以被所有实例对象继承。let p = new P();
p.constructor === P // true p 是构造函数 P 的实例对象
p.constructor === P.prototype.constructor // true
p.hasOwnPrototype('constructor') // false p 自身没有 constructor 属性，该属性是读取原型链上面的 P.prototype.constructor 属性

instanceof 运算符
instanceof 运算符返回一个布尔值，表示对象是否为某个构造函数的实例。（左边是实例对象，右边是构造函数。）

let v = new Vehicle();
v instanceof Vehicle // true 实际检查右边构建函数的原型对象（prototype），是否在左边对象的原型链上。// 等同于
Vehicle.prototype.isPrototypeOf(v)

// instanceOf 检查的是整个原型链，因此同一个实例对象，可能会对多个构造函数都返回 true
let d = new Date();
d instanceof Date // true
d instanceof Object // true d 同时是 Date 和 Object 的实例

// 任意对象（除了 null）都是 Object 的实例，所以 instanceof 运算符可以判断一个值是否为非 null 的对象
typeof null // Object 是为了防止这种情况的发生
null instanceof Object // false

// 但是需要注意的是，instanceof 运算符只能用于对象，不适用原始类型的值
let s = 'hello';
's' instanceof String // false
new String('s') instanceof String // true

// 对于 undefined 和 null，instanceof 运算符总是返回 false
undefined instanceof Object // false
null instanceof Object // false

emm，对象的继承中的模块内容还需要下狠功夫
Object 对象的相关方法
Object.getPrototypeOf() 方法返回参数对象的原型，这是获取原型对象的标准方法。

let F = function () {};
let f = new F();
Object.getPrototypeOf(f) === F.prototype // true

// 特殊对象的原型
// 空对象的原型是 Object.prototype
Object.getPrototypeOf({}) === Object.prototype // true
// Object.prototype 的原型是 null
Object.getPrototypeOf(Objectprototype) === null // true
// 函数的原型是 Function.prototype
function f() {}
Object.getPrototypeOf(f) === Function.prototype // true

Object.create()可以从一个实例对象，生成另一个实例对象。该方法接受一个对象作为参数，然后以它为原型，返回一个实例对象，该实例完全继承原型对象的属性。

// 原型对象 没有 this，所以不是构造函数！！！不能用 new 来创建，这是一个实例对象。let A = {print: function () {console.log('hello');
    }
}
// 实例对象
let B = Object.create(A); // 相当于创建一个空的构造函数，将其.prototype 属性指向参数对象 A，从而实现让该实例继承 A 的属性。Object.getPrototypeOf(B) === A // true 以 A 对象为原型，生成了 B 对象，B 继承了 A 的所有属性和方法
B.print() // hello
B.print === A.print // true

// 以下三种方式生成的新对象是等价的
let obj1 = Object.create({});
let obj2 = Object.create(Object.prototype);
let obj3 = new Object();

//Object.create 方法生成的新对象，动态继承了原型。在原型上添加或修改任何方法，会立刻反映在新对象之上。let obj1 = {p: 1};
let obj2 = Object.create(obj1);
obj1.p = 2;
obj2.p // 2 修改对象原型 obj1 会影响到实例对象 obj2
obj2.p = 3;
obj1.p // 1 修实例对象 obj2 并不会影响到原型对象 obj1
obj2.p // 3

length 用来截断长度，只对数组有效，对字符串无效。
emm 面向对象的编程也是云里雾里的，fighting！
异步操作概述
JavaScript 只在一个线程上运行，也就是说，JavaScript 同时只能执行一个任务，其他任务都必须在后面排队等待。
程序里面所有的任务，可以分成两类：同步任务（synchronous）和异步任务（asynchronous）。同步任务是那些没有被引擎挂起、在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。异步任务是那些被引擎放在一边，不进入主线程、而进入任务队列的任务，只有引擎认为某个异步任务可以执行了（比如 Ajax 操作从服务器得到了结果），该任务（采用回调函数的形式）才会进入主线程执行。也就是说，异步任务不具有“堵塞”效应。
JavaScript 运行时，除了一个正在运行的主线程，引擎还提供了一个任务队列（task queue），里面是各种需要当前程序处理的异步任务。（实际上，根据异步任务的类型，存在多个任务队列。为了方便理解，这里假设只存在一个队列。）
引擎如何确定异步任务有没有结果，能不能进入主线程呢？答案就是引擎在不停地检查，一遍又一遍，只要同步任务执行完了，引擎就会去检查那些挂起来的异步任务，是不是可以进入主线程了。这种循环检查的机制，就叫做时间循环（Event Loop）。维基百科的定义是：“事件循环是一个程序结构，用于等待和发送消息和事件”（a programming construct that waits for and dispatches events or messages in a program）。
异步操作的模式：
1、回调函数 回调函数是异步操作最基本的方法。（包括 Promise）

function f1() {// ...}
function f2() {// ...}

f1();
f2(); // 这样编程的意图是 f2 必须等到 f1 执行完成，才能执行。// 但是如果 f1 是异步操作，f2 会立即执行，不会等到 f1 结束再执行。这种情况下，可以考虑改写 f1，把 f2 写成 f1 的回调函数。function f1(callback) {
    // ...
    callback();}
function f2() {// ...}
f1(f2); // 回调函数的优点是简单、容易理解和实现，缺点是不利于代码的阅读和维护，各个部分之间高度耦合（coupling），使得程序结构混乱、流程难以追踪（尤其是多个回调函数嵌套的情况），而且每个任务只能指定一个回调函数。

2、事件监听
以前只记着是定时器，现在才知道，应该是事件监听！！！还是需要多看！！！
另一种思路是采用事件驱动模式。异步任务的执行不取决于代码的顺序，而取决于某个事件是否发生。

f1.on('done', f2); // 当 f1 发生 done 事件，就执行 f2。接着，对 f1 进行改写
function f1() {setTimeout(function () {
        // ...
        f1.trigger('done'); // 表示执行完成后，立即触发 done 事件，从而开始执行 f2
    }, 1000);
}

这种方法比较容易理解，可以绑定多个事件，每个事件可以指定多个回调函数，并且可以“去耦合”（decoupling），有利于实现模块化。缺点是整个程序都要编程事件驱动型，运行流程会变得很不清晰。阅读代码的时候，很难看出主流程。
3、发布 / 订阅
事件完全可以理解成“信号”，如果存在一个“信号中心”，某个任务执行完成，就向信号中心“发布”（publish）一个信号，其他任务可以向信号中心“订阅”（subscribe）整个信号，从而知道什么时候自己可以开始执行。这就叫做“发布 / 订阅模式”（publish-subscribe parttern），又称“观察者模式”（observer pattern）。
观察者模式还不是了解，还需要学习！！

定时器
JavaScript 提供定时执行代码的能力，叫做定时器（timer），主要由 setTimeout() 和 setInterval()这两个函数来完成。
1、setTimeout()
该函数用来指定某个函数或某段代码，再多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。
setTimeout 函数接受两个参数，第一个参数 func|code 是将要推迟执行的函数名或者一段代码，第二个参数是推迟执行的毫秒数。

let timerId = setTimeout(func|code, delay);

console.log(1);
setTimeout('console.log(2)', 1000); // 需要注意的是，console.log(2)必须以字符串的形式，作为 setTimeout 的参数
console.log(3);
// 1
// 3
// 2

function f() {console.log(2);
}
setTimeout(f, 1000); // 如果推迟执行的是函数，就直接将函数名，作为 setTimeout 的参数。

2、setInterval()
该函数的用法与 setTimeout 完全一样，区别仅仅在于 setInterval 指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行。

// 清除定时器
var id1 = setTimeout(f, 1000);
var id2 = setInterval(f, 1000);
clearTimeout(id1);
clearInterval(id2);

3、实例：debounce 函数
debounce 防抖动， 这是个好东西，以后要好好看看！！感觉可以用到小程序以及 h5 的输入框输入！！
4、setTimeout(f, 0)
setTimeout 的作用是将代码推迟到指定时间执行，如果指定时间为 0，即 setTimeout(f, 0), 那么会立刻执行吗？答案是不会，因为它必须要等到当前脚本的同步任务，全部处理完以后，才会执行 setTimeout 指定的回调函数 f。也就是说，setTimeout(f, 0)会在下一轮事件循环一开始就执行。

setTimeout(function () {console.log(1);
}, 0);
console.log(2);
// 2
// 1

Promise 对象
Promise 对象是 JavaScript 的异步操作解决方案，为异步操作提供统一接口。它起到代理作用（proxy），充当异步操作与回调函数之间的中介，使得异步操作具备同步操作的接口。
Promise 对象的状态：Promise 对象通过自身的状态，来控制异步操作。
Promise 实例具有三种状态：
1）异步操作未成功（pending）
2）异步操作成功（fulfilled）
3）异步操作失败（rejected）
三种状态里面，fulfilled 和 rejected 合在一起称为 resolved（已定型）。
这三种状态的变化途径只有两种：从“未完成”到“成功”；从“未完成”到“失败”。
一旦状态发生变化，就凝固了，不会再有新的状态变化。这也是 Promise 这个名字的又来，它的英文意思是“承若”，一旦承诺成效，就不得再改变了。这也意味着，Promise 实例的状态变化只可能发生一次。因此，Promise 的最终结果只有两种：
1）异步操作成功，Promise 实例传回一个值（value），状态变为 fulfilled；
2）异步操作失败，Promise 实例抛出一个错误（error），状态变为 rejected。
JavaScript 提供原生的 Promise 构造函数，用来生成 Promise 实例。
Promise 构造函数接受一个函数作为参数，该函数的两个参数分别是 resolve 和 reject，它们是两个函数，由 JavaScript 引擎提供，不用自己实现。
resolve 函数的作用是，将 Promise 实例的状态从“未完成”变为“成功”（即从 pending 变为 fulfilled），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去。
reject 函数的作用是，将 Promise 实例的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

DOM 概述
DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如增删内容）。
DOM 的最小组成单位叫做节点（node）。文档的属性结构（DOM 树），就是由各种不同类型的节点组成，每个节点可以看作是文档树的一片叶子。
节点的类型有七种：
Document：整个文档树的顶层节点
DocumentType：doctype 标签（比如 <!DOCTYPE html>）
Element：网页的各种 HTML 标签（比如 <body>、<a> 等）
Attribute：网页元素的属性（比如 class=”right”）
Text：标签之间或标签包含的文本
Comment：注释
DocumentFragment：文档的片段
浏览器提供一个原生的节点对象 Node，上面这七种节点都继承了 Node，因此具有一些共同的属性和方法。
emm 后面的看不下去了，再见!!!