1、什么是閉包閉包,官方對閉包的解釋是:一個擁有許多變量和綁定了這些變量的環境的表達式(通常是一個函數),因而這些變量也是該表達式的一部分。
閉包的特點:
1. 作為一個函數變量的一個引用,當函數返回時,其處於激活狀態。
2. 一個閉包就是當一個函數返回時,一個沒有釋放資源的棧區。
簡單的說,Javascript允許使用內部函數---即函數定義和函數表達式位於另一個函數的函數體內。而且,這些內部函數可以訪問它們所在的外部函數中聲明的所有局部變量、參數和聲明的其他內部函數。當其中一個這樣的內部函數在包含它們的外部函數之外被調用時,就會形成閉包。
2、閉包的幾種寫法和用法
第一種寫法:
function Circle(r) {
this.r = r;
}
Circle.PI = 3.14159;
Circle.prototype.area = function() {
return Circle.PI * this.r * this.r;
}
var c = new Circle(1.0);
alert(c.area());
//這種寫法沒什么特別的,只是給函數添加一些屬性。
//第2種寫法
var Circle = function() {
var obj = new Object();
obj.PI = 3.14159;
obj.area = function( r ) {
return this.PI * r * r;
}
return obj;
}
var c = new Circle();
alert( c.area( 1.0 ) );
//這種寫法是聲明一個變量,將一個函數當作值賦給變量。
//第3種寫法
var Circle = new Object();
Circle.PI = 3.14159;
Circle.Area = function( r ) {
return this.PI * r * r;
}
alert( Circle.Area( 1.0 ) );
//這種方法最好理解,就是new 一個對象,然后給對象添加屬性和方法。
//第4種寫法
var Circle={
"PI":3.14159,
"area":function(r){
return this.PI * r * r;
}
};
alert( Circle.area(1.0) );
//這種方法使用較多,也最為方便。var obj = {}就是聲明一個空的對象。
//第5種寫法
var Circle = new Function("this.PI = 3.14159;this.area = function( r ) {return r*r*this.PI;}");
alert( (new Circle()).area(1.0) );
//不常用
總結:第2中和第4中較為常見
3、Prototype
var dom = function(){
};
dom.Show = function(){
alert("Show Message");
};
dom.prototype.Display = function(){
alert("Property Message");
};
dom.Display(); //error
dom.Show();
var d = new dom();
d.Display();
d.Show(); //error
1、不使用prototype屬性定義的對象方法,是靜態方法,只能直接用類名進行調用!另外,此靜態方法中無法使用this變量來調用對象其他的屬性!
2、使用prototype屬性定義的對象方法,是非靜態方法,只有在實例化后才能使用!其方法內部可以this來引用對象自身中的其他屬性!
4、作用域
var dom = function(){
var Name = "Default";
this.Sex = "Boy";
this.success = function(){
alert("Success");
};
};
alert(dom.Name);
alert(dom.Sex);
答案是兩個都顯示Undefined,這是由於在Javascript中每個function都會形成一個作用域,而這些變量聲明在函數中,所以就處於這個函數的作用域中,外部是無法訪問的。要想訪問變量,
就必須new一個實例出來。
var html = {
Name:'Object',
Success:function(){
this.Say = function(){
alert("Hello,world");
};
alert("Obj Success");
}
};
相當於(js的一個語法糖)
var html = new Object();
html.Name = 'Object';
html.Success = function(){
this.Say = function(){
alert("Hello,world");
};
alert("Obj Success");
5、js閉包的用途
匿名自執行函數
var data= {
table : [],
tree : {}
};
(function(dm){
for(var i = 0; i < dm.table.rows; i++){
var row = dm.table.rows[i];
for(var j = 0; j < row.cells; i++){
drawCell(i, j);
}
}
})(data);
我們創建了一個匿名的函數,並立即執行它,由於外部無法引用它內部的變量,因此在函數執行完后會立刻釋放資源,關鍵是不污染全局對象。
結果緩存
當調用這個函數的時候,首先在緩存中查找,如果找不到,則進行計算,然后更新緩存並返回值,如果找到了,直接返回查找到的值即可。閉包正是可以做到這一點,因為它不會釋放外部的引用,從而函數內部的值可以得以保留。
var CachedSearchBox = (function(){
var cache = {},
count = [];
return {
attachSearchBox : function(dsid){
if(dsid in cache){//如果結果在緩存中
return cache[dsid];//直接返回緩存中的對象
}
var fsb = new uikit.webctrl.SearchBox(dsid);//新建
cache[dsid] = fsb;//更新緩存
if(count.length > 100){//保正緩存的大小<=100
delete cache[count.shift()];
}
return fsb;
},
clearSearchBox : function(dsid){
if(dsid in cache){
cache[dsid].clearSelection();
}
}
};
})();
CachedSearchBox.attachSearchBox("input");
封裝
var person = function(){
//變量作用域為函數內部,外部無法訪問
var name = "default";
return {
getName : function(){
return name;
},
setName : function(newName){
name = newName;
}
}
}();
print(person.name);//直接訪問,結果為undefined
print(person.getName());
person.setName("abruzzi");
print(person.getName());
得到結果如下:
undefined
default
abruzzi
實現類和繼承
function Person(){
var name = "default";
return {
getName : function(){
return name;
},
setName : function(newName){
name = newName;
}
}
};
var p = new Person();
p.setName("Tom");
alert(p.getName());
var Jack = function(){};
//繼承自Person
Jack.prototype = new Person();
//添加私有方法
Jack.prototype.Say = function(){
alert("Hello,my name is Jack");
};
var j = new Jack();
j.setName("Jack");
j.Say();
alert(j.getName());
我們定義了Person,它就像一個類,我們new一個Person對象,訪問它的方法。
下面我們定義了Jack,繼承Person,並添加自己的方法。
參考文獻:https://www.cnblogs.com/yunfeifei/p/4019504.html
