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面向对象