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

时间:2021-03-23 19:47:36
 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());	//保持独立

方法二:构造函数

构造函数方式

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

		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、单独原型

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

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

	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的面向对象的第一特征“封装”学习到这里。下篇博客,介绍谈第二个特征:继承。

————本人初学,欢迎指正。