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(); // 外部不能找到l

2、閉包

閉包的定義是，一個擁有許多變量和綁定了這些變量的環境的表達式（通常是一個函數），因而這些變量也是該表達是的一部分。 根據定義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设计模式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。