初识JavaScriptOOP(js面向对象)

Posted 会飞的豆子

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了初识JavaScriptOOP(js面向对象)相关的知识,希望对你有一定的参考价值。

初识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面向对象)的主要内容,如果未能解决你的问题,请参考以下文章

JavaScriptOOP

JavaScript面向对象——成员属性静态属性原型属性与JS原型链

JS高级进阶JavaScript初识面向对象

面向对象初识

初识面向对象-python

Python -- 面向对象:初识