闭包与高阶函数

news/2024/10/30 22:23:39/

文中内容均来自于曾探《JavaScript设计模式与开发实践》的学习笔记。

闭包


作用域

变量的作用域,就是指变量的有效范围。

局部变量、全局变量。

变量的搜索是从内到外而非从外到内的。

变量的生命周期

对于全局变量莱索,全局变量的生命周期是永久的,除非我们主动销毁这个全局变量。

而对于函数内用var关键字生命的局部变量来说,当退出函数时,这些局部变量即失去了它们的价值,它们会随着函数调用的结束而被销毁。

闭包:f返回了一个匿名函数的应用,它可以访问到func()被调用时产生的环境,而局部变量a一直处于这个环境中,所以不会被销毁。局部变量的生命周期看起来被延续了。

//现在来看看下面这段代码:

varfunc=function(){

vara=1;

returnfunction(){

a++;

alert ( a );

}

};

varf=func();

f(); // 输出:2

f(); // 输出:3

f(); // 输出:4

f(); // 输出:5

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<div>1111111111111</div>

<div>2</div>

<div>3</div>

<div>4</div>

<div>5</div>

<script type="text/javascript">

var nodes = document.getElementsByTagName('div');

// 方法一:

for (let i = 0; i < nodes.length; i++) {

nodes[i].onclick = function(){

alert(i)

}

}

// 方法二:

// for (var i = 0; i < nodes.length; i++) {

// (function(a){

// nodes[a].onclick = function(){

// alert(a)

// }

// })(i)

// }

// 方法三:

// for (var i = 0; i < nodes.length; i++) {

// nodes[i].onclick = (() => {

// var a = i;

// return () => {

// alert(a);

// }

// })();

// }

</script>

</body>

</html>

闭包的作用

  • 封装数据:闭包可以把一些不需要暴露在全局的变量封装成“私有变量”。

//最好是把它们用闭包封闭起来。代码如下:

var mult = (function(){

var cache = {};

var calculate = function(){ // 封闭calculate 函数

var a = 1;

for ( var i = 0, l = arguments.length; i < l; 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 );

}

})();

  • 延续局部变量的寿命

//现在我们把img 变量用闭包封闭起来,便能解决请求丢失的问题:

var report = (function(){

var imgs = [];

return function( src ){

var img = new Image();

imgs.push( img );

img.src = src;

}

})();

闭包和面向对象设计

过程和数据的结合是形容面向对象中的“对象”时经常使用的表达。对象以方法的形式包含了过程,而闭包则是在过程中以环境的形式包含了数据。通常用面向对象思想能实现的功能,用闭包也能实现。

//下面来看看这段跟闭包相关的代码:

var extent = function(){

var value = 0;

return {

call: function(){

value++;

console.log( value );

}

}

};

var extent = extent();

extent.call(); // 输出:1

extent.call(); // 输出:2

extent.call(); // 输出:3

//如果换成面向对象的写法,就是:

var extent = {

value: 0,

call: function(){

this.value++;

console.log( this.value );

}

};

extent.call(); // 输出:1

extent.call(); // 输出:2

extent.call(); // 输出:3

//或者:

var Extent = function(){

this.value = 0;

};

Extent.prototype.call = function(){

this.value++;

console.log( this.value );

};

var extent = new Extent();

extent.call();

extent.call();

extent.call();

用闭包实现命令模式

命令接受者会被封闭再闭包形成的环境中。

<script type="text/javascript">

var Tv = {

open: function(){

console.log( '打开电视机' );

},

close: function(){

console.log( '关上电视机' );

}

};

var createCommand = function( receiver ){

var execute = function(){

return receiver.open(); // 执行命令,打开电视机

}

var undo = function(){

return receiver.close(); // 执行命令,关闭电视机

}

return {

execute: execute,

undo: undo

}

};

var setCommand = function( command ){

document.getElementById( 'execute' ).onclick = function(){

command.execute(); // 输出:打开电视机

}

document.getElementById( 'undo' ).onclick = function(){

command.undo(); // 输出:关闭电视机

}

};

setCommand( createCommand( Tv ) );

</script>

闭包和内存泄露

  • 内存泄露的原因:闭包不是罪魁祸首,全局作用域和闭包,对内存方便的影响是一样的,并不能说是内存泄露。是BOM和DOM引起的,如果两个对象之间形成了循环引用,那么这两个对象都无法被回收。

  • 解决方法:手动将变量设为null。

高阶函数


高阶函数是指至少满足下列条件之一的函数:

  • 函数可以作为参数被传递;

  • 函数可以作为返回值输出;

函数作为参数传递

  • 回调函数

var getUserInfo = function( userId, callback ){

$.ajax( 'http://xxx.com/getUserInfo?' + userId, function( data ){

if ( typeof callback === 'function' ){

callback( data );

}

});

}

getUserInfo( 13157, function( data ){

alert ( data.userName );

});

  • Array.prototype.sort

[ 1, 4, 3 ].sort( function( a, b ){

return a - b;

});

函数作为返回值输出

  • 判断数据的类型

//我们还可以用循环语句,来批量注册这些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( [] ); // 输出:true

Type.isString( "str" ); // 输出:true

  • 单例模式

var getSingle = function ( fn ) {

var ret;

return function () {

return ret || ( ret = fn.apply( this, arguments ) );

};

};

高阶函数实现AOP

AOP(面向切面编程)的主要作用是把一些跟核心业务逻辑模块无关的功能抽离出来,这些跟业务逻辑无关的功能通常包括日志统计、安全控制、异常处理等。

Function.prototype.before = function( beforefn ){

var __self = this; // 保存原函数的引用

return function(){ // 返回包含了原函数和新函数的"代理"函数

beforefn.apply( this, arguments ); // 执行新函数,修正this

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();

高阶函数的应用

  • 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, l = arguments.length; i < l; i++ ){

money += arguments[ i ];

}

return money;

}

})();

var cost = currying( cost ); // 转化成currying 函数

cost( 100 ); // 未真正求值

cost( 200 ); // 未真正求值

cost( 300 ); // 未真正求值

alert ( cost() ); // 求值并输出:600

  • uncurrying:一个对象未必只能使用它自身的方法,可以使用别的对象的方法,比如call和apply就能实现。

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();

(function(){

push( arguments, 4 );

console.log( arguments ); // 输出:[1, 2, 3, 4]

})( 1, 2, 3 );

  • 函数节流:

场景:比如window.resize事件,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 );

};

};

  • 防抖:

场景:用户名输入后,判断用户是否存在

原理:任务频繁触发的情况下,只有任务触发的间隔超过指定间隔的时候,任务才会执行。

  • 分时函数

var timeChunk = function( ary, fn, count ){

var obj,

t;

var len = ary.length;

var start = function(){

for ( var i = 0; i < Math.min( count || 1, ary.length ); i++ ){

var obj = ary.shift();

fn( obj );

}

};

return function(){

t = setInterval(function(){

if ( ary.length === 0 ){ // 如果全部节点都已经被创建好

return clearInterval( t );

}

start();

}, 200 ); // 分批执行的时间间隔,也可以用参数的形式传入

};

};

var ary = [];

for ( var i = 1; i <= 1000; i++ ){

ary.push( i );

};

var renderFriendList = timeChunk( ary, function( n ){

var div = document.createElement( 'div' );

div.innerHTML = n;

document.body.appendChild( div );

}, 8 );

renderFriendList();

  • 惰性加载函数

<html>

<body>

<div id="div1">点我绑定事件</div>

<script>

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 );

};

var div = document.getElementById( 'div1' );

addEvent( div, 'click', function(){

alert (1);

});

addEvent( div, 'click', function(){

alert (2);

});

</script>

</body>

</html>

总结


很多模式都是通过闭包和高阶函数实现的。相对于模式的实现过程,我们更关注的是模式可以帮助我们完成什么!!!


http://www.ppmy.cn/news/28226.html

相关文章

RabbitMQ交换机(Exchanges)

目录 一、概念 二、临时队列 三、绑定 四、Fanout&#xff08;扇出交换机&#xff09; &#xff08;一&#xff09;介绍 &#xff08;二&#xff09;实战 五、Direct&#xff08;直接交换机&#xff09; &#xff08;一&#xff09;介绍 &#xff08;二&#xff09;实…

Gradle7.4安装与基本使用

文章目录一.前言二.下载Gradle三.Gradle镜像源-全局级配置四.配置Gradle wrapper-项目级配置五.Gradle对测试的支持五.生命周期5.1 settings文件六.Gradle任务入门6.1 任务行为6.2 任务依赖方式七. Dependencies依赖引入7.1 依赖冲突及解决方案八.Gradle整合多模块SpringBoot九…

【异常检测三件套】系列3--时序异常检测综述

写在前面: 异常检测共包含3个内容,从多个方面剖析异常检测方法,本文为第三篇。过往内容请查看以下链接: 【异常检测三件套】系列1--14种异常检测算法https://blog.csdn.net/allein_STR/article/details/128114175?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%…

Linux 进程:理解进程和pcb

目录一、进程的概念二、CPU分时机制三、并发与并行1.并发2.并行四、pcb的概念一、进程的概念 什么是进程&#xff1f; 进程就是进行中的程序&#xff0c;即运行中的应用程序。比如&#xff1a;电脑上打开的LOL、QQ…… 这些都是一个个的进程。 什么是应用程序&#xff1f; 应用…

Scratch少儿编程案例-算法练习-实现华氏和摄氏度温度转换

专栏分享 点击跳转=>Unity3D特效百例点击跳转=>案例项目实战源码点击跳转=>游戏脚本-辅助自动化点击跳转=>Android控件全解手册点击跳转=>Scratch编程案例👉关于作者

JUC包:CountDownLatch源码+实例讲解

1 缘起 有一次听到同事谈及AQS时&#xff0c;我有很多点懵&#xff0c; 只知道入队和出队&#xff0c;CLH&#xff08;Craig&#xff0c;Landin and Hagersten&#xff09;锁&#xff0c;并不了解AQS的应用&#xff0c; 同时结合之前遇到的多线程等待应用场景&#xff0c;发现…

JavaScript 库

JavaScript库是一组封装好的JavaScript函数和对象&#xff0c;可以重复利用和调用&#xff0c;用于简化开发过程中的编码和实现&#xff0c;提高开发效率和可维护性。在实际工作中&#xff0c;JavaScript库是一个非常常用的工具&#xff0c;常用的库包括jQuery、React、Vue.js等…

Python小白入门- 01( 第一章,第1节) 介绍 Python 编程语言

1. 介绍 Python 编程语言 1.1 Python 是什么 Python 是一种高级的、解释型、面向对象的编程语言,具有简洁、易读、易写的语法特点。Python 由 Guido van Rossum 于 1989 年在荷兰创造,并于 1991 年正式发布。 Python 语言广泛应用于数据科学、Web 开发、人工智能、自动化测…