当前时间:Friday 2016年12月09日 欢迎访问 夜阑小雨 我的学习碎片档案,这里记录了我的学习内容和工作中经验,希望给您带去帮助。

当前位置: 首页 >> javascript >> 正文

JS面向对象

面向对象编程(OOP)的特点

抽象:抓住核心问题

封装:不考虑内部实现,只考虑功能使用

继承:从已有对象上,继承出新的对象

对象的组成

方法——函数:过程、动态的

属性——变量:状态、静态的

工厂方式
function createPerson(name, qq)		//构造函数
{
	//原料
	var obj=new Object();

	//加工
	obj.name=name;
	obj.qq=qq;

	obj.showName=function ()
	{
		alert('我的名字叫:'+this.name);
	};
	obj.showQQ=function ()
	{
		alert('我的QQ号:'+this.qq);
	};

	//出厂
	return obj;
}

var obj=createPerson('Warren', '125779473');
var obj2=createPerson('张三', '45648979879');

以上便是工厂方式来构造一个类,但是发现我们并没有用new来创建这个类,如何用new来创建呢?把程序改成如下:

function createPerson(name, qq)		//构造函数
{
	//系统偷偷替咱们做:
	//var this=new Object();

	//加工
	this.name=name;
	this.qq=qq;

	this.showName=function ()
	{
		alert('我的名字叫:'+this.name);
	};
	this.showQQ=function ()
	{
		alert('我的QQ号:'+this.qq);
	};

	//也会偷偷做一些:
	//return this;
}
var obj=new createPerson('Warren', '125779473');
var obj2=new createPerson('张三', '45648979879');
obj.showName();
obj.showQQ();
alert(obj.showName==obj2.showName);

这样便可以用new来创建对象了。用new关键字来创建对象,类中的原本为window对象的this,现在成了一个object对象,并且程序会偷偷的帮我们做上述代码中注释掉的内容。

但是上面代码中的alert会返回一个false,也就是说showName方法被重复定义了,这会导致一个问题就是:消耗资源。为了解决上述的问题,我们需要引入js中的一个概念:原型——prototype。

什么是原型——prototype?

在解释什么是原型之前,我们先看一下css这里的东西:

<style>
.box{
	background:red;
}
</style>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

这里我定义了一个css样式box,内容为背景红色,然后下面的每个div都加上了class属性并赋值为box,这样做效果是什么?我想大家都知道,就是所有的div的背景都赋上了box的样式,也就是红色背景。

说完上面的这个css的问题,我们回来说说什么是js里的原型,这里我不想给原型一个笼统的定义,我只想说js里的原型其实就相当于css中的class,即定义一个全局的方法供其子对象调用。

知道什么是原型之后,我们把上面的js方法进行如下改造:

function CreatePerson(name, qq)		//构造函数
{
	this.name=name;
	this.qq=qq;
}

CreatePerson.prototype.showName=function ()	//原型
{
	alert('我的名字叫:'+this.name);
};

CreatePerson.prototype.showQQ=function ()
{
	alert('我的QQ号:'+this.qq);
};

var obj=new CreatePerson('Warren', '125779473');
var obj2=new CreatePerson('张三', '45648979879');
obj.showName();
obj.showQQ();
obj2.showName();
obj2.showQQ();
alert(obj.showName==obj2.showName);

这种构造的方式叫做混合的的构造函数/原型方式,alert的值终于是true了,也就是说2个子对象是用的同一个方法,这样就解决了上述的方法重复定义的问题了。类名记得遵循首字母大写的规范。

原型方式需要遵循2个原则

构造函数:加属性 原型:加方法

Json方式的面向对象

所谓Json方式的面向对象,就是指把方法和属性包在一个Json里:

var json={
	name: 'Warren',
	qq: '125779473',

	showName: function ()
	{
		alert('我的名字叫:'+this.name);
	},
	showQQ: function ()
	{
		alert('我的QQ号是:'+this.qq);
	}
};
json.showName();
json.showQQ();
命名空间

所谓命名空间,其实就是把同一类的方法包在一起,可以解决方法重复命名问题,也使代码更加容易维护。

var warren={};
warren.common={};
warren.fx={};
warren.site={};

warren.common.getUser=function ()
{
	alert('a');
};

warren.fx.getUser=function ()
{
	alert('b');
};

warren.site.getUser=function ()
{
	alert('c');
};
warren.common.getUser();
warren.fx.getUser();
warren.site.getUser();

作者:夜阑小雨
原文链接:JS面向对象
夜阑小雨版权所有,转载本网站文章时请保留此信息。

收藏和分享: 转贴到开心网 转贴到校内网 分享到 Twitter Delicious 分享到 Google Reader 分享到 百度收藏 分享到 QQ收藏

所在分类:javascript

评论信息

1 条评论 发表评论
  1. 看似很简单的一句话,或许都能给人以启发,支持一小下

发布评论

您必须登录才能发表评论。

网站客户端下载