首页 > 代码库 > 初识JavaScriptOOP（js面向对象）

初识JavaScriptOOP（js面向对象）

2024-10-10 06:59:02   214人阅读

初识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面向对象）


联系
我们