初識JavaScriptOOP（js面向對象）

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

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

一、 生成實例對象的原始模式

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

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

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

    </script>
 


02.

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>

初識JavaScriptOOP（js面向對象）