2. 閉包 對于閉包(closure),當(dāng)外部函數(shù)返回之后,內(nèi)部函數(shù)依然可以訪問外部函數(shù)的變量。 function f1() { var N = 0; // N是f1函數(shù)的局部變量 function f2() // f2是f1函數(shù)的內(nèi)部函數(shù),是閉包 { N += 1; // 內(nèi)部函數(shù)f2中使用了外部函數(shù)f1中的變量N console.log(N); } return f2; } var result = f1(); result(); // 輸出1 result(); // 輸出2 result(); // 輸出3 代碼中,外部函數(shù)f1只執(zhí)行了一次,變量N設(shè)為0,并將內(nèi)部函數(shù)f2賦值給了變量result。由于外部函數(shù)f1已經(jīng)執(zhí)行完畢,其內(nèi)部變量N應(yīng)該在內(nèi)存中被清除,然而事實(shí)并不是這樣:我們每次調(diào)用result的時(shí)候,發(fā)現(xiàn)變量N一直在內(nèi)存中,并且在累加。為什么呢?這就是閉包的神奇之處了!
3. 使用閉包定義私有變量 通常,JavaScript開發(fā)者使用下劃線作為私有變量的前綴。但是實(shí)際上,這些變量依然可以被訪問和修改,并非真正的私有變量。這時(shí),使用閉包可以定義真正的私有變量: function Product() { var name; this.setName = function(value) { name = value; }; this.getName = function() { return name; }; } var p = new Product(); p.setName("Fundebug"); console.log(p.name); // 輸出undefined console.log(p.getName()); // 輸出Fundebug 代碼中,對象p的的name屬性為私有屬性,使用p.name不能直接訪問。
4. prototype 每個(gè)JavaScript構(gòu)造函數(shù)都有一個(gè)prototype屬性,用于設(shè)置所有實(shí)例對象需要共享的屬性和方法。prototype屬性不能列舉。JavaScript僅支持通過prototype屬性進(jìn)行繼承屬性和方法。 function Rectangle(x, y) { this._length = x; this._breadth = y; } Rectangle.prototype.getDimensions = function() { return { length: this._length, breadth: this._breadth }; }; var x = new Rectangle(3, 4); var y = new Rectangle(4, 3); console.log(x.getDimensions()); // { length: 3, breadth: 4 } console.log(y.getDimensions()); // { length: 4, breadth: 3 } 代碼中,x和y都是構(gòu)造函數(shù)Rectangle創(chuàng)建的對象實(shí)例,它們通過prototype繼承了getDimensions方法。
5. 模塊化 JavaScript并非模塊化編程語言,至少ES6落地之前都不是。然而對于一個(gè)復(fù)雜的Web應(yīng)用,模塊化編程是一個(gè)最基本的要求。這時(shí),可以使用立即執(zhí)行函數(shù)來實(shí)現(xiàn)模塊化,正如很多JS庫比如jQuery以及我們Fundebug都是這樣實(shí)現(xiàn)的。 var module = (function() { var N = 5; function print(x) { console.log("The result is: " + x); } function add(a) { var x = a + N; print(x); } return { description: "This is description", add: add }; })(); console.log(module.description); // 輸出"this is description" module.add(5); // 輸出“The result is: 10” 所謂模塊化,就是根據(jù)需要控制模塊內(nèi)屬性與方法的可訪問性,即私有或者公開。在代碼中,module為一個(gè)獨(dú)立的模塊,N為其私有屬性,print為其私有方法,decription為其公有屬性,add為其共有方法。
6. 變量提升 JavaScript會將所有變量和函數(shù)聲明移動(dòng)到它的作用域的最前面,這就是所謂的變量提升(Hoisting)。也就是說,無論你在什么地方聲明變量和函數(shù),解釋器都會將它們移動(dòng)到作用域的最前面。因此我們可以先使用變量和函數(shù),而后聲明它們。 但是,僅僅是變量聲明被提升了,而變量賦值不會被提升。如果你不明白這一點(diǎn),有時(shí)則會出錯(cuò): console.log(y); // 輸出undefined y = 2; // 初始化y 上面的代碼等價(jià)于下面的代碼: var y; // 聲明y console.log(y); // 輸出undefined y = 2; // 初始化y 為了避免BUG,開發(fā)者應(yīng)該在每個(gè)作用域開始時(shí)聲明變量和函數(shù)。
7. 柯里化 柯里化,即Currying,可以是函數(shù)變得更加靈活。我們可以一次性傳入多個(gè)參數(shù)調(diào)用它;也可以只傳入一部分參數(shù)來調(diào)用它,讓它返回一個(gè)函數(shù)去處理剩下的參數(shù)。 var add = function(x) { return function(y) { return x + y; }; }; console.log(add(1)(1)); // 輸出2 var add1 = add(1); console.log(add1(1)); // 輸出2 var add10 = add(10); console.log(add10(1)); // 輸出11 代碼中,我們可以一次性傳入2個(gè)1作為參數(shù)add(1)(1),也可以傳入1個(gè)參數(shù)之后獲取add1與add10函數(shù),這樣使用起來非常靈活。