javascript深入學習------定義類

參考地址: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(); // 啦啦啦
  


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章