javascript闭包函数的基本使用以及会遇到的问题解决
本篇文章给大家带来的内容是关于javascript闭包函数的基本使用以及会遇到的问题解决,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
面试的时候一直会被问到什么是闭包,以前也不是很在意,更没有去总结和归纳.
闭包就是能够读取其他函数内部变量的函数。
所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。
(一)闭包最基本的应用:
少废话,上代码 还是>的栗子,
function createComparisonFunction(propertyName) { return function(object1, object2) { var value1 = object1[propertyName]; var value2 = object2[propertyName]; if(value1 value2) { return 1; } else { return 0; } }; } var compare = createComparisonFunction("name"); var result = compare({ name: "Nicholas" }, { name: "Greg" });
分析:
(1)闭包函数可以访问其外部函数
return出来的这个匿名函数就是一个闭包函数,这个匿名函数中的访问了外部函数的活动对象,就是这个propertyName参数。因为外部的作用域链被这个匿名函数所包含(也可以理解为:compare函数包含
createComparisonFunction()函数的活动对象和全局变量对象),所以返回的这个匿名函数可以一直访问他外部的这个propertyName以及全局变量。
(2)闭包所引用的外部变量不会因为所在作用域销毁而销毁
因为在返回的闭包函数中,引用了外部函数的活动对象,所以createComparisonFunction()内的活动对象(即propertyName)在createComparisonFunction()执行完后不会被销毁。因为虽然createComparisonFunction执行完后,会把其执行环境中的作用域链销毁,但是他的活动对象仍然被闭包函数引用,放入了匿名函数的执行环境的作用域中
(二)闭包的副作用
(1).闭包只能取得包含函数中任何变量的最后一个值
function createFunctions(){ var result = new Array(); for (var i=0; i <p>原理:<br>因为每个函数的作用域链中都保存着 createFunctions() 函数的活动对象,所以它们引用的都是同一个变量 i 。 当createFunctions()函数返回后,变量 i 的值是 10,此时每个函数都引用着保存变量 i 的同一个变量对象,所以在每个函数内部 i 的值都是 10</p><p>解决方法:</p><pre class="brush:php;toolbar:false">获取内部函数的对象result[i]时,使用匿名函数,并在匿名函数中再使用闭包函数,使得当前环境下的num被闭包函数函数调用,存储在作用域中不会被释放.
function createFunctions2(){ var result = new Array(); for(var i = 0 ; i <p>原理:<br>定义了一个匿名函数,并将立即执行该匿名函数的结果赋给数组。这里的匿名函数有一个参数 num,也就是最终的函数要返回的值。在调用每个匿名函数时,我们传入了变量 i。由于函数参数是按值传递的,所以就会将变量 i 的当前值复制给参数 num。而在这个匿名函数内部,又创建并返回了一个访问 num 的闭包。这样一来,result 数组中的每个函数都有自己num 变量的一个副本,因此就可以返回各自不同的数值了。</p><p>(2).当闭包函数外部包含了一个匿名函数,this指向全局</p><pre class="brush:php;toolbar:false"> var name = "The Window"; var object = { name: "My Object", getNameFunc: function () { return function () { //匿名函数执行具有全局性 return this.name; //this指向window }; } }; console.log(object.getNameFunc()()) // The Window
原理:
每个函数在被调用时都会自动取得两个特殊变量:this 和 arguments。内部函
数在搜索这两个变量时,只会搜索到其活动对象为止,所以无法获取到外部的this,此时getNameFunc()返回的是一个匿名函数,并且匿名函数具有全局性,因此this指向全局的window
解决方案:
把外部作用域中的 this 对象保存在一个闭包能够访问到的变量里,就可以让闭包访问该对象了
var name2 = "The Window"; var object2 = { name:"My Object", getNameFunc:function(){ var that = this; //将外部函数的this保存在外部函数的活动对象中(函数中申明的变量中) return function (){ return that.name } } } console.log(object2.getNameFunc()()) //My Object
(三)
闭包的缺点
(1).由于闭包会携带包含它的函数的作用域,因此会比其他函数占用更多的内存。过度使用闭包可能会导致内存占用过多
(2).闭包只能取得包含函数中任何变量的最后一个值,所以要注意写法
javascript闭包函数的基本使用以及会遇到的问题解决
3
3 分钟前发布
闭包函数
javascript
7 次阅读 · 读完需要 12 分钟
0
面试的时候一直会被问到什么是闭包,以前也不是很在意,更没有去总结和归纳.
闭包就是能够读取其他函数内部变量的函数。
所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。
(一)闭包最基本的应用:
少废话,上代码 还是>的栗子,
function createComparisonFunction(propertyName) { return function(object1, object2) { var value1 = object1[propertyName]; var value2 = object2[propertyName]; if(value1 value2) { return 1; } else { return 0; } }; } var compare = createComparisonFunction("name"); var result = compare({ name: "Nicholas" }, { name: "Greg" });
分析:
(1)闭包函数可以访问其外部函数
return出来的这个匿名函数就是一个闭包函数,这个匿名函数中的访问了外部函数的活动对象,就是这个propertyName参数。因为外部的作用域链被这个匿名函数所包含(也可以理解为:compare函数包含
createComparisonFunction()函数的活动对象和全局变量对象),所以返回的这个匿名函数可以一直访问他外部的这个propertyName以及全局变量。
(2)闭包所引用的外部变量不会因为所在作用域销毁而销毁
因为在返回的闭包函数中,引用了外部函数的活动对象,所以createComparisonFunction()内的活动对象(即propertyName)在createComparisonFunction()执行完后不会被销毁。因为虽然createComparisonFunction执行完后,会把其执行环境中的作用域链销毁,但是他的活动对象仍然被闭包函数引用,放入了匿名函数的执行环境的作用域中
(二)闭包的副作用
(1).闭包只能取得包含函数中任何变量的最后一个值
function createFunctions(){ var result = new Array(); for (var i=0; i <p>原理:<br>因为每个函数的作用域链中都保存着 createFunctions() 函数的活动对象,所以它们引用的都是同一个变量 i 。 当createFunctions()函数返回后,变量 i 的值是 10,此时每个函数都引用着保存变量 i 的同一个变量对象,所以在每个函数内部 i 的值都是 10</p><p>解决方法:</p><pre class="brush:php;toolbar:false">获取内部函数的对象result[i]时,使用匿名函数,并在匿名函数中再使用闭包函数,使得当前环境下的num被闭包函数函数调用,存储在作用域中不会被释放.
function createFunctions2(){ var result = new Array(); for(var i = 0 ; i <p>原理:<br>定义了一个匿名函数,并将立即执行该匿名函数的结果赋给数组。这里的匿名函数有一个参数 num,也就是最终的函数要返回的值。在调用每个匿名函数时,我们传入了变量 i。由于函数参数是按值传递的,所以就会将变量 i 的当前值复制给参数 num。而在这个匿名函数内部,又创建并返回了一个访问 num 的闭包。这样一来,result 数组中的每个函数都有自己num 变量的一个副本,因此就可以返回各自不同的数值了。</p><p>(2).当闭包函数外部包含了一个匿名函数,this指向全局</p><pre class="brush:php;toolbar:false"> var name = "The Window"; var object = { name: "My Object", getNameFunc: function () { return function () { //匿名函数执行具有全局性 return this.name; //this指向window }; } }; console.log(object.getNameFunc()()) // The Window
原理:
每个函数在被调用时都会自动取得两个特殊变量:this 和 arguments。内部函
数在搜索这两个变量时,只会搜索到其活动对象为止,所以无法获取到外部的this,此时getNameFunc()返回的是一个匿名函数,并且匿名函数具有全局性,因此this指向全局的window
解决方案:
把外部作用域中的 this 对象保存在一个闭包能够访问到的变量里,就可以让闭包访问该对象了
var name2 = "The Window"; var object2 = { name:"My Object", getNameFunc:function(){ var that = this; //将外部函数的this保存在外部函数的活动对象中(函数中申明的变量中) return function (){ return that.name } } } console.log(object2.getNameFunc()()) //My Object
(三)
闭包的缺点
(1).由于闭包会携带包含它的函数的作用域,因此会比其他函数占用更多的内存。过度使用闭包可能会导致内存占用过多
(2).闭包只能取得包含函数中任何变量的最后一个值,所以要注意写法
你可能感兴趣的
评论
以上是javascript闭包函数的基本使用以及会遇到的问题解决的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

如何使用WebSocket和JavaScript实现在线语音识别系统引言:随着科技的不断发展,语音识别技术已经成为了人工智能领域的重要组成部分。而基于WebSocket和JavaScript实现的在线语音识别系统,具备了低延迟、实时性和跨平台的特点,成为了一种被广泛应用的解决方案。本文将介绍如何使用WebSocket和JavaScript来实现在线语音识别系

WebSocket与JavaScript:实现实时监控系统的关键技术引言:随着互联网技术的快速发展,实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用,并给出代码示例,详细解释其实现原理。一、WebSocket技

如何利用JavaScript和WebSocket实现实时在线点餐系统介绍:随着互联网的普及和技术的进步,越来越多的餐厅开始提供在线点餐服务。为了实现实时在线点餐系统,我们可以利用JavaScript和WebSocket技术。WebSocket是一种基于TCP协议的全双工通信协议,可以实现客户端与服务器的实时双向通信。在实时在线点餐系统中,当用户选择菜品并下单

如何使用WebSocket和JavaScript实现在线预约系统在当今数字化的时代,越来越多的业务和服务都需要提供在线预约功能。而实现一个高效、实时的在线预约系统是至关重要的。本文将介绍如何使用WebSocket和JavaScript来实现一个在线预约系统,并提供具体的代码示例。一、什么是WebSocketWebSocket是一种在单个TCP连接上进行全双工

JavaScript和WebSocket:打造高效的实时天气预报系统引言:如今,天气预报的准确性对于日常生活以及决策制定具有重要意义。随着技术的发展,我们可以通过实时获取天气数据来提供更准确可靠的天气预报。在本文中,我们将学习如何使用JavaScript和WebSocket技术,来构建一个高效的实时天气预报系统。本文将通过具体的代码示例来展示实现的过程。We

JavaScript教程:如何获取HTTP状态码,需要具体代码示例前言:在Web开发中,经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时,我们经常需要获取返回的HTTP状态码来判断操作是否成功,根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码,并提供一些实用的代码示例。使用XMLHttpRequest

用法:在JavaScript中,insertBefore()方法用于在DOM树中插入一个新的节点。这个方法需要两个参数:要插入的新节点和参考节点(即新节点将要被插入的位置的节点)。

JavaScript中的HTTP状态码获取方法简介:在进行前端开发中,我们常常需要处理与后端接口的交互,而HTTP状态码就是其中非常重要的一部分。了解和获取HTTP状态码有助于我们更好地处理接口返回的数据。本文将介绍使用JavaScript获取HTTP状态码的方法,并提供具体代码示例。一、什么是HTTP状态码HTTP状态码是指当浏览器向服务器发起请求时,服务
