目录

• • • 面向对象的 JS
    • • 多态
      • 封装
      • 原型模式与对象系统
    • this\call\apply
    • • this
      • call\apply

面向对象的 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 执行时的完整过程

1. 现在对象 a 中查找，发现没有 name 属性
2. 再在 a 的构造器中找，即 a.__proto__，发现其连接着 A.prototype
3. 而 A.prototype 又指向了对象 obj
4. 此时直接从对象 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);