前期看到一篇高手写的文章<悟透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" onclick="doTest();"/>
</body>
</html>
分享到:
相关推荐
Javascript面向对象与继承
js javascript zInherit 对象 继承
JavaScript面向对象继承详解,js进阶高手必读,内含六部分
《JavaScript面向对象编程指南》内容包括:JavaScript作为一门浏览器语言的核心思想;面向对象编程的基础知识及其在JavaScript中的运用;数据类型、操作符以及流程控制语句;函数、闭包、对象和原型等概念,以代码...
函数、闭包、对象和原型等概念,以代码重用为目的的继承模式;BOM、DOM、浏览器事件、AJAX和JSON;如何实现JavaScript中缺失的面向对象特性,如对象的私有成员与私有方法;如何应用适当的编程模式,发挥JavaScript...
第3部分深入探索JavaScript,介绍了语法、值、运算符、布尔类型、数字、字符串、语句、异常捕获、函数、变量、对象与继承、数组、正则表达式、Date、Math、JSON、标准全局变量、编码和JavaScript、ECMAScript 5的新...
JavaScript面对对象【JavaScript全栈入门教程5】
Javascript 面向对象的JavaScript进阶 Javascript技术
JavaScript内置对象相关介绍及用法ppt JavaScript内置对象相关介绍及用法
原型是理解继承概念的关键, 我们将会教你如何建立原型, 如何检测一个对象是否是另外一个对象的原型, 及其 JavaScript 的模型与Java 面向对象编程之间的区别。我们同样会向你展示如何检测对象所包含的各种属性的方法...
在JavaScript中继承是一个非常复杂的话题,比其他任何面向对象的语言中的继承都复杂得多。在大多数其他面向对象语言中,继承一个类只需使用一个关键字即可。与它们不同,在JavaScript中要想达到传承公用成员的目的,...
javascript 面对对象设计原则 (英文)
javaScript内置对象,javaScript,javaScript内置对象,javaScript,javaScript内置对象,javaScript
javascript创建对象、对象继承的有用方式详解_.docx
JavaScript内置对象(ppt)JavaScript内置对象(ppt)JavaScript内置对象(ppt)JavaScript内置对象(ppt)JavaScript内置对象(ppt)JavaScript内置对象(ppt)JavaScript内置对象(ppt)JavaScript内置对象(ppt)...
深化剖析JavaScript面对对象编程_.docx
JavaScript面对对象程序设计教程_.docx
JavaScript面向对象编程--继承.mht,JavaScript面向对象编程--继承.mht,JavaScript面向对象编程--继承.mht,JavaScript面向对象编程--继承.mht
理解Javascript原型继承原理