电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

JavaScript進階(三)閉包原理與用法詳解

瀏覽:100日期:2023-10-29 10:43:29

本文實例講述了JavaScript閉包原理與用法。分享給大家供大家參考,具體如下:

為了更好的理解,在閱讀此文之前建議先閱讀上一篇《JavaScript詞法作用域與作用域鏈》 1.什么是閉包

閉包的含義就是閉合,包起來,簡單的來說,就是一個具有封閉功能與包裹功能的結構。所謂的閉包就是一個具有封閉的對外不公開的,包裹結構,或空間。

在JS中函數構成閉包。一般函數是一個代碼結構的封閉結構,即包裹的特性,同時根據作用域規則只允許函數訪問外部的數據,外部無法訪問函數內部的數據,即封閉的對外不公開的特性,因此說函數可以構成閉包。

概括:閉包就是一個具有封閉與包裹功能的結構。函數可以構成閉包。函數內部定義的數據函數外部無法訪問,即函數具有封閉性;函數可以封裝代碼即具有包裹性,所以函數可以構成閉包。2.閉包有什么用(解決什么問題)? 閉包不允許外部訪問 要解決的問題就是間接訪問該數據

函數就可以構成閉包,要解決的問題就是如何訪問到函數內部的數據

function foo () { var num = 123; return num;}var res = foo();console.log( res ); // =>123

這里的確是訪問到函數中的數據了。但是該數據不能第二次訪問,因此第二次訪問的時候又要調用一次foo,表示又有一個新的num = 123出來了。

在函數內的數據,不能直接在函數外部訪問,那么在函數內如果定義一個函數,那么在這個函數內部中是可以直接訪問的

function foo() { var num = Math.random(); function func() { return mun; } return func;}var f = foo();// f 可以直接訪問這個 numvar res1 = f();var res2 = f();

我們使用前面學習的繪制作用域鏈結構圖的方法來繪制閉包的作用域鏈結構圖,如下:

JavaScript進階(三)閉包原理與用法詳解

3.閉包使用舉例

如何獲得超過一個數據

function foo () { var num1 = Math.random(); var num2 = Math.random(); return { num1: function () { return num1; }, num2: function () { return num2; } }}

如何完成讀取一個數據和修改這個數據

function foo () { var num = Math.random(); return { get_num : function () { return num; }, set_num: function( value ) { return num = value; } }}4.基本的閉包結構

一般閉包的問題就是要想辦法簡潔的獲取函數內的數據使用權,那么我們就可以總結出一個基本的使用模型。

寫一個函數,函數內部定義一個新函數,返回新函數,用新函數獲得函數內的數據 寫一個函數,函數內部定義個一個對象,對象中綁定多個函數(方法),返回對象,利用對象的方法訪問函數內的數據5.閉包的基本用法

閉包是為了實現具有私有訪問空間的函數的

帶有私有訪問數據的對象

function Person() { this.name = '張三'; // setName( ’’ )}

所有的私有數據,就是說只有函數內部可以訪問的數據,或對象內部的方法可以訪問的數據

最簡單的實現:

function createPerson() { var __name__ = ''; return { getName: function () { return __name__; }, setName: function( value ) { // 如果不姓張就報錯 if ( value.charAt(0) === ’張’ ) { __name__ = value; } else { throw new Error( ’姓氏不對,不能取名’ ); } } }}var p = createPerson();p.set_Name( ’張三豐’ );console.log( p.get_Name() );p.set_Name( ’張王富貴’ );console.log( p.get_Name() );

帶有私有數據的函數

var func = function () {}function func () {}var foo = (function () { // 私有數據 return function () { // 可以使用私有的數據 ... };});6.閉包基本模型

對象模型

function foo () { // 私有數據 return { method : function(){ // 操作私有數據 } }}

函數模型

function foo(){ // 私有數據 return function(){ // 可以操作私有數據 }}7.沙箱模式(閉包應用的一個典范)7.1 沙箱的概念

沙盤與盒子,就可以在一個笑笑的空間內模擬顯示世界,特點是執行效果與現實世界一模一樣,但是在沙箱中模擬與現實無關.

7.2 沙箱模式

沙箱模式就是一個自調用函數,代碼寫到函數中一樣會執行,但是不會與外界有任何的影響

例如,在jQuery中

(function () { var jQuery = function () { // 所有的算法 } // .... // .... jQuery.each = function () {} window.jQuery = window.$ = jQuery;})();$.each( ... )8.帶有緩存功能的函數

以 Fibonacci 數列為例,改進傳統計算斐波那契數列方法 我們來回顧一下傳統遞歸方式求斐波那契數列方法,我們定義一個count變量來查看遞歸了多少次:

var count = 0;function fibo( n ){ count++; if( n ==0 || n == 1 ) return 1; return fibo( n - 1 ) + fibo( n - 2 );}fib1( 20 );console.log( count1 );// 5: 15// 6: 25// ...// 20: 21891

當 n = 5 式,count = 15,當時當 n = 20 的時候,count就達到驚人的21891次,性能太低了

性能低的原因是 重復計算。如果每次將計算的結果存起來

那么每次需要的時候先看看有沒有存儲過該數據,如果有,直接拿來用。 如果沒有再遞歸,但是計算的結果需要再次存儲起來,以便下次使用

改進版:

var data = [ 1, 1 ];var count = 0;function fibo( n ) { count++; var v = data[ n ]; if( v === undefined ){ v = fibo( n - 1 ) + fibo( n - 2 ); data[ n ] = v; } return v;}fibo( 100 );console.log( count ); // 199

改進之后, n = 100的時候也才199次,大大提高了性能。

9.閉包的性能問題

函數執行需要內存,那么函數中定義的變量,會在函數執行結束后自動回收,凡是因為閉包結構的,被引出的數據,如果還有變量引用這些數據的話,那么這些數據就不會被回收。

因此在使用閉包的時候如果不適用某學數據了,一定要賦值一個null

var f = (function () { var num = 123; return function () { return num; };})();// f 引用著函數,函數引用著變量num// 因此在不適用該數據的時候,最好寫上f = null;

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關于JavaScript相關內容可查看本站專題:《JavaScript常用函數技巧匯總》、《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 全自动面膜机_面膜折叠机价格_面膜灌装机定制_高速折棉机厂家-深圳市益豪科技有限公司 | 铁素体测量仪/检测仪/铁素体含量测试仪-苏州圣光仪器有限公司 | 济南拼接屏_山东液晶拼接屏_济南LED显示屏—维康国际官网 | 扬尘在线监测系统_工地噪声扬尘检测仪_扬尘监测系统_贝塔射线扬尘监测设备「风途物联网科技」 | ★店家乐|服装销售管理软件|服装店收银系统|内衣店鞋店进销存软件|连锁店管理软件|收银软件手机版|会员管理系统-手机版,云版,App | 合肥花魁情感婚姻咨询中心_挽回爱情_修复婚姻_恋爱指南 | 学校用栓剂模,玻璃瓶轧盖钳,小型安瓿熔封机,实验室安瓿熔封机-长沙中亚制药设备有限公司 | 电子海图系统-电梯检验系统-智慧供热系统开发-商品房预售资金监管系统 | 山东艾德实业有限公司| 科威信洗净科技,碳氢清洗机,超声波清洗机,真空碳氢清洗机 | 中国产业发展研究网 - 提供行业研究报告 可行性研究报告 投资咨询 市场调研服务 | 外贮压-柜式-悬挂式-七氟丙烷-灭火器-灭火系统-药剂-价格-厂家-IG541-混合气体-贮压-非贮压-超细干粉-自动-灭火装置-气体灭火设备-探火管灭火厂家-东莞汇建消防科技有限公司 | 捷码低代码平台 - 3D数字孪生_大数据可视化开发平台「免费体验」 | 厂房出售_厂房仓库出租_写字楼招租_土地出售-中苣招商网-中苣招商网 | 蜘蛛车-高空作业平台-升降机-高空作业车租赁-臂式伸缩臂叉装车-登高车出租厂家 - 普雷斯特机械设备(北京)有限公司 | U拓留学雅思一站式服务中心_留学申请_雅思托福培训 | 不锈钢轴流风机,不锈钢电机-许昌光维防爆电机有限公司(原许昌光维特种电机技术有限公司) | LED灯杆屏_LED广告机_户外LED广告机_智慧灯杆_智慧路灯-太龙智显科技(深圳)有限公司 | 精密模具加工制造 - 富东懿| 干法制粒机_智能干法制粒机_张家港市开创机械制造有限公司 | 模温机-油温机-电加热导热油炉-工业冷水机「欧诺智能」 | AGV无人叉车_激光叉车AGV_仓储AGV小车_AGV无人搬运车-南昌IKV机器人有限公司[官网] | 电主轴,车床电磨头,变频制动电机-博山鸿达特种电机 | 合肥升降机-合肥升降货梯-安徽升降平台「厂家直销」-安徽鼎升自动化科技有限公司 | 不锈钢酒柜|恒温酒柜|酒柜定制|酒窖定制-上海啸瑞实业有限公司 | 走心机厂家,数控走心机-台州博城智能科技有限公司 | 烟气换热器_GGH烟气换热器_空气预热器_高温气气换热器-青岛康景辉 | 进口试验机价格-进口生物材料试验机-西安卡夫曼测控技术有限公司 | 智慧食堂_食堂管理系统_食堂订餐_食堂消费系统—客易捷 | 紫外线老化试验箱_uv紫外线老化试验箱价格|型号|厂家-正航仪器设备 | 立式_复合式_壁挂式智能化电伴热洗眼器-上海达傲洗眼器生产厂家 理化生实验室设备,吊装实验室设备,顶装实验室设备,实验室成套设备厂家,校园功能室设备,智慧书法教室方案 - 东莞市惠森教学设备有限公司 | 打包箱房_集成房屋-山东佳一集成房屋有限公司 | R507制冷剂,R22/R152a制冷剂厂家-浙江瀚凯制冷科技有限公司 | 粘度计,数显粘度计,指针旋转粘度计 | 并离网逆变器_高频UPS电源定制_户用储能光伏逆变器厂家-深圳市索克新能源 | 江苏南京多语种翻译-专业翻译公司报价-正规商务翻译机构-南京华彦翻译服务有限公司 | 车件|铜件|车削件|车床加工|五金冲压件-PIN针,精密车件定制专业厂商【东莞品晔】 | 丹佛斯变频器-丹佛斯压力开关-变送器-广州市风华机电设备有限公司 | 贵州成人高考网_贵州成考网 | 圆形振动筛_圆筛_旋振筛_三次元振动筛-河南新乡德诚生产厂家 | 慈溪麦田广告公司,提供慈溪广告设计。|