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() );
復制代碼