JS Class construct and extend

伊苏

浏览: 111279 次
性别:
来自: 深圳

最近访客更多访客>>

liuqu11

xphoenix

rubskin

shanmeimeia

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

prototype JavaScript

最近有点迷上javascript, 潜下心来, 仔细理了下JS的对象构造

关于对象构造, 大致有以下几种pattern

1. factory
工厂模式, 很传统的啦, 主要就是在构造函数里临时创建一个Object, 然后把所有资源都赋予这个实例, 最后返回这个实例的引用, 创建对象时不需要new, 工厂模式嘛,
缺点是, 因为最后的引用不是原来的Class, 所以Class的prototype完全废了

2. constructor
构造模式, 很Java的风格, 构造器里, 把所有资源赋给this, 然后返回这个this的引用
缺点是, 里面的方法也随着数据一样, 每new一个实例, 就重复一份
比较纠结的是, 一定要用new, 不然的话, 里面的this指针不定指哪去了,
一般指向最外层的window对象
另外, js构造器的特色, 在构造函数结束时, 会隐式执行代码
return this;

3. factory/constructor mix
在constructor的基础上, 把里面的方法放到外面, 利用prototype属性, 让每个实例都能访问,
注意不是静态函数那种, 想想如果是静态函数, 就没办法直接访问实例里的数据了

关于继承, 没想到啊, 我居然会琢磨起JS的继承来了, 想当年, 信誓旦旦地认为自己不会用JS的对象继承, 以免搞得太复杂了...

JS里确实没有继承的语法, 所以, 我们必须人为地虚拟它
主要的继承手段有
1, 通过指针欺骗
里子类里, 如父类为ClassA
this.parent=Class; //指针指向父类构造函数
this.parent(); //执行父类构造函数, 这里, 父类的构造器里的this会指向子类, 所有资源的引用就都被骗到子类里了, 嘿嘿
delete this.parent; //销毁痕迹, 自欺欺人...

想不到, javascript看见大家都这样做之后, 居然也凑上一脚, 特别提供了2个函数方便大家作案
call(this, param1, param2, param3, ...)
apply(this, Array)
2个函数其实一样, 就是后面的参数不同而已, apply里用Array把第2个以后的参数全部打包到数组里了, 有这2个函数, 就可以取代上面的那3行代码了, 作案手法更专业了...
但可能父类的prototype里的方法都丢失了

2, 通过原型
原型链是JS里很值得钻研的东西, 这里只说有关继承的,
上面的方法, 虽然把构造器里的所有资源骗到手, 但prototype里的方法却损失了,
所以有了这个补充
父类A, 子类B
B.prototype=A.prototype //这样写很好理解, 指针对上指针了
or
B.prototype=new A(); //为什么new个实例也可以, 因为返回的是this, prototype的方法就是直接由实例调用的, 而不是静态类调用

B.prototype=A; //这是错误的, 这样指针指向父类的构造函数了
这样, 父类的方法也就入手了

注意子类的方法要在这个prototype"继承"之后再写

以下是测试代码

<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<style type="text/css">
		form input[type="button"] {width: 150px}
	</style>
	<script type="text/javascript">
	//declare Class in JavaScript
	
	/*
	 * factory pattern<br />
	 * point1, the duplication when new Car() every time<br />
	 * point2, new Car() and Car(), it's same result<br />
	 * point3, prototype is for Car, but the finger have been change in constructor,<br />
	 * so the method of prototype are be lost<br />
	 */
	function demoFactory(){
		//function Car, the same indicate, the comment isn't support by NetBean 6.8
		//var Car=function(color, brand, engineLv){}, recommandation, for comment view

		/**
		 * function description
		 * @param color
		 * @param brand
		 * @param enginelv
		 * @return 
		 */
		var Car=function(color, brand, engineLv){
			var e=new Object;
			e.color=color;
			e.brand=brand;
			e.engineLv=engineLv;
			e.getDetail=function(){alert(e.color+", "+e.brand+", "+e.engineLv);};	//*1
			return e;
		};
		Car.show=function(){alert("zoo zoo")};		//it's ok
		Car.prototype.show2=function(){alert("Car prototype")};	//it's wrong *3
		var car1=new Car('black', 'Mazda5', '2.0L');	//*2
		var car2=Car('black', 'Mazda5', '2.0L');
		try{
			car1.getDetail();
			car2.getDetail();
			Car.show();
			car2.show2();
		}catch(err){
			alert(err);
		}
	}

	/**
	 * constructor/prototype mix parttern, <u>recommendation in <b>ECMSscript</b></u><br />
	 * point1, the "this" must be, else the color are belong "window", it mean window.color<br />
	 * point2, same as point1, but the question of duplication still be<br />
	 * point3, the error that method of prototype is solved<br />
	 */
	function demoConstructor(){
		var Car=function(color, brand, engineLv){
			this.color=color;		//*1
			this.brand=brand;
			this.engineLv=engineLv;
			this.getDetail=function(){alert(this.color+", "+this.brand+", "+this.engineLv);};	//*2
		};
		Car.prototype.show2=function(){alert("Car prototype")};	//it's ok, *3
		Car.show=function(){alert("zoo zoo")};		//it's ok
		var car1=new Car('black', 'Mazda5', '2.0L');
		var car2=new Car('silver', 'Mazda5', '2.0L');
		try{
			car1.getDetail();
			car2.getDetail();
			Car.show();
			car2.show2();
		}catch(err){
			alert(err);
		}
	}


	/**
	 * constructor parttern<br />
	 * point1, the "this" must be, else the color are belong "window", it mean window.color<br />
	 * point2, declare the method to prototype method, the duplication question are solved<br />
	 * point3, the error that method of prototype is solved<br />
	 */
	function demoMix(){
		var Car=function(color, brand, engineLv){
			this.color=color;		//*1
			this.brand=brand;
			this.engineLv=engineLv;
		};
		Car.prototype.getDetail=function(){alert(this.color+", "+this.brand+", "+this.engineLv);};	//*2
		Car.show=function(){alert("zoo zoo")};		//it's ok
		Car.prototype.show2=function(){alert("Car prototype")};	//it's ok, *3
		var car1=new Car('black', 'Mazda5', '2.0L');
		var car2=new Car('silver', 'Mazda5', '2.0L');
		car1.getDetail();
		car2.getDetail();
		try{
			Car.show();
			car2.show2();
		}catch(err){
			alert(err);
		}
	}

	/**
	 * Extend demo: Object virtual<br />
	 * the expend is not support in JavaScript<br />
	 * so we must perform it throught by coding, and virtual the extend effect<br />
	 * point1, the prototype finger to CarGas, not Car, so the prototype method error
	 */
	function demoExtend1(){
		var Car=function(color, brand, engineLv){
			this.color=color;		//*1
			this.brand=brand;
			this.engineLv=engineLv;
			this.getDetail=function(){alert(this.color+", "+this.brand+", "+this.engineLv);};	//*2
		};
		Car.show=function(){alert("zoo zoo")};		//it's ok
		Car.prototype.show2=function(){alert("Car prototype")};	//it's ok, *3

		var CarGas=function(color, brand, engineLv, gasNo){
			this.gasNo=gasNo;
			this.extend=Car;
			this.extend(color, brand, engineLv);
			delete this.extend;		//it's no mind, either it delete or not delete
		}
		var car=new CarGas("back", "Mazda5", "2.0L", "97");
		try {
			alert(car.gasNo);
			car.getDetail();
			Car.show();
			car.show2();	//*1
		} catch (err) {
			alert(err);
		}
	}

	/**
	 * Extend Demo: Object virtual with method <b>call()</b> and <b>apply()</b><br />
	 * method <b>call</b> and <b>apply</b> is same except parameter<br />
	 * call's parameter: 1, "this", 2, param, 3, param, 4, param, ...<br />
	 * apply's parameter: 1, "this", 2, Array
	 */
	function demoExtend2(){
		var Car=function(color, brand, engineLv){
			this.color=color;		//*1
			this.brand=brand;
			this.engineLv=engineLv;
			this.getDetail=function(){alert(this.color+", "+this.brand+", "+this.engineLv);};	//*2
		};
		Car.show=function(){alert("zoo zoo")};		//it's ok
		Car.prototype.show2=function(){alert("Car prototype")};	//it's ok, *3

		var CarGas=function(color, brand, engineLv, gasNo){
			this.gasNo=gasNo;
			/*
			this.extend=Car;
			this.extend(color, brand, engineLv, gasNo);
			delete this.extend;
			*/
		   
		   //Car.call(this, color, brand, engineLv);
		   Car.apply(this, [color, brand, engineLv]);
		}
		var car=new CarGas("back", "Mazda5", "2.0L", "97");
		try {
			alert(car.gasNo);
			car.getDetail();
			Car.show();
			car.show2();	//*1
		} catch (err) {
			alert(err);
		}
	}

	/**
	 * Extend Demo: prototype mix<br />
	 * point1, CarGas prototype must be point to Car's <b>new Instance</b> or <b>Car.prototype</b><br />
	 * point2, this over Car's prototype method
	 */
	function demoExtend3(){
		var Car=function(color, brand, engineLv){
			this.color=color;		//*1
			this.brand=brand;
			this.engineLv=engineLv;
			this.getDetail=function(){alert(this.color+", "+this.brand+", "+this.engineLv);};	//*2
		};
		Car.show=function(){alert("zoo zoo")};		//it's ok
		Car.prototype.show2=function(){alert("Car prototype")};	//it's ok

		var CarGas=function(color, brand, engineLv, gasNo){
			this.gasNo=gasNo;
			Car.apply(this, [color, brand, engineLv]);
		}
		//CarGas.prototype=new Car();	//*1
		CarGas.prototype=Car.prototype;

		//CarGas.prototype.show2=function(){alert("CarGas prototype")};	//*2
		CarGas.prototype.show3=function(){alert("CarGas prototype")};

		var car=new CarGas("back", "Mazda5", "2.0L", "97");
		try {
			alert(car.gasNo);
			car.getDetail();
			Car.show();
			car.show2();
			car.show3();
		} catch (err) {
			alert(err);
		}
	}
	</script>
  </head>
  <body>
	  <form action="" >
		  <input type="button" value="FACTORY DEMO" onclick="demoFactory()" /><br />
		  <input type="button" value="CONSTRUCTOR DEMO" onclick="demoConstructor()" /><br />
		  <input type="button" value="CONSTR/PROTO MIX DEMO" onclick="demoMix()" /><br />
		  <br />
		  <hr size="1" />
		  <input type="button" value="EXTEND DEMO1" onclick="demoExtend1()" /><br />
		  <input type="button" value="EXTEND DEMO2" onclick="demoExtend2()" /><br />
		  <input type="button" value="EXTEND DEMO3" onclick="demoExtend3()" /><br />
	  </form>
  </body>
</html>

分享到：