《JavaScript 设计模式与开发实战》第一部分（1、2、3章）笔记
第1章:面向对象的JavaScript
-
动态类型和鸭子类型
编程语言按照数据类型大体可以分为两类：
① 静态类型语言：在编译时便已确定变量的类型。
② 动态类型语言：变量类型要到程序运行的时候，待变量被赋予某个值之后，才会具有某种类型。
【鸭子类型】：如果它走起路来像鸭子，叫起来像鸭子，那么它就是鸭子。
鸭子类型指导我们只关注对象的行为，而不关注对象本身，也就是关注 HAS-A，而不是 IS-A。
☛ 在动态类型语言的面向对象设计中，鸭子类型的概念至关重要。利用鸭子类型的思想，我们不必借助超类型的帮助，就能轻松地在动态类型语言中实现一个原则：“面向接口编程，而不是面向实现编程。”
-
多态
【多态的实际含义】：同一操作作用于不同的对象上面，可以产生不同的解释和不同的执行结果。即，给不同的对象发送同一个消息的时候，这些对象会根据这个消息分别给出不同的反馈。
【多态背后的思想】：是将“做什么”和“谁去做以及怎样去做”分离开来，也就是将“不变的事物”与“可能改变的事物”分离开来。
静态类型的面向对象语言通常被设计为可以“向上转型”，使用继承得到多态效果，是让对象表现出多态性的最常用手段。
JavaScript 对象的多态性是与生俱来的，并不需要诸如向上转型之类的技术来取得多态的效果。
将行为分布在各个对象中，并让这些对象各自负责自己的行为，这正是面型对象设计的优点。
对象的多态性提示我们，“做什么”和“怎么去做”是可以分开的。
-
封装
封装的目的是将信息隐藏，封装应该被视为“任何形式的封装”，即，封装不仅仅是隐藏数据，还包括隐藏实现细节、设计细节以及隐藏对象的类型等。
（1）封装数据
JavaScript 只能依赖变量的作用域来实现封装特性，而且只能模拟出 public 和 private 这两种封装性。
var myObject = (function() { var __name = 'sven'; // 私有(private)变量 return { getName: function() { // 公开(public)函数 return __name; } } })(); console.log(myObject.getName()); // 'sven' console.log(myObject.__name); // 'undefined'（2）封装实现
封装使得对象之间的耦合变松散，对象之间只通过暴露的 API 接口来通信。
（3）封装类型
封装类型是静态语言中一种重要的封装方式。一般而言，封装类型是通过抽象类和接口来进行的。
而 JavaScript 本身是一门类型模糊的语言，在封装类型方面没有能力，也没有必要做的更多。
（4）封装变化
从设计模式的角度出发，封装在更重要的层面体现为封装变化。
通过封装变化的方式，把系统中稳定不变的部分和容易变化的部分隔离开来，在系统的演变过程中，我们只需要替换那些容易变化的部分，如果这些部分是已经封装好的，替换起来也相对容易。
这可以很大程度地保证程序的稳定性和可扩展性。
-
原型模式和基于原型的 JavaScript 对象系统
（1）使用克隆的原型模式
原型模式是通过克隆来创建对象的。使用原型模式，我们只需要调用负责克隆的方法，便能完成同样的功能。
【原型模式的实现关键】：语言本身是否提供了 clone 方法，ECMAScript 5 提供了
Object.create方法，可以用来克隆对象：var Plane = function() { this.blood = 100; this.attackLevel = 1; this.defenseLevel = 1; }; var plane = new Plane(); plane.blood = 500; plane.attackLevel = 10; plane.defenseLevel = 7; var clonePlane = Object.create(plane); console.log(clonePlane); // 在不支持 Object.create 方法的浏览器中，可以使用以下代码： Object.create = Object.create || function(obj) { var F = function() {}; F.prototype = obj; return new F(); }（2）克隆是创建对象的手段
原型模式的真正目的并非在于需要得到一个一模一样的对象，而是提供了一种便捷的方式去创建某个类型的对象，克隆只是创建这个对象的过程和手段。
（3）体验 Io 语言
原型模式不仅仅是一种设计模式，也是一种编程范型。JavaScript 就是使用原型模式来搭建整个面向对象系统的。
在 JavaScript 语言中不存在类的概念，对象也并非从类中创建出来的，所有的 JavaScript 对象都是从某个对象上克隆而来的。
（4）原型编程范型的一些规则
【原型编程中的一个重要特性】：当对象无法响应某个请求时，会把该请求委托给它自己的原型。
【原型编程范型至少包括以下基本规则】：
- 所有的数据都是对象。
- 要得到一个对象，不是通过实例化类，而是找到一个对象作为原型并克隆它。
- 对象会记住它的原型。
- 如果对象无法响应某个请求，它会把这个请求委托给它自己的原型。
（5）JavaScript 中的原型继承
① 所有的数据都是对象
JavaScript 在设计时，模仿 Java 引入了两套类型机制：基本类型和对象类型。基本类型包括
undefined、number、boolean、string、function、object。按照 JavaScript 设计者的本意，除了
undefined之外，一切都应是对象。为了实现这一目标，number、boolean、string这几种基本类型数据也可以通过“包装类”的方式变成对象类型数据来处理。我们不能说在 JavaScript 中所有的数据都是对象，但可以说绝大部分数据都是对象。 JavaScript 中的跟对象是
Object.prototype空对象，每个对象都是从它克隆而来的，它就是它们的原型。var obj1 = new Object(); var obj2 = {}; console.log(Object.getPrototypeOf(obj1) === Object.prototype); // true console.log(Object.getPrototypeOf(obj2) === Object.prototype); // true② 要得到一个对象，不是通过实例化类，而是找到一个对象作为原型并克隆它
JavaScript 的函数既可以作为普通函数被调用，也可以作为构造器被调用。当使用
new运算符来调用函数时，此时的函数就是一个构造器。③ 对象会记住它的原型
就 JavaScript 的真正实现来说，其实并不能说对象有原型，而只能说对象的构造器有原型。对象把请求委托给它的构造器的原型。。
对象的
__proto__的隐藏属性，默认会指向它的构造器的原型对象，即{Constructor}.prototype。实际上，__proto就是对象跟“对象构造器的原型”联系起来的纽带。④ 如果对象无法响应某个请求，它会把这个请求委托给它自己的原型
（6）原型继承的未来
很多时候，设计模式其实都体现了语言的不足之处。Peter Norvig 曾说，设计模式是对语言不足的补充，如果要使用设计模式，不如去找一门更好的语言。
虽然大多数主流浏览器都提供了
Object.create方法，但通过其来创建对象的效率并不高，通常比通过构造函数创建对象要慢。另外，通过设置构造器的
prototype来实现原型继承的时候，除了根对象Object.prototype本身之外，任何对象都会有一个原型。而通过Object.object(null)可以创建出没有原型的对象。ECMAScript 6 带来了新的 Class 语法。但其背后仍是通过原型机制来创建对象的。示例代码：
class Animal { constructor(name) { this.name = name; } getName() { return this.name; } } class Dog extends Animal { constructor(name) { super(name); } speak() { return "woof"; } } var dog = new Dog('Scamp'); console.log(dog.getName() + ' says ' + dog.speak());
第2章:this、call 和 apply
-
this
在 JavaScript 中，
this总是指向一个对象，而具体指向哪一个对象是在运行时基于函数的执行环境动态绑定的，而非函数被声明时的环境。this的指向大致可以分为以下4种：- 作为对象的方法调用。
- 作为普通函数调用。
- 构造器调用。
Function.prototype.call或Function.prototype.apply调用
☛ 丢失的
thisvar obj = { myName: 'sven', getName: function() { return this.myName; } }; // 作为对象的方法调用 console.log(obj.getName()); // 'sven' // 作为普通函数调用 var getName2 = obj.getName; console.log(getName2()); // 'undefined' -
call 和 apply
【区别】：传参方式不同
【用途】：
（1）改变
this的指向（2）
Function.prototype.bind// 简化版实现
Function.prototype.bind = function(context) { var self = this; return function() { return self.apply(context, arguments); } }; var obj = { name: 'sven' }; var func = function() { alert(this.name); }.bind(obj); func();// 完整版实现
Function.prototype.bind = function() { var self = this, // 保存原函数 context = [].shift.call(arguments), // 需要绑定的 this 上下文 args = [].slice.call(arguments); // 剩余的参数转成数组 return function() { return self.apply(context, [].concat.call(args, [].slice.call(arguments))); // 执行新的函数的时候，会把之前传入的 context 当做函数体内的 this // 并且组合两次分别传入的参数，作为新函数的参数 } }; var obj = { name: 'sven' }; var func = function(a, b, c, d) { alert(this.name); // 输出：sven alert([a, b, c, d]); // 输出： [1, 2, 3, 4] }.bind(obj, 1, 2); func(3, 4);（3）借用其他对象的方法
// 方法1
var A = function(name) { this.name = name; }; var B = function() { A.apply(this, arguments); }; B.prototype.getName = function() { return this.name; }; var b = new B('sven'); console.log(b.getName()); // 输出：sven// 方法2：借用 Array.prototype 对象操作 arguments
Array.prototype.slice // 转成真正的数组 Array.prototype.shift // 截去 arguments 列表中的头一个元素 Array.prototype.push // 往 arguments 中添加一个新元素
第3章:闭包和高阶函数
在 JavaScript 版本的设计模式中，许多模式都可以用闭包和高阶函数来实现。
-
闭包
闭包的形成与变量的作用域以及变量的生存周期密切相关。
（1）变量的作用域：
就是指变量的有效范围，最常指函数中声明的变量作用域。
（2）变量的生存周期：
① 全局变量：生存周期是永久的，除非主动销毁这个全局变量。
② 局部变量：当退出函数时，局部变量即失去它们的价值，会随着函数调用的结束而被销毁。
★ 闭包的经典应用：
<div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <script> var nodes = document.getElementsByTagName('div'); // 无论点击哪个div，结果都是5 // 因为div节点的onclick事件是被异步触发的， // 当事件被触发时，for循环早已结束，此时变量i的值已经是5 // 所以在div的onclick事件函数中顺着作用域链从内到外查找变量i时，查找到的值总是5 for (var i = 0, len = nodes.length; i < len; i++) { nodes[i].onclick = function() { console.log(i); } } </script>☞ 解决方法：
for (var i = 0, len = nodes.length; i < len; i++) { (function(i) { nodes[i].onclick = function() { console.log(i); } })(i); }在闭包的帮助下，把每次循环的
i值都封闭起来。当在事件函数中顺着作用域链从内到外查找变量i时，会先找到被封闭在闭包环境中的i。（3）闭包的更多作用
① 封装变量
/*var mult = function() { var a = 1; for (var i = 0, len = arguments.length; i < len; i++) { a = a * arguments[i]; } return a; };*/ // 改进1： // 对于那些相同的参数来说，每次都进行计算是一种浪费 // 加入缓存机制来提高函数的性能 /*var cache = {}; var mult = function() { var args = Array.prototype.join.call(arguments, ','); if (cache[args]) { return cache[args]; } var a = 1; for (var i = 0, len = arguments.length; i < len; i++) { a = a * arguments[i]; } return cache[args] = a; }*/ // 继续改进2：减少页面中的全局变量 /*var mult = (function() { var cache = {}; return function() { var args = Array.prototype.join.call(arguments, ','); if (cache[args]) { return cache[args]; } var a = 1; for (var i = 0, len = arguments.length; i < len; i++) { a = a * arguments[i]; } return cache[args] = a; } })();*/ // 继续改进4：提炼函数是代码重构中的一种常见技巧 var mult = (function() { var cache = {}; var calculate = function() { var a = 1; for (var i = 0, len = arguments.length; i < len; i++) { a = a * arguments[i]; } return a; }; return function() { var args = Array.prototype.join.call(arguments, ','); if (args in cache) { return cache[args]; } return cache[args] = calculate.apply(null, arguments); } })(); console.log(mult(1, 2, 3, 4));② 延续局部变量的寿命
// 把 img 变量用闭包封闭起来，解决请求丢失的问题 var report = (function() { var imgs = []; return function(src) { var img = new Image(); imgs.push(img); img.src = src; } })();（4）闭包和面向对象设计
对象以方法的形式包含了过程，而闭包则是在过程中以环境的形式包含了数据。通常用面向对象能实现的功能，用闭包也能实现。反之亦然。
// 闭包实现 var extent = function() { var value = 0; return { call: function() { value++; console.log(value); } } }; var extent = extent(); extent.call(); // 1 extent.call(); // 2 // 面向对象写法1 var extent = { value: 0, call: function() { this.value++; console.log(this.value); } }; extent.call(); // 1 extent.call(); // 2 // 面向对象写法2 var Extent = function() { this.value = 0; }; Extent.prototype.call = function() { this.value++; console.log(this.value); } var extent = new Extent(); extent.call(); // 1 extent.call(); // 2（5）用闭包实现命令模式
在面向对象版本的命令模式中，预先植入的命令接收者被当成对象的属性保存起来；而在闭包版本的命令模式中，命令接收者会被封闭在闭包形成的环境中。
（6）闭包与内存管理
-
局部变量本来应该在函数退出的时候被解除引用，但如果局部变量被封闭在闭包形成的环境中，那么这个局部变量就能一直生存下去。从这个意义上，闭包的确会使一些数据无法被及时销毁。
-
使用闭包的一部分原因是我们选择主动把一些变量封闭在闭包中，因为可能在以后还需要使用这些变量，把这些变量方闭包中和放在全局环境中，对内存方面的影响是一致的，这里并不能说是内存泄漏。
-
如果将来要回收这些变量，可以手动把这些变量设为 null。
-
跟闭包和内存泄漏有关系的地方是，使用闭包的同时比较容易形成循环引用，如果闭包的作用域链中保存着一些DOM节点，这时候可能造成内存泄漏。但这本质上并非由闭包造成的。
-
同样，如果要解决循环引用带来的内存泄漏问题，我们只需要把循环引用中的变量设为 null 即可。
-
-
高阶函数
高阶函数是指至少满足下列条件之一的函数：
- 函数可以作为参数被传递；
- 函数可以作为返回值输出。
（1）函数作为参数传递
① 回调函数
回调函数的应用不仅只在异步请求中，当一个函数不适合执行一些请求时，我们也可以把这些请求封装成一个函数，并把它作为参数传递给另外一个函数，“委托”给另外一个函数来执行。
var appendDiv = function(callback) { for (var i = 0; i < 100; i++) { var div = document.createElement('div'); div.innerHTML = 1; document.body.appendChild(div); if (typeof callback === 'function') { callback(div); } } }; appendDiv(function(node) { node.style.display = 'none'; });② Array.prototype.sort
把用什么规则去排序（可变的）的部分封装在函数参数里，动态传入。
// 从小到大排序 [1, 4, 3].sort(function(a, b) { return a - b; });（2）函数作为返回值输出
① 判断数据的类型
// 判断数据类型1 var isType = function(type) { return function(obj) { return Object.prototype.toString.call(obj) === '[object ' + type + ']'; } }; var isString = isType('String'); var isArray = isType('Array'); var isNumber = isType('Number'); console.log(isArray([1, 2, 3])); // 判断数据类型2：循环语句，批量注册这些 isType 函数 var Type = {}; for (var i = 0, type; type = ['String', 'Array', 'Number'][i++];) { (function(type) { Type['is' + type] = function(obj) { return Object.prototype.toString.call(obj) === '[object ' + type + ']'; } })(type); } Type.isArray([]); Type.isString('str');② getSingle
// 既把函数当作参数传递，又让函数执行后返回了另外一个函数 var getSingle = function(fn) { var ret; return function() { return ret || (ret = fn.apply(this, arguments)); }; }; var getScript = getSingle(function() { return document.createElement('script'); }); var script1 = getScript(); var script2 = getScript(); alert(script1 === script2); // true（3） 高阶函数实现 AOP
AOP（面向切面编程）的主要作用是把一些跟核心业务逻辑模块无关的功能抽离出来，这些跟业务逻辑无关的功能通常包括日志统计、安全控制、异常处理等。
好处：（1）可以保持业务逻辑模块的纯净和高内聚性；（2）可以很方便地服用日志统计等功能模块。
通常在 JavaScript 中实现 AOP，都是指把一个函数“动态织入”到另外一个函数之中。
Function.prototype.before = function(beforefn) { var __self = this; return function() { beforefn.apply(this, arguments); return __self.apply(this, arguments); } }; Function.prototype.after = function(afterfn) { var __self = this; return function() { var ret = __self.apply(this, arguments); afterfn.apply(this, arguments); return ret; } } var func = function() { console.log(2); }; func = func.before(function() { console.log(1); }).after(function() { console.log(3); }); func();（4） 高阶函数的其他应用
① currying
currying 又称部分求值。一个 currying 的函数首先会接受一些参数，接受了这些参数之后，该函数并不会立即求值，而是继续返回另外一个函数，刚才传入的参数在函数形成的闭包中被保存起来。待到函数被真正需要求值的时候，之前传入的所有参数都会被一次性用于求值。
var currying = function(fn) { var args = []; return function() { if (arguments.length === 0) { return fn.apply(this, args); } else { [].push.apply(args, arguments); return arguments.callee; } } }; var cost = (function() { var money = 0; return function() { for (var i = 0, len = arguments.length; i < len; i++) { money += arguments[i]; } return money; } })(); var cost = currying(cost); // 转化成curring函数 cost(100); cost(200); cost(300); cost(); // 600② uncurring
在 JavaScript 中，当我们调用对象的某个方法时，其实不用去关心该对象原本是否被设计为拥有这个方法，这是动态类型语言的特点（鸭子类型思想）。
同理，一个对象未必只能使用它自身的方法，可以让它去借用一个原本不属于它的方法。
// 实现1 Function.prototype.uncurrying = function() { var self = this; return function() { var obj = Array.prototype.shift.call(arguments); return self.apply(obj, arguments); }; }; var push = Array.prototype.push.uncurrying(); var obj = { 'length': 1, '0': 1 }; push(obj, 2); console.log(obj); // 实现2 Function.prototype.uncurrying = function() { var self = this; return function() { return Function.prototype.call.apply(arguments); }; };③ 函数节流
【函数被频繁调用的场景】：
- window.onresize 事件
- mousemove 事件
- 上传进度
【实现代码】：
// 原理：将即将被执行的函数用 setTimeout 延迟一段时间执行。 // 如果该次延迟执行还没有完成，则忽略接下来调用该函数的请求。 var throttle = function(fn, interval) { var __self = fn, // 保存需要被延迟执行的函数引用 timer, // 定时器 firstTime = true; // 是否是第一次调用 return function() { var args = arguments, __me = this; if (firstTime) { // 如果是第一次调用，不需要延迟执行 __self.apply(__me, args); return firstTime = false; } if (timer) { // 如果定时器还在，说明前一次延迟执行还没有完成 return false; } timer = setTimeout(function() { clearTimeout(timer); timer = null; __self.apply(__me, args); }, interval || 500); }; };④ 分时函数
// 原理：让创建节点的工作分批进行 // 比如把1秒钟创建1000个节点，改为每隔200毫秒创建8个节点 var timeChunk = function(arr, fn, count) { var obj, t; var len = arr.length; var start = function() { for (var i = 0; i < Math.min(count || 1, arr.length); i++) { var obj = arr.shift(); fn(obj); } }; return function() { t = setInterval(function() { if (arr.length === 0) { // 如果全部节点都已经被创建好 return clearInterval(t); } start(); }, 200); // 分批执行的时间间隔，也可以用参数的形式传入 }; };⑤ 惰性加载函数
// 原理：在第一次进入条件分支之后，在函数内部会重写这个函数 // 重写之后就是我们期望的addEvent函数 // 在下一次进入addEvent函数的时候，addEvent函数里不再存在条件分支语句 var addEvent = function(elem, type, handler) { if (window.addEventListener) { addEvent = function(elem, type, handler) { elem.addEventListener(type, handler, false); } } else if (window.attachEvent) { addEvent = function(elem, type, handler) { elem.attachEvent('on' + type, handler); } } addEvent(elem, type, handler); }; -
小结
在 JavaScript 中，很多设计模式都是通过闭包和高阶函数实现的。相对于模式的实现过程，我们更关注的是模式可以帮助我们完成什么。
