當(dāng)前位置：
首頁(yè) >
前端技术
> javascript
>内容正文
javascript
JavaScript 学习提升
生活随笔
收集整理的這篇文章主要介紹了
JavaScript 学习提升
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
javascript 技能提升
理解閉包
閉包，官方對(duì)閉包的解釋是：一個(gè)擁有許多變量和綁定了這些變量的環(huán)境的表達(dá)式（通常是一個(gè)函數(shù)），因而這些變量也是該表達(dá)式的一部分。閉包的特點(diǎn)：1. 作為一個(gè)函數(shù)變量的一個(gè)引用，當(dāng)函數(shù)返回時(shí)，其處于激活狀態(tài)。2. 一個(gè)閉包就是當(dāng)一個(gè)函數(shù)返回時(shí)，一個(gè)沒(méi)有釋放資源的棧區(qū)。 簡(jiǎn)單的說(shuō)，Javascript允許使用內(nèi)部函數(shù)---即函數(shù)定義和函數(shù)表達(dá)式位于另一個(gè)函數(shù)的函數(shù)體內(nèi)。而且，這些內(nèi)部函數(shù)可以訪問(wèn)它們所在的外部函數(shù)中聲明的所有局部變量、參數(shù)和聲明的其他內(nèi)部函數(shù)。當(dāng)其中一個(gè)這樣的內(nèi)部函數(shù)在包含它們的外部函數(shù)之外被調(diào)用時(shí)，就會(huì)形成閉包。 復(fù)制代碼 1.函數(shù)嵌套函數(shù)2.函數(shù)內(nèi)部可以引用外部的參數(shù)和變量3.參數(shù)和變量不會(huì)被垃圾回收機(jī)制回收閉包是指有權(quán)訪問(wèn)另一個(gè)函數(shù)作用域中的變量的函數(shù)，創(chuàng)建閉包的最常見的方式就是在一個(gè)函數(shù)內(nèi)創(chuàng)建另一個(gè)函數(shù)，通過(guò)另一個(gè)函數(shù)訪問(wèn)這個(gè)函數(shù)的局部變量使用閉包有一個(gè)優(yōu)點(diǎn)，也是它的缺點(diǎn)，就是可以把局部變量駐留在內(nèi)存中，可以避免使用全局變量。全局變量在每個(gè)模塊都可調(diào)用，這勢(shì)必將是災(zāi)難性的。所以推薦使用私有的，封裝的局部變量。一般函數(shù)執(zhí)行完畢后，局部活動(dòng)對(duì)象就被銷毀，，內(nèi)存中僅僅保存全局作用域。但閉包的情況不同！嵌套函數(shù)的閉包：function aaa() {var a = 1;return function(){alert(a++)};}var fun = aaa();fun();// 1 執(zhí)行后 a++，，然后a還在~fun();// 2fun = null;//a被回收！！閉包會(huì)使變量始終保存在內(nèi)存中，如果不當(dāng)使用會(huì)增大內(nèi)存消耗。 復(fù)制代碼js中方法的一些高級(jí)運(yùn)用
1、重復(fù)定時(shí)器
setTimeout(function() {// 處理setTimeout(arguments.callee, 1000); }, 1000) 復(fù)制代碼2、數(shù)組分塊處理
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); 復(fù)制代碼一、js中的私有變量和特權(quán)方法
在JS的function中，有個(gè)私有變量的概念。比如下面的代碼中，函數(shù)中有私有變量privateName和私有方法privateFunc，函數(shù)里面的變量和方法不能在函數(shù)外部被訪問(wèn)。
function Name(){var privateName = "Petter"; //私有變量function privateFunc(){console.log("這是個(gè)私有函數(shù)");}}復(fù)制代碼我們可以通過(guò)在函數(shù)里創(chuàng)建公有方法來(lái)訪問(wèn)本來(lái)不可以訪問(wèn)的私有變量和私有方法。我們把這個(gè)公有方法也叫特權(quán)方法。 創(chuàng)建特權(quán)方法的方式有兩種。
第一種在構(gòu)造函數(shù)中定義特權(quán)方法：
function Name(){var privateName = "Petter"; //私有變量var i = 1;function privateFunc(){return "這是個(gè)私有函數(shù)"+(i++);}this.getPrivateInfo = function(){privateName = "Alia";return privateFunc();}} var f = new Name();var f2 = new Name();console.log(f.getPrivateInfo())console.log(f2.getPrivateInfo())//這是個(gè)私有函數(shù)// return a1,a2;時(shí)返回值是最后一個(gè)"a2" 復(fù)制代碼第二種使用靜態(tài)私有變量
(function(){var privateName ="Petter";var i =1;function privateFunc(){return "這是個(gè)私有函數(shù)返回值"+(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()); 復(fù)制代碼二、Modlule 模式插件開發(fā)
Module -- 模塊，模塊化開發(fā)，是在編程中十分通用的模式。
最原始的編寫方法
<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> 復(fù)制代碼揭示模塊模式
<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> 復(fù)制代碼自己常用面向?qū)ο髮懛?/p> //自定義類function plugin(){}//添加參數(shù)plugin.prototype.str = "default param";//寫入方法plugin.prototype.funcs = function(str = this.str){console.log(str);}//創(chuàng)建使用的對(duì)象var my = new plugin();//使用方法p.funcs("My funcs use now !!");p.funcs();復(fù)制代碼
Jquery 插件對(duì)象級(jí)寫法
;(function($){//plugin 方法$.fn.plugin = function (options) {var defaults = {//定義參數(shù)}//options合并到defaults上,defaults繼承了options上的各種屬性和方法,將所有的賦值給endOptionsvar endOptions = $.extend(defaults,options);this.each(function(){<!--實(shí)現(xiàn)功能代碼--><!--變量存儲(chǔ)--><!--var _this = $(this);-->})} })(jQuery)<!--使用--> $('#tab').plugin({<!--tabType: 'mouseover'--><!--參數(shù)狀態(tài)屬性--> }); 復(fù)制代碼二、js的面向?qū)ο缶幊?#xff08;OOP）
對(duì)象下面的變量叫做屬性，對(duì)象下的函數(shù)叫做對(duì)象的方法 復(fù)制代碼1、創(chuàng)建一個(gè)對(duì)象
//單個(gè)對(duì)象var obj = new Object();obj.name = "陳";obj.backName = function(){console.log( this.name ); //this 在這里指向的是obj 這個(gè)對(duì)象}obj.showName();//多個(gè)對(duì)象：封裝函數(shù)的方法創(chuàng)建function createObject( name ){var obj = new Object();obj.name = "陳";obj.backName = function(){console.log( this.name ); //this 在這里指向的是obj 這個(gè)對(duì)象}return obj;}var FirstObj = createObject( '陳' );var SecondObj = createObject( '張' );//單個(gè)對(duì)象:構(gòu)造函數(shù)（給一個(gè)對(duì)象添加方法）function CreatePerson(name){this.name = name;this.showName = function(){alert( this.name );}}var p1 = new CreatePerson( '小明' );//當(dāng)new去調(diào)用一個(gè)函數(shù)時(shí)，函數(shù)中的this就是創(chuàng)建出來(lái)的對(duì)象而函數(shù)中的返回值就是thisp1.showName();var p2 = new CreatePerson( '小強(qiáng)' );p2.showName();//原型模式（prototype）:給一類對(duì)象添加方法var arr = [1,2,3,4,5];var arr2 = [2,2,2,2,2];// Object,ArrayArray.prototype.sum = function(){//原型prototype : 要寫在構(gòu)造函數(shù)的下面var result = 0;for(var i=0;i<this.length;i++){result += this[i];}return result;};alert( arr.sum() ); alert( arr2.sum() ); 復(fù)制代碼轉(zhuǎn)載于:https://juejin.im/post/5bc96bcfe51d4527ed009051
總結(jié)
以上是生活随笔為你收集整理的JavaScript 学习提升的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： ASP.NET 多环境下配置文件web.
- 下一篇： ExecutorService——shu