當前位置:
首頁 >
前端技术
> javascript
>内容正文
javascript
重拾Javascript基础(五) - JS设计模式
生活随笔
收集整理的這篇文章主要介紹了
重拾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"); }; // 在內部創建了一個新的jk = function(){ alert("k2"); }; // 對window添加屬性kvar l = function(){ alert("l2"); }; // 在內部創建li();j();k();l();})(); }; a1(); i(); j(); window.k(); l(); // 外部不能找到l2、閉包
閉包的定義是,一個擁有許多變量和綁定了這些變量的環境的表達式(通常是一個函數),因而這些變量也是該表達是的一部分。 根據定義javascript中所有每個function都是一個閉包。 嵌套function所產生的閉包更為強大,也是我們通常所謂的閉包。
// 根據作用域的特點有了閉包的概念 function a1() {var i = 1; // 1、變量i是受到保護只有b1能訪問function b1(){alert(++i); // 2、因為在b1會被引用到所以i的內存不會被釋}return b1; }; var c = a1(); setInterval(function(){c(); }, 1000); // 3、類私有變量創建的基礎 function a() {var i = 0;function b(){alert(++i);}return b; } var c = a(); c();作用和效果
閉包的作用就是在a執行完并返回后,閉包使得Javascript的垃圾回收機制GC不會收回a所占用的資源,因為a的內部函數b的執行需要依賴a中的變量。 1、保護函數內的變量安全。以最開始的例子為例,函數a中i只有函數b才能訪問,而無法通過其他途徑訪問到,因此保護了i的安全性。 2、在內存中維持一個變量。依然如前例,由于閉包,函數a中i的一直存在于內存中,因此每次執行c(),都會給i自加1。 3、通過保護變量的安全實現JS私有屬性和私有方法(不能被外部訪問)
3、內存回收
內存托管的語言,不被引用的內存將做定期銷毀。 銷毀條件:1、不在過程中引用;2、引用過DOM被移除
function a1() {var i = "";function b1(clist){i = "<div>" + clist + "</div>";alert(i);i = null; // 依據閉包的概念i的內存將不會被系統回收,所以要手動回收}return b1; }; var c1 = a1(); <a href="javascript:;" οnclick="javascript:c1();">點擊</a>4、上下文對象
ABCDEFGH function changeColor(_color, _size) {alert(this==window);this.style.color = _color;this.style.fontSize = _size; } //changeColor("#000"); // 因為changeColor上下文對象是window,window沒有style屬性所以不能運行 changeColor.call(document.getElementById('abc'), "#666"); // 可以重新指定上下文對象,單參數形式 changeColor.apply(document.getElementById('abc'), ["#666", "55px"]); // 多參數形式5、創建對象
var a1 = function() // 定義構造函數 {// 定義私有屬性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); // 執行父類的構造函數 } 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);? ?
轉載于:https://www.cnblogs.com/hujiong/archive/2012/01/06/2819650.html
總結
以上是生活随笔為你收集整理的重拾Javascript基础(五) - JS设计模式的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 2011年工作总结
- 下一篇: javascript访问ACCESS数据