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(); // 啦啦啦
  


你可能感兴趣的:(JavaScript,类,function)