对JavaScript面对对象#继承的理解

最新推荐文章于 2024-11-02 19:19:35 发布

lovekker

最新推荐文章于 2024-11-02 19:19:35 发布

阅读量80

点赞数

文章标签： javascript xhtml java ViewUI

前期看到一篇高手写的文章<悟透JavaScript>，文章非常棒，读了好几遍。

记下自己对JavaScript#OOP这块的感悟，其实重要的点就两个，一个是结构，一个是数据，如果还有第三个那就应该是规则定义或约束。

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>对OO的感悟</title>
		<script type="text/javascript" language="JavaScript1.5">
			/**
			 * 考虑JavaScript构造继承体系，是否可依据用途定义出两种对象
			 * <p>1、结构对象，负责描述具体数据对象的结构，类似Java中的类
			 * <p>2、数据对象，是JavaScript对象，包含结构对象定义的结构，包含独立的数据，类似Java中的类实例
			 */
			//根对象
			var OBJECT = {
				isA:function(e) {
					var currType = this;
					while (currType) {
						if (currType == e.P_TYPE) {
							return true;
						}
						currType = currType.P_TYPE;
					}
					return false;
				}
			};
			/**
			 * 构造类继承体系
			 * <p>实现原理：
			 * <p>1、利用prototype原型链绑定父类结构对象,使得子类继承了父类结构</p>
			 * <p>2、增加P_TYPE标识用于标识当前对象父类</p>
			 * <p>3、为最终子类结构对象复制属性</p>
			 * </p>
			 * <p>基础知识：
			 * <p>1、需要理解var tmpObj = new FunctionName(){}的意义</p>
			 * <p>1.1、new Object();</p>
			 * <p>1.2、FunctionName.apply(this)，构造函数的责任是用来搞初始化的</p>
			 * <p>1.3、tmpObj = this = 1.1构造的new Object()</p>
			 * <p>2、prototype，JavaScript只有对象继承链，没有类继承链</p>
			 * </p>
			 * @param baseClass 基类结构对象
			 * @param newClass 临时子类结构对象
			 * @return 最终子类结构对象
			 */
			function CLASS(baseClass, newClass) {
				function _innerFunc() {
					this.P_TYPE = baseClass;
					for (var member in newClass) {
						this[member] = newClass[member];
					}
				}
				_innerFunc.prototype = baseClass;
				return new _innerFunc();
			}
			/**
			 * 依据结构对象构造数据对象
			 * <p>实现原理：
			 * <p>1、定义实例 对象初始化责任(需要有CREATE方法)</p>
			 * <p>2、注意原型链搜索路径，加入了对象结构对象</p>
			 * </p>
			 */
			function NEW(obj, param) {
				function _innerFunc() {
					if (obj.CREATE) {
						obj.CREATE.apply(this, param);
					}
				}
				_innerFunc.prototype=obj;
				return new _innerFunc();
			}
			function doTest() {
				//类结构对象
				var Person = CLASS(OBJECT, {
					CREATE:function(name, age) {
						this.name = name;
						this.age = age;
					},
					sayHello:function() {
						console.log(this.name + ":" + this.age);
					}
				});
				var Employee = CLASS(Person, {
					CREATE:function(name, age,salary) {
						this.P_TYPE.CREATE(name, age);//super(name,age)
						this.salary = salary;
					},
					showSalary:function() {
						console.log(this.name + ":" + this.age + ":" + this.salary);
					}
				});
				//类数据对象
				var person = NEW(Person, ['小C', '20']);
				person.sayHello();
				var employee = NEW(Employee, ['小D', '20', '$200']);
				employee.showSalary();
			}
		</script>
	</head>
	<body>
		<input type="button" value="doTest" οnclick="doTest();"/>
	</body>
</html>