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>