面向对象的 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);