javascript
重拾Javascript基础(五) - JS设计模式
1、作用域
var i = function(){ alert("i"); }; var j = function(){ alert("j"); }; function a1() {(function(){i = function(){ alert("i2"); }; // 對外部i覆蓋var j = function(){ alert("j2"); }; // 在內(nèi)部創(chuàng)建了一個(gè)新的jk = function(){ alert("k2"); }; // 對window添加屬性kvar l = function(){ alert("l2"); }; // 在內(nèi)部創(chuàng)建li();j();k();l();})(); }; a1(); i(); j(); window.k(); l(); // 外部不能找到l2、閉包
閉包的定義是,一個(gè)擁有許多變量和綁定了這些變量的環(huán)境的表達(dá)式(通常是一個(gè)函數(shù)),因而這些變量也是該表達(dá)是的一部分。 根據(jù)定義javascript中所有每個(gè)function都是一個(gè)閉包。 嵌套function所產(chǎn)生的閉包更為強(qiáng)大,也是我們通常所謂的閉包。
// 根據(jù)作用域的特點(diǎn)有了閉包的概念 function a1() {var i = 1; // 1、變量i是受到保護(hù)只有b1能訪問function b1(){alert(++i); // 2、因?yàn)樵赽1會被引用到所以i的內(nèi)存不會被釋}return b1; }; var c = a1(); setInterval(function(){c(); }, 1000); // 3、類私有變量創(chuàng)建的基礎(chǔ) function a() {var i = 0;function b(){alert(++i);}return b; } var c = a(); c();作用和效果
閉包的作用就是在a執(zhí)行完并返回后,閉包使得Javascript的垃圾回收機(jī)制GC不會收回a所占用的資源,因?yàn)閍的內(nèi)部函數(shù)b的執(zhí)行需要依賴a中的變量。 1、保護(hù)函數(shù)內(nèi)的變量安全。以最開始的例子為例,函數(shù)a中i只有函數(shù)b才能訪問,而無法通過其他途徑訪問到,因此保護(hù)了i的安全性。 2、在內(nèi)存中維持一個(gè)變量。依然如前例,由于閉包,函數(shù)a中i的一直存在于內(nèi)存中,因此每次執(zhí)行c(),都會給i自加1。 3、通過保護(hù)變量的安全實(shí)現(xiàn)JS私有屬性和私有方法(不能被外部訪問)
3、內(nèi)存回收
內(nèi)存托管的語言,不被引用的內(nèi)存將做定期銷毀。 銷毀條件:1、不在過程中引用;2、引用過DOM被移除
function a1() {var i = "";function b1(clist){i = "<div>" + clist + "</div>";alert(i);i = null; // 依據(jù)閉包的概念i的內(nèi)存將不會被系統(tǒng)回收,所以要手動(dòng)回收}return b1; }; var c1 = a1(); <a href="javascript:;" οnclick="javascript:c1();">點(diǎn)擊</a>4、上下文對象
ABCDEFGH function changeColor(_color, _size) {alert(this==window);this.style.color = _color;this.style.fontSize = _size; } //changeColor("#000"); // 因?yàn)閏hangeColor上下文對象是window,window沒有style屬性所以不能運(yùn)行 changeColor.call(document.getElementById('abc'), "#666"); // 可以重新指定上下文對象,單參數(shù)形式 changeColor.apply(document.getElementById('abc'), ["#666", "55px"]); // 多參數(shù)形式5、創(chuàng)建對象
var a1 = function() // 定義構(gòu)造函數(shù) {// 定義私有屬性var _self = this;var i = 1;// 初始化過程++i;// 定義事件this.callback = function(){};// 定義公共方法this.b1 = function(){alert(++i);_self.callback();} }; var a1Obj = new a1();6、對象繼承
function extend(sub,sup) {var f=function(){};f.prototype = sup.prototype;sub.prototype = new f();sub.prototype.constructor = sub; }; function abc() {var a = "a";this.geta = function(){alert("get"+a);};this.getd = function(){alert("get"+'abcd');};def.call(this, 123); // 執(zhí)行父類的構(gòu)造函數(shù) } function def(a1) {alert(a1);var d = "d";this.getd = function(){alert("get"+d);}; }extend(abc,def); // 對象是引用類型所以無需返回對象var abc_e = new abc; abc_e.geta(); abc_e.getd(); // 子類同名屬性將被父類覆蓋 alert(abc_e.constructor==abc);var def_e = new def; def_e.getd(); //def_e.geta(); alert(def_e.constructor==def);? ?
轉(zhuǎn)載于:https://www.cnblogs.com/hujiong/archive/2012/01/06/2819650.html
總結(jié)
以上是生活随笔為你收集整理的重拾Javascript基础(五) - JS设计模式的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 2011年工作总结
- 下一篇: 使用Moles框架实现HttpWebRe