JavaScript设计模式基础之闭包(终)
对于前端程序员来说闭包还是比较难以理解的，
闭包的形成与变量的作用域以及变量的生产周期密切相关，所以要先弄懂变量的作用域和生存周期。
1.变量作用域
变量的作用域，就是指变量的有效范围，通常我们指的作用域就是函数作用域（毕竟全局的作用域没有要指的意义，关键哪都能访问）
声明变量的时候推荐使用es6语法中的let 和const 可以避免var声明变量出现的一些不必要的错误而且let声明变量只作用于当前作用域 避免使用不带var 或者let直接声明变量，可能会导致命名冲突。
2.变量生存周期
除了变量作用域之外，另外一个跟闭包有关的概念就是变量生存周期。
对于全局变量来说，它的生存周期就是永久，除非我们主动销毁它，而对于函数里面声明的变量来说 它的生存周期会随着函数调用解释而被销毁。
闭包的定义： 最简单直白的说法就是 函数返回函数
闭包的应用：封装私有变量、延续局部变量的寿命
1.封装私有变量：
使用闭包可以把一些不需要暴露在全局的变量封装成“私有变量”
如有一个计算数组偶数乘积的方法：
let num = function(arr){
let a = 1;
for(let i = 0; i < arr.length; i++){
if(arr[i] % 2 === 0){
a *= arr[i];
}
}
return a;
}
console.log( num([1,2,3,4]));//输出8
加入缓存机制提高函数性能：
let cache = {};
let num = function(arr){
let args = Array.prototype.join.call(arr,',');//输出1,2,3,4
console.log(cache[args])//第一次调用输出为undefined进行下一步计算 第二次调用输出8 直接返回
//传入相同参数就比不必进行计算 直接返回缓存提高性能
if(cache[args]){
return cache[args];
}
//不是相同参数则进行计算
let a = 1;
for(let i = 0; i < arr.length; i++){
if(arr[i] % 2 === 0){
a *= arr[i];
}
}
return cache[args] = a;
}
console.log( num([1,2,3,4]));//8 进行计算
console.log( num([1,2,3,4]));//8 返回缓存
这明显能看到cache这个缓存变量只在num函数里面被使用，与其让它们一起暴露在全局不然把它封装在num函数内部，减少页面中的全局变量，以免该变量在其他地方被修改而引发错误
封装后代码如下：
let num = (function(){
let cache = {};
return function(arr){
let args = Array.prototype.join.call(arr,',');//输出1,2,3,4
console.log(cache[args])//第一次调用输出为undefined进行下一步计算 第二次调用输出8 直接返回
//传入相同参数就比不必进行计算 直接返回缓存提高性能
//判断cache缓存对象里面有args这个key值没
if(args in cache){
return cache[args];
}
//不是相同参数则进行计算
let a = 1;
for(let i = 0; i < arr.length; i++){
if(arr[i] % 2 === 0){
a *= arr[i];
}
}
return cache[args] = a;
}
})();
console.log( num([1,2,3,4]));//8 进行计算
console.log( num([1,2,3,4]));//8 返回缓存
2.延续局部变量寿命
src属性会自动请求服务器数据如下
let report = function(src){
let img = new Image();
img.src = src;
console.log(img.src);
}
report(`https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537779456907&di=c72dd79d1dbb02bb9340743bf08e99f7&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F94cad1c8a786c91723e93522c43d70cf3ac757c6.jpg`);
但是一些低版本的浏览器实现存在着bug，在这些浏览器上面使用该函数会丢失数据 因为函数调用结束后变量销毁 我们可以用闭包封闭起来就能解决低版本浏览器bug
代码如下：
let report = (function(){
let imgs = [];
return function(src){
let img = new Image();
imgs.push(img);
img.src = src;
}
})()
report(`https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537779456907&di=c72dd79d1dbb02bb9340743bf08e99f7&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F94cad1c8a786c91723e93522c43d70cf3ac757c6.jpg`);
接下来要来点干货了
用闭包实现命令模式：
在JavaScript中闭包的各种设计模式实现里面，闭包的运用特别广泛，在我后续的博客中将体会到这一点
简单编写一段闭包实现命令模式 如果上述的闭包使用你基本会了的话不会对我们的理解造成困难
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="start">打开电脑</button>
<button id="end">关闭电脑</button>
<script>
//命令
let Computer = {
open(){
alert('打开电脑');
},
close(){
alert('关闭电脑');
}
}
//创建命令执行中介
let createCommand = function(receiver){
//执行
let execute = function(){
return receiver.open();
}
//关闭
let undo = function(){
return receiver.close();
}
return {
execute,
undo
}
};
//设置执行命令者
let setCommand = function(command){
document.querySelector('#start').onclick = function(){
command.execute();//输出打开电脑
}
document.querySelector('#end').onclick = function(){
command.undo();//输出关闭电脑
}
}
//传入命令方法 传入执行中介
setCommand(createCommand(Computer));
</script>
</body>
</html>
代码还是不难重在理解
JavaScript设计模式基础之闭包(终)的更多相关文章
- JavaScript设计模式基础（二）
JavaScript 设计模式基础(一) 原型模式 在以类为中心的面向对象编程语言中,类和对象的关系就像铸模和铸件的关系,对象总是从类中创建.而原型编程中,类不是必须的,对象未必从类中创建而来,可以拷 ...
- JavaScript设计模式基础(一)
模式的起源 模式 起源于建筑学.20世纪70年代,哈佛大学建筑学博士Christopher Alexander和他的团队花大约20年,来研究为解决同一个问题而设计出的不同建筑结构,从中发现那些高质量设 ...
- JavaScript设计模式基础之面向对象的JavaScript（一）
动态语言类型与鸭子类型 此内容取自JavaScript设计模式与开发实践一书 编程语言按照数据类型大体可以分为2类,一类就是静态类型语言,另一类则是动态类型语言 静态类型语言也可以称之为编译语言,而动 ...
- JavaScript设计模式基础之this、call、apply
1.this的指向 除去不常用的with和eval,具体应用中this指向大概能分为4种情况分别是 1.作为对象的方法调用. 2.作为普通函数的方法调用. 3.Function.prototype.c ...
- javascript设计模式学习之三—闭包和高阶函数
一.闭包 闭包某种程度上就是函数的内部函数,可以引用外部函数的局部变量.当外部函数退出后,如果内部函数依旧能被访问到,那么内部函数所引用的外部函数的局部变量就也没有消失,该局部变量的生存周期就被延续. ...
- JavaScript设计模式基础之面向对象的JavaScript（二）
多态 多态的实际含义:同一操作作用与不同的对象上面,可以产生不同的解释和不同的执行结果,就是说,给不同的对象发送同一个消息 的时候,这些对象会根据这个消息分别给出不同的反馈 代码如下: class D ...
- 《JavaScript设计模式与开发实践》读书笔记-基础知识
笔记内容多摘录自<JavaScript设计模式与开发实践>(曾探著),侵删. 面向对象的JavaScript 1. 动态需要类型和鸭子类型 鸭子类型 如果它走起路来像鸭子,叫起来也是鸭子, ...
- 转载,javascript 设计模式
了解JavaScript设计模式我们需要知道的一些必要知识点:(内容相对基础,高手请跳过) 闭包:关于闭包这个月在园子里有几篇不错的分享了,在这我也从最实际的地方出发,说说我的理解. 1.闭包最常用的 ...
- 【JavaScript设计模式系列---开篇预览】
转:http://www.cnblogs.com/Darren_code/archive/2011/08/31/JavascripDesignPatterns.html 2011-08-31 23:5 ...
随机推荐
- Ionic start 创建项目报错
Installing npm packages... Error with start undefined Error Initializing app: There was an error wit ...
- 第五章 “我要点爆”微信小程序云开发实例之从云端获取数据制作首页
下面我们来实现从云端获取数据,完成首页世界页面index的制作,首页分为4个数据列表导航页面,页面具体内容如下: 推荐:为用户推荐最新的点爆信息,它包含文本点爆内容和语音点爆内容. 文爆:筛选出文字点 ...
- BIO,NIO,AIO总结
熟练掌握 BIO,NIO,AIO 的基本概念以及一些常见问题是你准备面试的过程中不可或缺的一部分,另外这些知识点也是你学习 Netty 的基础. BIO,NIO,AIO 总结 1. BIO (Bloc ...
- TI德州芯片TLV系列和TPS系列芯片区别（转）
TLV和TPS一般会有pin to pin的对应型号: 一般来讲,TPS精度.准确度和性能会好一些,所以价钱要贵一些: 对应TLV就是一样可以实现上述功能,但是精度和性能等级是稍微低一点的: 具体选择 ...
- AJPFX关于子类父类中的构造
1.子父类中的构造函数不存在重写,因为子父类的构造函数名字不一样(重写要求子父类的方法名字一模一样,包括参数列表)2.子类创建对象时会先运行父类的构造函数再运行子类的构造函数.因为每个子类的构造函数的 ...
- CF1062D Fun with Integers
思路: 找规律. 实现: #include <bits/stdc++.h> using namespace std; typedef long long ll; int main() { ...
- ES-windos环境搭建(2)
下载 打开elasticsearch官网.选择downloads. 选择elasticsearch,并单击Download. 这里我们不选择最新版,而是选择靠前的版本,下拉选择past release ...
- table表格字母无法换行
在项目中,用到的table比较多,本来布局挺好的,后来在td内写入英文字母,整个布局就乱了,会撑的很宽,不换行,后来才知道:一般字母的话会被浏览器默认是一个字符串或者说一个单词,所以不会自动换行. 于 ...
- iOS：让UIView覆盖导航栏
当我们想做一个弹出式菜单时,想将导航栏也一起盖住不显示的话,可以用如下语句实现: UIView* myView = /* 你自定义的view */; UIWindow* currentWindow = ...
- 快速排序的一种Java实现
快速排序是笔试和面试中很常见的一个考点.快速排序是冒泡排序的升级版,时间复杂度比冒泡排序要小得多.除此之外,快速排序是不稳定的,冒泡排序是稳定的. 1.原理 (1)在数据集之中,选择一个元素作为&qu ...