JavaScript 學習提升

javascript 技能提升

理解閉包

閉包,官方對閉包的解釋是:一個擁有許多變量和綁定了這些變量的環境的表達式(通常是一個函數),因而這些變量也是該表達式的一部分。閉包的特點:1. 作為一個函數變量的一個引用,當函數返回時,其處于激活狀態。2. 一個閉包就是當一個函數返回時,一個沒有釋放資源的棧區。
簡單的說,Javascript允許使用內部函數---即函數定義和函數表達式位于另一個函數的函數體內。而且,這些內部函數可以訪問它們所在的外部函數中聲明的所有局部變量、參數和聲明的其他內部函數。當其中一個這樣的內部函數在包含它們的外部函數之外被調用時,就會形成閉包。
復制代碼
    1.函數嵌套函數2.函數內部可以引用外部的參數和變量3.參數和變量不會被垃圾回收機制回收閉包是指有權訪問另一個函數作用域中的變量的函數,創建閉包的最常見的方式就是在一個函數內創建另一個函數,通過另一個函數訪問這個函數的局部變量使用閉包有一個優點,也是它的缺點,就是可以把局部變量駐留在內存中,可以避免使用全局變量。全局變量在每個模塊都可調用,這勢必將是災難性的。所以推薦使用私有的,封裝的局部變量。一般函數執行完畢后,局部活動對象就被銷毀,,內存中僅僅保存全局作用域。但閉包的情況不同!嵌套函數的閉包:function aaa() {var a = 1;return function(){alert(a++)};}var fun = aaa();fun();// 1 執行后 a++,,然后a還在~fun();// 2fun = null;//a被回收!!閉包會使變量始終保存在內存中,如果不當使用會增大內存消耗。
復制代碼

js中方法的一些高級運用

1、重復定時器

setTimeout(function() {// 處理setTimeout(arguments.callee, 1000);
}, 1000)
復制代碼

2、數組分塊處理

function chunk(array, process, context) {setTimeout(function() {var item = array.shift();process.call(context, item);if (array.length > 0) {setTimeout(arguments.callee, 1000);}}, 1000);
}var data = [12, 123, 234, 345, 456, 567];
function printValue(item) {console.log(item);
}
chunk(data, printValue);
復制代碼

一、js中的私有變量和特權方法

在JS的function中,有個私有變量的概念。比如下面的代碼中,函數中有私有變量privateName和私有方法privateFunc,函數里面的變量和方法不能在函數外部被訪問。

 function Name(){var privateName = "Petter"; //私有變量function privateFunc(){console.log("這是個私有函數");}}復制代碼

我們可以通過在函數里創建公有方法來訪問本來不可以訪問的私有變量和私有方法。我們把這個公有方法也叫特權方法。 創建特權方法的方式有兩種。

第一種在構造函數中定義特權方法:

 function Name(){var privateName = "Petter"; //私有變量var i = 1;function privateFunc(){return "這是個私有函數"+(i++);}this.getPrivateInfo = function(){privateName = "Alia";return privateFunc();}}  var f = new Name();var f2 = new Name();console.log(f.getPrivateInfo())console.log(f2.getPrivateInfo())//這是個私有函數// return a1,a2;時返回值是最后一個"a2"
復制代碼

第二種使用靜態私有變量

    (function(){var privateName ="Petter";var i =1;function privateFunc(){return "這是個私有函數返回值"+(i++);}Ojects = function(){}Ojects.prototype.getPrivateInfo = function(){privateName = "Alia";return privateFunc();}})();var s01 = new Ojects();var s02 = new Ojects();console.log(s01.getPrivateInfo());console.log(s02.getPrivateInfo());
復制代碼

二、Modlule 模式插件開發

Module -- 模塊,模塊化開發,是在編程中十分通用的模式。

最原始的編寫方法

    <body><div id="dom1">紅色</div><div id="dom2">黃色</div></body><script type="text/javascript">var colorSet = function(objId){     var _getDom = function(Id){return document.getElementById(Id);}var _aimObj = _getDom(objId);var _setColor = function(str){_aimObj.style.backgroundColor = str;}return{set:_setColor}}var color1 = new colorSet('dom1');color1.set('red');var color2 = new colorSet('dom2');color2.set('yellow');</script>
復制代碼

揭示模塊模式

    <body><div id="dom1">紅色</div><div id="dom2">黃色</div></body><script type="text/javascript">var colorSet = (function(){     var _getDom = function(Id){return document.getElementById(Id);}var _setColor = function(Id,str){_getDom(Id).style.backgroundColor = str;}return{getDom:_getDom,set:_setColor}})())</script>
復制代碼

自己常用面向對象寫法

    //自定義類function plugin(){}//添加參數plugin.prototype.str = "default param";//寫入方法plugin.prototype.funcs = function(str = this.str){console.log(str);}//創建使用的對象var my = new plugin();//使用方法p.funcs("My funcs use now !!");p.funcs();復制代碼

Jquery 插件對象級寫法

;(function($){//plugin 方法$.fn.plugin = function (options) {var defaults = {//定義參數}//options合并到defaults上,defaults繼承了options上的各種屬性和方法,將所有的賦值給endOptionsvar endOptions = $.extend(defaults,options);this.each(function(){<!--實現功能代碼--><!--變量存儲--><!--var _this = $(this);-->})}
})(jQuery)<!--使用-->
$('#tab').plugin({<!--tabType: 'mouseover'--><!--參數狀態屬性-->
});
復制代碼

二、js的面向對象編程(OOP)

對象下面的變量叫做屬性,對象下的函數叫做對象的方法
復制代碼

1、創建一個對象

//單個對象var obj = new Object();obj.name = "陳";obj.backName = function(){console.log( this.name ); //this 在這里指向的是obj 這個對象}obj.showName();//多個對象:封裝函數的方法創建function createObject( name ){var obj = new Object();obj.name = "陳";obj.backName = function(){console.log( this.name ); //this 在這里指向的是obj 這個對象}return obj;}var FirstObj = createObject( '陳' );var SecondObj = createObject( '張' );//單個對象:構造函數(給一個對象添加方法)function CreatePerson(name){this.name = name;this.showName = function(){alert( this.name );}}var p1 = new CreatePerson( '小明' );//當new去調用一個函數時,函數中的this就是創建出來的對象而函數中的返回值就是thisp1.showName();var p2 = new CreatePerson( '小強' );p2.showName();//原型模式(prototype):給一類對象添加方法var arr = [1,2,3,4,5];var arr2 = [2,2,2,2,2];// Object,ArrayArray.prototype.sum = function(){//原型prototype : 要寫在構造函數的下面var result = 0;for(var i=0;i<this.length;i++){result += this[i];}return result;};alert( arr.sum() );  alert( arr2.sum() );  
復制代碼

轉載于:https://juejin.im/post/5bc96bcfe51d4527ed009051

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/281850.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/281850.shtml
英文地址,請注明出處:http://en.pswp.cn/news/281850.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Uranium UI Kit

Uranium UI Kit控件名&#xff1a;Uranium UI Ki作者&#xff1a;enisn原文鏈接&#xff1a; https://github.com/enisn/UraniumUI項目使用 Apache-2.0 開源許可協議。Uranium 是用于 .NET MAUI 的免費和開源 UI 工具包。它提供了一組控件和實用程序來構建現代應用程序。它建…

數據庫監控框架 oneproxy-monitor 開源了

OneProxy-Monitor 是數據庫監控的框架&#xff0c;通過這個框架可以快速的開發出一款數據庫的監控軟件。目前已經在這個框架下面開發出來了sql server的監控軟件oneproxy-for-sqlserver&#xff0c; postgresql的監控軟件oneproxy-for-postgresql。并且還可以作為協議成的調試軟…

java nio epoll_Java NIO 選擇器(Selector)的內部實現(poll epoll)

http://blog.csdn.net/hsuxu/article/details/9876983之前強調這么多關于linux內核的poll及epoll&#xff0c;無非是想讓大家先有個認識&#xff1a;Java NIO中的選擇器依賴操作系統內核的這些系統調用&#xff0c;我們這里只講解與linux內核相關的NIO實現&#xff0c;當然&…

Next.js 7發布,構建速度提升40%

Next.js團隊發布了其開源React框架的7版本。該版本的Next.js主要是改善整體的開發體驗&#xff0c;包括啟動速度提升57%、開發時的構建速度提升40%、改進錯誤報告和WebAssembly支持。\\Next.js是一個React框架&#xff0c;它的主要目標是在生產環境中提供出色的性能和良好的開發…

《Java多線程編程核心技術》讀后感(十五)

線程的狀態 線程對象在不同的運行時期有不同的狀態&#xff0c;狀態信息就存在與State枚舉類中。 驗證New,Runnable&#xff0c;Terminated new:線程實例化后還從未執行start()方法時的狀態 runnable&#xff1a;線程進入運行的狀態 terminated&#xff1a;線程被銷毀時的狀態 …

隊列(queue)

隊列(queue)和棧一樣支持push和pop兩個操作。但與棧不同的是,pop兩個操作。但與棧的不同的是&#xff0c;pop完成的不是取出最頂端的元素&#xff0c;而是最底端的元素。也就是說最初放入的元素能夠最先被取出&#xff08;這種行為被叫做FIFO:First In First Out&#xff0c;即…

一題多解,ASP.NET Core應用啟動初始化的N種方案[上篇]

ASP.NET Core應用本質上就是一個由中間件構成的管道&#xff0c;承載系統將應用承載于一個托管進程中運行起來&#xff0c;其核心任務就是將這個管道構建起來。在ASP.NET Core的發展歷史上先后出現了三種應用承載的編程方式&#xff0c;而且后一種編程模式都提供了針對之前編程…

java程序猿面試問缺點怎么回答_JAVA程序員面試32問,你能回答多少題

第一&#xff0c;談談final&#xff0c; finally&#xff0c; finalize的區別。第二&#xff0c;Anonymous Inner Class (匿名內部類) 是否可以extends(繼承)其它類&#xff0c;是否可以implements(實現)interface(接口)&#xff1f;第三&#xff0c;Static Nested Class 和 In…

ExecutorService——shutdown方法和awaitTermination方法

ExecutorService的關閉shutdown和awaitTermination為接口ExecutorService定義的兩個方法&#xff0c;一般情況配合使用來關閉線程池。 方法簡介shutdown方法&#xff1a;平滑的關閉ExecutorService&#xff0c;當此方法被調用時&#xff0c;ExecutorService停止接收新的任務并且…

WPF 簡單模仿 VSCode 界面布局

WPF 簡單模仿 VSCode 界面布局本文經原作者授權以原創方式二次分享&#xff0c;歡迎轉載、分享。WPF 簡單模仿 VSCode 界面布局作者&#xff1a;弈虎-呂女士會翻墻原文鏈接&#xff1a; https://github.com/Chen-Lin-Zhao-Wei/WPFLikeVSCode分享一篇群友這幾天自己寫的 WPF 簡…

compare()方法+使用compare方法

compare()方法 compare(lob1,lob2,amount,offset_1,offset_2) 1用于比較2個lob存儲的數據&#xff0c;比較的方式是從指定偏移量開始&#xff0c;對指定數量的字符或者字節進行比較。 2如果比較內容相同&#xff0c;返回0&#xff0c;否則返回-1或1. 3如果參數設置有誤或不合…

linux 下 mysql默認表_linux環境下mysql默認是區分表名大小寫的

在linux環境下&#xff0c;mysql默認表明是區分大小寫的&#xff0c;我們可以查看全局變量發現:mysql> show variables like lower%;-------------------------------| Variable_name | Value |-------------------------------| lower_case_file_system | OFF || lower_cas…

dot-- 資源匯總

http://graphviz.org/doc/info/attrs.htmlhttp://graphs.grevian.org/http://graphs.grevian.org/examplehttp://www.linuxdevcenter.com/pub/a/linux/2004/05/06/graphviz_dot.html轉載于:https://www.cnblogs.com/itzxy/p/7860276.html

兩將軍問題和TCP三次握手

兩將軍問題&#xff0c;又被稱為兩將軍悖論、兩軍問題&#xff0c; 是一個經典的計算機思想實驗。首先&#xff0c; 為避免混淆&#xff0c;我們需要認識到兩將軍問題雖然與拜占庭將軍問題相關&#xff0c;但兩者不是一個東西。拜占庭將軍問題是一個更通用的兩將軍問題版本&…

微信小程序開發系列五:微信小程序中如何響應用戶輸入事件

2019獨角獸企業重金招聘Python工程師標準>>> 微信小程序開發系列教程 微信小程序開發系列一&#xff1a;微信小程序的申請和開發環境的搭建 微信小程序開發系列二&#xff1a;微信小程序的視圖設計 微信小程序開發系列三&#xff1a;微信小程序的調試方法 微信小程序…

理解Object.defineProperty的作用

Object.defineProperty 是vue中雙向綁定的基礎。vue是通過數據劫持的方式來做數據綁定的&#xff0c;最核心的方法是通過 Object.defineProperty()方法來實現對屬性的劫持&#xff0c;達到能監聽到數據的變動。要實現數據的雙向綁定&#xff0c; 當使用存取器描述屬性的特性的時…

java.lang包有哪些類_Java中Lang包的工具類有哪些

Java中Lang包的工具類有哪些發布時間&#xff1a;2020-12-08 16:15:36來源&#xff1a;億速云閱讀&#xff1a;76作者&#xff1a;Leah今天就跟大家聊聊有關Java中Lang包的工具類有哪些&#xff0c;可能很多人都不太了解&#xff0c;為了讓大家更加了解&#xff0c;小編給大家總…

直播修仙:使用.NET 的 WebView2 如何獲取請求的響應內容,以微信直播的互動直播為例...

背景近幾年直播行業快速發展&#xff0c;門檻也越來越低&#xff0c;越來越的人涌入直播大軍。不得不說&#xff0c;直播不僅帶來了更多的娛樂消遣&#xff0c;還提供了一個新型的就業方式。說起直播的類型&#xff0c;有一個非常小眾的娛樂直播&#xff0c;沒有主播&#xff0…

2017年我的閱讀書單

2017年我正在看或者已經看完的書單&#xff0c;基本上都是紙質書&#xff0c;主要是長時間閱讀也不傷眼。由于現階段的主要工作是 DevOps 和運維管理&#xff0c;所以涉及運維方面的書我沒有再細看&#xff0c;如果是工作用到的話會稍為翻閱下。主要還是看運維開發和 Python 及…

web第6次作業position

position 屬性指定了元素的定位類型。 position 屬性的五個值&#xff1a; static &#xff08;靜態定位&#xff09; HTML元素的默認值&#xff0c;即沒有定位&#xff0c;元素出現在正常的流中。 靜態定位的元素不會受到 top, bottom, left, right影響。 div.stati…