您的位置:首页 > Web前端 > JavaScript

javascript中的面向对象,你了解多少?

2014-03-07 21:13 381 查看
Javascript是面向对象开发的脚本语言,既然javascript是面向对象开发的,那么面向对象的前提:抽象,应该必须有,那么看看这个对象的创建,该如何抽象,然后封装呢?那么来看看javascript中对象的创建。

一、创建对象

简单的对象创建:

var box = new Object();                  //创建一个 Object 对象
	box.name = 'Lee';                        //创建一个 name 属性并赋值 
	box.age = 100;                           //创建一个 age 属性并赋值
	box.run = function ()
	 {                                       //创建一个 run()方法并返回值
		 return this.name + this.age + '运行中...';
	};


这样一个简单的类就创建完成。

二、封装——构造函数/工厂方法

不难看出,以上的对象创建方式,如果创建多个类似的对象,那么首要问题就是代码重复。所以我们要创建可以复用并且保持独立的对象(独立:当该对象有多个实例时,彼此引用操作该对象后,使得该对象保持不变)。


方法一:工厂方法

function createObject(name, age) 
		{    //集中实例化的函数 
			var obj = new Object(); 
			obj.name = name;
			 obj.age = age; 
			obj.run = function ()
			 {
				 return this.name + this.age + '运行中...';
			};
			 return obj;
		}
		var box1 = createObject('Lee', 100);	//第一个实例
		var box2 = createObject('Jack', 200);	//第二个实例
		 alert(box1.run());
		alert(box2.run());	//保持独立


方法二:构造函数

构造函数方式




function Box(name, age)
		 {    //构造函数模式
			 this.name = name;
			 this.age = age; 
			this.run = function ()
			 {
				 return this.name + this.age + '运行中...';
			};
		}
		var box1 = new Box('Lee', 100);    //new Box()即可
		 var box2  =  new Box('Jack', 200);
		alert(box1.run());
		alert(box1 instanceof Box);


区别

构造函数方法

1.没有显示的创建对象(new Object());

2.直接将属性和方法赋值给this对象;

3.没有renturn语句。


三、继续封装——原型(属性)


1、单独原型

通过构造函数或者工厂方法,我们可以得到可以复用且独立的对象,有些对象的属性的可变度是很低的,我们把这些属性封装在一起,只要实例化就可以调用。引入“原型(属性)”——特点:和所有实例化的对象共享这些已有的属性。如下图:



function Box() {};
	Box.prototype = 
	{
		constructor : Box, 
		name : 'Lee',
		age : 100,
		family : ['父亲', '母亲', '妹妹'], //添加了一个数组属性
		run : function ()
		 {
			return this.name + this.age + this.family;
		}
	};


只要实例化这个对象,就可以访问该类原型中的变量和方法。

2、构造函数+原型

问题还有:就是有些属性是不变需要共享,但是有些属性是变更的不需要共享,或者不需要被外界访问,放在原型中,岂不是封装不完全。我们就需要将原型和构造函数结合使用,共享的放在原型中,不共享的放在构造函数中。

function Box(name, age)
		 {                                       //不共享的使用构造函数 
			this.name = name; 
			this.age = age;
		        this. family = ['父亲', '母亲', '妹妹'];
		};
		
		Box.prototype = 
		{                                         //共享的使用原型模式
			constructor : Box,
			 run : function () 
			{ 
				return this.name + this.age + this.family;
			}
		};


3、优化“封装属性+构造函数”

当第一次调用构造函数时,run()方法发现不存在,然后初始化原型。当第二次调用,就不会初始化,并且第二次创建新对象,原型也不会再初始化了。这样及得到了封装,又实现了原型方法共享,并且属性都保持独立。
function Box(name ,age) 
	{    //将所有信息封装到函数体内 
		this.name = name; 
		this.age = age;
		if (typeof this.run != 'function') 
		{    //仅在第一次调用的初始化
			Box.prototype.run = function ()
			 { 
				return this.name + this.age + '运行中...';
			 };
		} 
	}


到此,javascript的面向对象的第一特征“封装”学习到这里。下篇博客,介绍谈第二个特征:继承。

————本人初学,欢迎指正。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: