zoukankan      html  css  js  c++  java
  • JavaScript的面向对象编程(OOP)(一)——类

      在学习JavaScript面向对象的编程之前,需要知道,并了解面向对象的一些基本的常识。初学者中大多数都以为面向对象中,面向对象的编程是很重要和占据很大一部分精力。笔者在之前也是认为OOP是面向对象的主要部分,那么和我持有一样想法的,下面先要纠正这一想法,真正了解面向对象。

    一、初识面向对象

    面向对象分为三部分,包括面向对象分析(OOA)、面向对象设计(OOD)、面向对象的程序设计(OOP)。

    1.1 OO编程(Object Oriented Analysis)

      典型的OO编程过程,应先整理需求,根据需求进行OOA,将真实世界的客观物件抽象成程序中的类或对象,这个时候使用的是UML语言,UML建模,OOA的输出结果是一个个类或对象的模型图。

    接下的OOD,目的是处理类之间的耦合关系,设计类或对象的接口,此时会用到各种设计模式(23种设计模式),如观察者模式,责任链模式等等(之后会写一些JavaScript常用的设计模式)。 OOA和OOD是个反复迭代的过程,它们本身没有很清晰的边界,但是相互影响、制约。 OOA和OOD结束之后才进入OOP阶段,进入实际的编码阶段。 OOA和OOD是面向对象编程的思想和具体语言无关,而OOP是面向对象的编程工具,和选用的语言相关。

    OOA和OOD因为具体要求与语言无关,所以能跨语言重用。而OOP作为二者的底层,不同的语言语法不同,所以OOP不同。

      通过简单的了解,我们所要学习的OOP编程只是面向对象里最简单的代码部分,下面我把我学习的面向对象的一些知识总结一下,理解不深,如有错误,还请订正

    二、JavaScript的面向对象编程——类

    (1)类的定义

    在JavaScript中我们利用functions来定义一个类

    1 function Shape(){
    2         var x = 1;
    3         var y = 2
    4     }

    这是一个简单的类,在类的内部只有var定义的私有变量,我们通过new关键字可以实例化一个对象 var aShape = new Shape(); ,这样我们就实例化出了一个对象实例,aShape。但是类中定义的是私有变量,我们通过 aShape.x 和 aShape.y 访问,发现程序弹出undefined。

    下面我们重新定义一个类并测试

    function Shape2(){
        this.x = 1;
        this.y = 2;
        }
    var bShape = new Shape2();       //初始化一个实例对象
    alert(bShape.x);
    alert(bShape.y);                      //分别弹出1和2

    我们在类中用this.属性名的方式定义公有变量,并且能访问成功。var除了定义私有变量,还能定义私有函数(private函数)

    function Shape3(){
               var draw = function(){
               //私有函数
            }
                this.draw2 = function(){
              //外界可以看到的共有函数
            }
    }    

    和访问变量类似,先实例化 var c = new Shape3(); 然后再通过 c.draw2(); 访问。

    (2)简单的OOP编程

    JavaScript是一门解释型的语言,它并不是真正的面向对象的语言,很多面向对象的机制是需要靠模仿来实现的。

     1 //模仿OOP编程
     2 function Shape4(m,n){
     3         var x = 0;
     4         var y = 0;
     5 //创建一个内部的初始化函数,并执行
     6         var init = function(){
     7             x = m;
     8             y = n;
     9         }
    10         init();
    11 //写一个get方法,取出我们传入的x值
    12         this.getX = function(){
    13             return x;
    14         }
    15     }

    简单的一个模仿OOP编程,我们通过 var obj = new Shape4(2,4); 实例化一个obj,并传入2,4两个参数,在通过 obj.getX(); 得到我们传入的x参数,得到2。

    下面我们来模仿OOP编程的构造函数,需要注意的是JS中静态方法是作用到类上,而不是对象上的。

     1 function Person(){
     2       this.Name = "yanyan"
     3 };
     4 Person.age = 0;//静态变量
     5 //静态方法
     6 Person.showName = function(obj){
     7           alert(obj.Name)
     8 }9 Person.showName(new Person());

    (3)Map

    JavaScript中不存在Map类型(键值对的集合)的数据,下面我们简单的模仿出Map类型

     1         function jMap(){
     2                 //私有变量
     3                 var arr = { };
     4                 //增加
     5                 this.put = function(key,value){
     6                     arr[key] = value;
     7                 }
     8                 //查询
     9                 this.get = function(key){
    10                     if(arr[key]){
    11                         return arr[key]
    12                     }else {
    13                         return null;
    14                     }
    15                 }
    16                 //删除
    17                 this.remove = function(key){
    18                     delete  arr[key]
    19                 }
    20                 //遍历
    21                 this.eachMap = function(fn){
    22                     for (var key in arr){
    23                         fn(key,arr[key])
    24                     }
    25                 }
    26             }
    27             var country = new jMap();
    28             country.put("01","value1");
    29             country.put("02","value2");
    30             country.put("03","value3");
    31             country.put("04","value4");
    32             alert(country.get("04"));//读取key为04的值
    33             country.remove("04");//删除刚才读到的值
    34             alert(country.get("04"));//此时弹窗为null
    35 
    36             //遍历读取
    37             country.eachMap(function(key,value){
    38               document.write(key+"-->"+value+"<br />");
    39             })        

    通过 var country = new jMap(); 实例化出了一个jMap对象,并通过put方法添加了四个键值的集合,此时jMap()作为类,我们可以通过new方法实例化出Map类型的数据。

  • 相关阅读:
    Jquery与mootools对比
    Maven + Eclipse + Tomcat
    一位老工程师前辈的忠告 (转载)
    如何利用JConsole观察分析JAVA程序的运行
    程序员该怎样放松?8个好网站推荐(转载)
    [转]关于程序员的59条搞笑但却真实无比的编程语录
    关于程序员的59条搞笑但却真实无比的编程语录
    [原]AppPoolService-IIS应用程序池辅助类(C#控制应用程序池操作)
    AppPoolService-IIS应用程序池辅助类(C#控制应用程序池操作)
    [译]C#控制管理VisualSVN Server
  • 原文地址:https://www.cnblogs.com/LVPlum/p/5520921.html
Copyright © 2011-2022 走看看