參考地址:http://www.ruanyifeng.com/blog/2012/07/three_ways_to_define_a_javascript_class.html
javascript創建類:
在面向對象編程中,類(class)是對象(object)的模板,定義了同一組對象(又稱"實例")共有的屬性和方法。
Javascript語言不支持"類",但是可以用一些變通的方法,模擬出"類"。
方法一:
構造函數法:
1.它用構造函數模擬"類",在其內部用this關鍵字指代實例對象;
2.生成實例的時候,使用new關鍵字;
3.類的屬性和方法,還可以定義在構造函數的prototype對象之上
例子1:
//使用構造函數模擬類,可以再構造函數中添加屬性和方法 function cat(){ this.name = "Tom"; this.makeSound = function(){alert("kaka");}; } //生成實例,使用new var cat1 = new cat(); //調用方法和屬性 document.write(cat1.name); document.onmouseover = cat1.makeSound;
例子2:
//可以給構造函數傳遞參數 function cat(name){ this.name = name; this.makeSound = function(){alert(name);}; } var cat1 = new cat("Tom");
例子3:
//可以給“類”cat使用prototype加入屬性和方法 cat.prototype.sex = "man"; cat.prototype.getSex = function(){alert(cat1.sex);};
方法二:
Object.create()法
這裏的"類"被視爲一個對象,不是函數;
直接用Object.create()生成實例,不需要用到new。
特點:
這種方法比"構造函數法"簡單,但是不能實現私有屬性和私有方法,
實例對象之間也不能共享數據,對"類"的模擬不夠全面。
例子1:
//注意:這裏是聲明的一個對象 var cat = { name : "Tom", makeSound : function(){alert("Tom");} }; var cat1 = Object.create(cat); document.write(cat1.name);
例子2:瀏覽器兼容問題,對於不支持Object.create()方法的瀏覽器,用以下方式
var cat = { name : "Tom", makeSound : function(){alert("Tom");} }; //如果瀏覽器沒有Object.create方法,創建該方法 if(!Object.create){ Object.create = function(o){ function F(){}; F.prototype = o; return new F();//返回的應該是一個函數 } } var cat1 = Object.create(cat); document.write(cat1.name); document.body.onmousedown = cat1.makeSound;
方法3:
極簡主義法:
1.封裝
首先,它也是用一個對象模擬"類"。
在這個類裏面,定義一個構造函數createNew(),用來生成實例。
var Cat = {
createNew: function(){
// some code here
}
};
然後,在createNew()裏面,定義一個實例對象,把這個實例對象作爲返回值。
var Cat = {
createNew: function(){
var cat = {};
cat.name = "大毛";
cat.makeSound = function(){ alert("喵喵喵"); };
return cat;
}
};
使用的時候,調用createNew()方法,就可以得到實例對象。
var cat1 = Cat.createNew();
cat1.makeSound();
實例:
var cat = { createNew:function(){ //夠着一個對象實例 var cat = {}; cat.name = "Tom"; cat.makeSound = function(){alert("kaka")}; return cat; //返回一個實例 } } //直接調用cat對象裏的createNew構造函數 var cat1 = cat.createNew(); document.write(cat1.name); div1.onmousedown = cat1.makeSound;
2.繼承:
讓一個類繼承另一個類,實現起來很方便。
只要在前者的createNew()方法中,調用後者的createNew()方法即可。
實例:
//定義被繼承的類animal var animal = { createNew:function(){ var ani = {}; //有一個方法:sleep ani.sleep = function(){alert("sleep!")}; return ani; } } //繼承,只需要調用animal類的creatNew方法 var cat = { createNew:function(name,sound){ //繼承 var cat = animal.createNew(); cat.name = name; cat.makeSound = function(){alert(sound)}; return cat; } } var cat1 = cat.createNew("Tm","ka"); document.write(cat1.name); //調用方法 div1.onmousedown = cat1.sleep;
3.私有屬性和私有方法
在createNew中創建實例時,只要不是定義在cat對象上的屬性和方法都是私有的;
私有屬性和方法只能在createNew中訪問,不能再外部訪問。
實例:
var Cat = { createNew: function(){ var cat = {}; //沒有定義在cat對象上的屬性 var sound = "喵喵喵"; cat.makeSound = function(){ alert(sound); }; return cat; } }; var cat1 = Cat.createNew(); //在外部訪問時,返回結果爲undefined alert(cat1.sound); // undefined
4.數據共享
有時候,我們需要所有實例對象,能夠讀寫同一項內部數據。
這個時候,只要把這個內部數據,封裝在類對象的裏面、createNew()方法的外面可。
實例:
var Cat = { //要被共享的數據,訪問時通過Cat對象訪問 sound : "喵喵喵", createNew: function(){ var cat = {}; //操縱共享數據 cat.makeSound = function(){ alert(Cat.sound); }; cat.changeSound = function(x){ Cat.sound = x; }; return cat; } }; //生成兩個實例 var cat1 = Cat.createNew(); var cat2 = Cat.createNew(); //第一次調用makeSound cat1.makeSound(); // 喵喵喵 //通過第二個實例調用changeSound cat2.changeSound("啦啦啦"); //再一次通過第一個實例調用makeSound,發現數據已經修改 cat1.makeSound(); // 啦啦啦