JS面向對象OOP

Javascript是一種基于對象（object-based）的語言，

你遇到的所有東西幾乎都是對象。但是，它又不是一種真正的面向對象程式設計（OOP）語言，因為它的文法中沒有class（類）。

但是ES6新增了類這個概念。

一、 生成執行個體對象的原始模式

假定我們把花看成一個對象，它有"名字"和"産地"兩個屬性。

建立一個對象有兩種方法：

<script type="text/javascript">
		        var flower=new Object();
		        flower .name="牡丹";
		        flower.area="洛陽";
		        flower.showName=function () {
		            alert(flower.name);
		        };
 </script>

           

var flower={        name:"牡丹",        area:"洛陽花會",        flower:showName=function () {        alert(flower.name);    }    };    //排程函數    flower.showName();</script>　
           

二、 原始模式的改進

我們可以寫一個函數，解決代碼重複的問題。

<script type="text/javascript">
     function Flower(name,area){
          this.name=name;
          this.area=area;
          this.showName=function(){
　　　　　　　　alter(this.name);
 　　　　　};
	; }
	 //建立一個flower對象 
	var f1=new Flower("紅牡丹","洛陽白馬寺");
	 f1.showName();
	 var f2=new Flower("紅牡丹","洛陽白馬寺"); 
	f2.showName(); 
</script>
           

這種方法的問題依然是，f1和f2之間沒有内在的聯系，不能反映出它們是同一個原型對象的執行個體。

用一個方法将他們的共同方法提出：

<script type="text/javascript">
       function Flower(name,area){
          this.name=name;
          this.area=area;
          this.showName=myName;
       }
       //全局對象
       function myName(){
            alter(this.name);
       };
       //建立一個flower對象
       var f1=new Flower("紅牡丹","洛陽白馬寺");
       f1.showName();
       var f2=new Flower("紅牡丹","洛陽白馬寺");
       f2.showName();
</script>
           

但是，這種方法對伺服器的負擔較重

<script type="text/javascript">
    function Flower(){
        //空模闆
    }
    Flower.prototype.name="牡丹花";
    Flower.prototype.area="洛陽白馬寺、龍門石窟";
    
    Flower.prototype.showName=function(){
        alert(this.name);
    };
    var flag=Flower.prototype.constructor==Flower;
    alert(flag);
    var flower1=new Flower();
    
    flower1.showName();
    if(flower._proto_==Flower.prototype){
        alert("==========");
    }
 </script>
           

還有一種

<script type="text/javascript">
        function Humens(){
            return this.foot;
        }
        //關于Humens的一個原型上的方法，擷取到foot
        Humens.prototype.getFoot=function(){
            return this.foot;
        };
        //寫一個子類
        function Man(){
            this.head=1;
        }
        Man.prototype=new Humens();
        Man.prototype.getHead=function(){
            return this.head;
        };
        
        var man1=new Man();
        alert(man1,foot);
    </script>
           

接下來模拟一下java中的類和對象

<script type="text/javascript">
        function Humens(){
            this.sport=["basketball","football","pingpong-ball"];
        }
        
        function Man(){
            Humens.call(this);
        }
        Man.prototype=new Humens();
        var man1=new Man();
        man1.sport.push("baseball");
        alert(man1.sport);
        
        var man2=new Man();
        alert(man2.sport);
    </script>