在学习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来定义一个类

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

这是一个简单的类,在类的内部只有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是一门解释型的语言,它并不是真正的面向对象的语言,很多面向对象的机制是需要靠模仿来实现的。

 //模仿OOP编程
function Shape4(m,n){
var x = 0;
var y = 0;
//创建一个内部的初始化函数,并执行
var init = function(){
x = m;
y = n;
}
init();
//写一个get方法,取出我们传入的x值
this.getX = function(){
return x;
}
}

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

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

 function Person(){
this.Name = "yanyan"
};
Person.age = 0;//静态变量
//静态方法
Person.showName = function(obj){
alert(obj.Name)
} Person.showName(new Person());

(3)Map

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

         function jMap(){
//私有变量
var arr = { };
//增加
this.put = function(key,value){
arr[key] = value;
}
//查询
this.get = function(key){
if(arr[key]){
return arr[key]
}else {
return null;
}
}
//删除
this.remove = function(key){
delete arr[key]
}
//遍历
this.eachMap = function(fn){
for (var key in arr){
fn(key,arr[key])
}
}
}
var country = new jMap();
country.put("01","value1");
country.put("02","value2");
country.put("03","value3");
country.put("04","value4");
alert(country.get("04"));//读取key为04的值
country.remove("04");//删除刚才读到的值
alert(country.get("04"));//此时弹窗为null //遍历读取
country.eachMap(function(key,value){
document.write(key+"-->"+value+"<br />");
})

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

JavaScript的面向对象编程(OOP)(一)——类的更多相关文章

  1. 2016/1/17 笔记 1,面向对象编程OOP 2,类 全

    面向对象编程OOP 编程方式的发展 1,面向过程 重用性低 维护工作量大  2,面向对象 重用性高 维护容易 概念 1,对象 Object 一个具体的事物 是类的实例      2,类Class 同一 ...

  2. JS--我发现,原来你是这样的JS:面向对象编程OOP[3]--(JS继承)

    一.面向对象编程(继承) 这篇博客是面向对象编程的第三篇,JS继承.继承顾名思义,就是获取父辈的各种"财产"(属性和方法). 怎么实现继承? 我们的JavaScript比较特别了, ...

  3. [JAVA] 面向对象编程OOP Note

    面向对象编程OOP Note OOP五个基本特性1. 万物皆对象.2. 程序是对象的集合,它们通过发送消息来告知彼此所要做的.3. 每个对象都有自己的由其他对象所构成的存储.4. 每个对象都拥有其类型 ...

  4. 学习面向对象编程OOP 第一天

    面向对象编程 Object Oriented Programming 一.什么是面向对象编程OOP 1.计算机编程架构; 2.计算机程序是由一个能够起到子程序作用的单元或者对象组合而成.也就是说由多个 ...

  5. S.O.L.I.D 是面向对象设计(OOD)和面向对象编程(OOP)中的几个重要编码原则

    注:以下图片均来自<如何向妻子解释OOD>译文链接:http://www.cnblogs.com/niyw/archive/2011/01/25/1940603.html      < ...

  6. 【软件构造】第三章第四节 面向对象编程OOP

    第三章第四节 面向对象编程OOP 本节讲学习ADT的具体实现技术:OOP Outline OOP的基本概念 对象 类 接口 抽象类 OOP的不同特征 封装 继承与重写(override) 多态与重载( ...

  7. [.net 面向对象编程基础] (9) 类和类的实例

    [.net 面向对象编程基础] (9) 类和类的实例 类 ,顾名思义就是分类.类别的意思.我们要面向对象编程,就需要对不同的事物进行分类.类可以说是.net面向对象的核心. 类:就是具有相同的属性和功 ...

  8. [.net 面向对象编程基础] (10) 类的成员(字段、属性、方法)

    [.net 面向对象编程基础] (10) 类的成员(字段.属性.方法) 前面定义的Person的类,里面的成员包括:字段.属性.方法.事件等,此外,前面说的嵌套类也是类的成员. a.类的成员为分:静态 ...

  9. JavaScript--我发现,原来你是这样的JS:面向对象编程OOP[2]--(创建你的那个对象吧)

    一.介绍 我们继续面向对象吧,这次是面向对象编程的第二篇,主要是讲创建对象的模式,希望大家能从博客中学到东西. 时间过得很快,还是不断的学习吧,为了自己的目标. 二.创建对象 1.前面的创建对象方式 ...

随机推荐

  1. MySQL获取汉字的首字母

    )) ) CHARSET utf8 BEGIN ); )),,), 0xB0A1,0xB0C5,0xB2C1,0xB4EE,0xB6EA,0xB7A2,0xB8C1,0xB9FE,0xBBF7, 0x ...

  2. 关于el jstl

    requestScope表示从request范围内取得.其他的还有sessionScope, pageScope和applicationScope,分别对应4种属性范围.而如果直接写${passwor ...

  3. 使用maven搭建SpringMVC项目环境

    Window环境下用maven新建一个项目: mvn archetype:generate -DarchetypeCatalog=internal -DgroupId=cn-cisol -Dartif ...

  4. animation 动画重播

    <style> div, body{ margin: 0; padding: 0; } body{ background-color: #333; } @keyframes running ...

  5. winform 对话框,保存,另存为,还有打印控件

    学习的对话框的种类: 1.打开文件对话框(OpenFileDialog) 2.保存文件对话框(SaveFileDialog) 3.字体对话框(FontDialog) 4.颜色对话框(ColorDial ...

  6. jQuery实践——选择器篇

      一.基本 #id: html:<div id="demo1">demo1</div> jQuery:$("#demo1").css( ...

  7. vmware

    vSphere Client 图形用户界面提供了执行许多配置任务的首选方式.但是,如有必要,可以使用 ESXi Shell 在命令行处配置 ESXi .esxcli network firewall ...

  8. display inline-block 垂直居中

    table td:after {display:inline-block;width:0;height:100%;vertical-align:middle;content:'';}

  9. LINQ之路 8: 解释查询(Interpreted Queries)

    LINQ提供了两个平行的架构:针对本地对象集合的本地查询(local queries),以及针对远程数据源的解释查询(Interpreted queries). 在讨论LINQ to SQL等具体技术 ...

  10. 特许金融分析师 (CFA) 持证人现在一般在做什么工作?职业分布是怎样的?

    特许金融分析师 (CFA) 持证人现在一般在做什么工作?职业分布是怎样的?  陈雨桐 1. 全球范围: 根据 CFA 协会 2014 年 6 月的报告: CFA Institute has over ...