下面将介绍JavaScript最重要的部分了,面向对象编程,前面介绍的都是最基本的语法,面向对象才是JavaScript真正的编写方式,下面我将简单介绍面向对象的概念,下一节将介绍一个面向对象的JavaScript代码例子。
面向对象程序设计(简称OOP)是现在最流行的程序设计方法,这种方法有别于前面介绍的基于过程的程序设计方法。目前的主流程序设计语言 Java,C#,C++,PHP,JavaScript全部支持面向对象程序设计。JavaScript本身就是一种完全面向对象的语言,因此面向对象这 个词用在JavaScript上有些多余。
为了能透彻的理解面向对象程序设计,我先举一个例子
同学们肯定都有一台属于自己的电脑,电脑的硬件组成都是基本相似的,包括:主板,CPU,内存,硬盘,显示器,电源等。像Dell,联想 这样的公司在组装电脑时,根本不用自己去做这些硬件,他们通常会根据一定的需求去购买,只要这些硬件符合相应的接口便可以组装使用。这样极大的提高了效 率,完善了社会分工,提高了生产力,甚至像Dell,联想这样公司的盈利水平也会有充分的提高。
面向对象正是基于这样的思想。程序(电脑)是具有一定行为与属性的对象(硬件)组成的。我们是购买对象还是自己创建,完全取决于预算与时 间。通常,只要对象(硬件)能满足需求,就不必关心其功能的实现方法。面向对象程序设计最关心的是对象(硬件)的接口是什么。这就像计算机制造商对硬盘的 实现并不关心,硬盘能存储数据而且便宜耐用就可以了。
前面讲解的主要包括数据结构与算法,面向对象程序设计也是主要包括这两点。
引用网址:http://www.dreamdu.com/javascript/oop/
面向对象程序设计就是设计一个个的对象,之后在把对象通过接口组合在一起。看下面等式:
面向对象程序设计=对象1+对象2+...+对象n
对象设计=数据+算法
JavaScript面向对象编程思想
在面向对象程序设计(组装计算机)的过程中,通常不用关心对象(例如硬盘)数据的内部实现,这种内部实现我们称为对象的封装,这些数据我们称之为对象的属性或实例字段。
一个对象(硬盘)还要提供一些接口,好使外面程序(例如主板)调用(连接),这种可以调用对象的接口我们称之为方法或成员函数。
通过对象提供的方法可以调用对象内部属性来完成指定功能,这样就把前面介绍的程序设计最重要的数据与算法结合成了一个统一体,同时隐藏了对象中数据的实现过程,实现了当前最流行的面向对象编程思想。
何为对象
对象就是一种数据结构,包含了各种命名好的数据(属性),而且还可以包含对这些数据进行操作的方法(函数),一个对象将数据与方法组织到一个灵巧的对象包中,这样就大大增强了代码的模块性和可重用性,从而使程序设计更加容易,更加轻松。
由于JavaScript是松散类型的语言,因此可以动态地增加属性到对象中,这是Java,C#这些语言等做不到的。
对象也可以称作属性的容器(包括一系列属性),每个属性都包括一个名称(name)与值(value),属性的名称可以是任意字符串.
JavaScript所有对象的数据类型是object
1. JavaScript面向对象代码实践
JavaScript面向对象代码的写法与其它常见语言(Java C# C++)几乎完全不同。因此很有必要在这里为同学们举一个例子:
JavaScript面向对象代码示例
//创建一个站点的构造函数,name与url是其参数
function Site(name, url)
{
this.url = url;
this.name = name;
}
//为Site增加一个方法,用于显示网址
Site.prototype.show = function()
{
return this.name+"的网址为:"+this.url;
};
//创建一个站点集合构造函数,sites是其参数
function Sites(sites)
{
this.sites = sites;
}
//为Sites增加一个方法,用于显示网址
Sites.prototype.show = function()
{
var retstr = "";
for(var i=0;i
{
retstr+=this.sites[i].show()+"";
}
return retstr;
};
//新建一个站点集合,包括梦之都,百度,谷歌
var mySites = new Sites([new Site("dream du", "www.dream du.com"), new Site("baidu", "www.baidu.com"), new Site("google", "www.google.com")]);
//打印站点网址
document.write(mySites.show());
2. 使用构造函数创建JavaScript对象
可以使用构造函数的方式创建对象
使用构造函数定义法
语法
var object=new objectname();
- var -- 声明对象变量
- object -- 对象的名称
- new -- new的关键词()
- objectname -- 构造函数名称
示例
//定义构造函数
function Site(url, name)
{
this.url = "www.dreamdu.com";
this.name ="梦之都";
}
//使用构造函数产生一个JavaScript对象的实例
var mysite = new Site();
alert(mysite.url);
构造函数通常可以初始化对象中的一些内容,JavaScript内部提供的一些对象通常需要使用构造函数的方法生成。JavaScript函数的内容将在下一章介绍。
直接定义法创建JavaScript对象
//定义对象语法
var object={};
//对象内的属性语法(属性名(property)与属性值(value)是成对出现的)
object.property=value;
//对象内的函数语法(函数名(func)与函数内容是成对出现的)
object.func=function(){...;};
- var -- 声明对象变量
- object -- 对象的名称
- property -- 对象的属性名
- func -- 对象的方法名
说明:对象可以包含一些属性(函数可以看作带有括号的特殊属性),每个属性有名称和值。名称可以是任何字符串甚至是空。值可以是任何javascript类型,但不能是undefined。
使用定义法定义的对象示例
var site = {};
site.URL = "www.dreamdu.com";
site.name = "梦之都";
site.englishname = "dreamdu";
site.author = "可爱的猴子";
site.summary = "免费的网页设计教程";
site.pagescount = 100;
site.isOK = true;
site.startdate = new Date(2005, 12);
site.say = function(){alert(this.englishname+" say : hello world!")};
site.age = function(){var theage=(new Date().getFullYear())-site.startdate.getFullYear();alert(this.name+"已经"+theage+"岁了!")}
上面的方法定义了一个site的对象,并且为其定义了七个属性,与两个个方法。
3. JSON法创建对象
什么是JSON
JSON(JavaScript Object Notation)是一种优美的JavaScript对象创建方法。JSON也是一种轻量级数据交换格式。非常易于人阅读与编写,同时利于机器解析与生成。JSON是在AJAX中代替XML交换数据的更佳方案。
猴子提示: JSON定义法类似于,JSON定义法就是将直接定义法定义的函数与属性放到大括号中,并且去掉属性与函数签名的对象名,把等于号改为了冒号,每行后面改为逗号!
JSON格式与语法
var jsonobject=
{
//对象内的属性语法(属性名与属性值是成对出现的)
propertyname:value,
//对象内的函数语法(函数名与函数内容是成对出现的)
functionname:function(){...;}
};
- jsonobject -- JSON对象名称
- propertyname -- 属性名称
- functionname -- 函数名称
- 一对大括号,括起多个"名称/值"的集合
- JSON使用"名称/值"对的集合表示,也可以被理解为数组(Array)
- 属性名或函数名可以是任意字符串,甚至是空字符串(见下面示例)
- 逗号用于隔开每对"名称/值"对
引用网址:http://www.dreamdu.com/javascript/json/
示例
var site =
{
URL : "www.dreamdu.com",
name : "梦之都",
englishname : "dreamdu",
author : "可爱的猴子",
summary : "免费的网页设计教程",
pagescount : 100,
isOK : true,
startdate : new Date(2005, 12),
say : function(){document.write(this.englishname+" say : hello world!")},
age : function(){document.write(this.name+"已经"+((new Date().getFullYear())-this.startdate.getFullYear())+"岁了!")}
};
上面就是一个典型的JSON表示的JavaScript对象,对象的名称为dreamdu,每个名称与值使用冒号:分割,例如名称author对应值monkey,名称age对应值5.
另一个例子:
var circle = { x:6, y:8, r:5 };
上面定义了一个x坐标为6,y坐标为8,半径为5的元。
嵌套JSON对象定义
var sites =
{
count: 2,
language: "chinese",
baidu:
{
URL: "www.baidu.com",
name: "百度",
author: "baidu",
say : function(){document.write(this.name+" say hello")}
},
dreamdu:
{
URL: "www.dreamdu.com",
name: "梦之都",
author: "monkey",
say : function(){document.write(this.name+" say hello")}
}
};
上面的例子中的sites的JSON表示法中还包含了2个小的JSON表示法,因此JSON表示法是可以嵌套的。