面向对象的 JS
多态
相对于 Java 的静态类型，JS 的弱类型模式能让我们高效的使用多态
// 抽象出一个总方法，类似于基类
var renderMap = (map) => {
if (map.show instanceof Function) {
map.show();
}
};
// 定义两个子类，分别实现show方法
let basicMap = {
show: () => {
console.log("初始化地图");
},
};
let anotherMap = {
show: () => {
console.log("另一张地图");
},
};
// 通过基类实现多态调用
renderMap(basicMap);
renderMap(anotherMap);
封装
书中原话记录：通过封装变化的方式，把系统中稳定不变的部分和容易变化的部分隔离开来，在系统的演变过程中，我们只需要替换那些容易变化的部分，如果这些部分是已经封装好的，替换起来也相对容易。这可以最大程度地保证程序的稳定性和可扩展性。
我们可以借助 ES6 中国的 symbol 实现类似 private 修饰符的作用，定义一个私有属性或者方法
Symbol.for 可以将指定属性添加到全局私有属性库（非官方定义概念名，大家理解就好）里面
Symbol.keyFor 从全局私有属性库中寻找指定 symbol
// Symbol.for()可以定义一个全局私有属性
// 每次定义都会从全局symbol寻找是否有重复属性，如果存在就直接引用而不新建（比如下方sb2，就直接引用了sb1）
let sb1 = Symbol.for("uuid");
let sb2 = Symbol.for("uuid");
// 不用for注册的symbol就只是一个局部变量，不会添加到全局私有属性库里面
let sb3 = Symbol("uuid");
// 由于引用一致，故true
console.log(sb1 === sb2); // true
// 由于没有添加到全局私有属性库，故无法通过keyFor获取到值
console.log(Symbol.keyFor(sb3)); // undefined
原型模式与对象系统
最常见的原型继承方式如下：
这是 a.name 执行时的完整过程
- 现在对象 a 中查找，发现没有 name 属性
- 再在 a 的构造器中找，即
a.__proto__，发现其连接着A.prototype - 而
A.prototype又指向了对象 obj - 此时直接从对象 obj 中获取 name 属性
var obj = {
name: "sven" };
var A = function () {
};
A.prototype = obj;
var a = new A();
console.log(a.name); // 输出：sven
类之间的继承可以以以下的方式模拟
// 指定A的原型为一个对象，对象中包含属性name
var A = function () {
};
A.prototype = {
name: "sven" };
// 将B的原型指定为新实例A
var B = function () {
};
B.prototype = new A();
// 构造实例B，然后取出name
var b = new B();
console.log(b.name); // 输出：sven
this\call\apply
this
一般的，为了简化根据 ID 获取 DOM 的代码，我们可以这样写
// 方式一
var getId = function (id) {
return document.getElementById(id);
};
getId("div1");
而不可以这样写
// 方式二
var getId = document.getElementById;
getId("div1");
某些浏览器在执行 document.getElementById 时会用到 this，而方式二中属于普通函数调用，此时的 this 指向 window 而不是 document ，故报错！
可以通过 apply 或者 call 修改 this 指向，从而使得方式二也可以被使用
call\apply
call 和 apply 第一个参数可以为 null，此时的 this 指向即保持默认
特殊情况下，第一个参数传入 null 是为了代替某些具体对象，比如下面的取最大值的方法
let res = Math.max.apply(null, [1, 2, 3, 4, 5]);
console.log(res); // 5
call 修正 this 指向的小案例：
// 修改this使其指向当前DOM，而不是window
document.getElementById("div1").onclick = function () {
var func = function () {
alert(this.id); // 输出：div1
};
func.call(this);
};
对于某些不支持 Function.prototype.bind 的浏览器来说，我们可以简单手写模拟一个
// 模拟Function.prototype.bind
Function.prototype.bind = function (context) {
var self = this; // 保存原函数
return function () {
// 返回一个新的函数
return self.apply(context, arguments); // 执行新的函数的时候，会把之前传入的context
// 当作新函数体内的this
};
};
var obj = {
name: "sven",
};
var func = function () {
alert(this.name); // 输出：sven
}.bind(obj);
func();
借用构造函数
借用 Array.prototype.push 往 arguments 添加一个新的元素
(function () {
Array.prototype.push.call(arguments, 3);
console.log(arguments); // 输出[1,2,3]
})(1, 2);