网站首页 语言 会计 电脑 医学 资格证 职场 文艺体育 范文

面向对象编程的javascript基础

栏目: 网页设计 / 发布于: / 人气:1.31W

我们看到这里继承的概念是多么的直白,“拷贝一个类的prototype 到另外一个类”,好,Code is cheap,看代码:

面向对象编程的javascript基础

function class1() { }

function class2() { }

otype = otype;

Property1 = " class 2 additional string " ;

Method1 = function () { alert( " class 2 additional method " ); }

/*

这样,首先是class2具有了和class1 一样的prototype,不考虑构造函数,两个类是等价的。

随后,又通过prototype给class2赋予了两个额外的方法。所以class2是在class1的基础上

增加了属性和方法,这就实现了类的继承。

*/

function test() {

var obj = new class2();

// JavaScript提供了instanceof 操作符来判断一个对象是否是某个类的实例

alert(obj instanceof class2); // true

alert(obj instanceof class1); // ?

}

运行代码,结果是不是在我们的意料之中?表面上看,上面的实现完全可行,js也可以正确的理解和实现这种继承关系,obj同时是class1和 class2的实例,但实质上则不然(我们学习的目的是要知其然更要知其所以然)。js的这种理解实际上是基于一种很简单的策略,看下面的代码,先使用 prototype让class2 继承于class1,再在class2 中重复定义method 方法:

// 定义class1

function class1() {

// 构造函数

}

// 定义class1 的成员

otype = {

m1: function () { // 方法1

alert( " class1 method1 " );

}

}

// 定义class2

function class2() {

// 构造函数

}

// 让class2 继承于class1

otype = otype;

// 给class2 重复定义方法method

od = function () {

alert( " whose method2? class1 or class2 " );

}

// 创建两个类的实例

var obj1 = new class1();

var obj2 = new class2();

function test() {

// 分别调用两个对象的method 方法

od();

od();

}

从代码执行结果看,method方法在class1,2中运行的结果是相同的。

由此可见,当对class2 进行prototype 的改变时,class1的prototype也随之改变,即使对class2 的prototype 增减一些成员,class1的成员也随之改变。所以class1 和class2 仅仅是构造函数不同的两个类,它们保持着相同的成员定义。说到这里,相信读者已经发现了其中的奥妙:class1 和class2 的prototype 是完全相同的',是对同一个对象的引用。其实从这条赋值语句就可以看出来:

//让class2 继承于class1

otype=otype;

在js中,除了基本的数据类型(数字、字符串、布尔类型等),所有的赋值以及函数参数都是引用传递,而不是值传递。所以上面的语句仅仅是让class2 的prototype 对象引用class1 的prototype,造成了类成员定义始终保持一致的效果。从这里也看到了instanceof 操作符的执行机制,它就是判断一个对象是否是一个prototype 的实例,因为这里的obj1 和obj2 都是对应于同一个prototype,所以它们instanceof 的结果都是相同的。由此可见,使用prototype 引用拷贝实现继承不是一种正确的办法。但在要求不严格的情况下,却也是一种合理的方法,唯一的约束是不允许类成员的覆盖定义(这里其实也是js的灵活性的体现)。其实,我们完全可以利用反射机制和prototype 来实现js正确的类继承:

function class1() {

// 构造函数

}

otype = {

method: function () {

alert( " method1 " );

},

method2: function () {

alert( " method2 " );

}

}

function class2() {

// 构造函数

}

// 让class2 继承于class1

for ( var p in otype) {

otype[p] = otype[p]; // 利用反射机制和prototype实现继承

}

// 覆盖定义class1中的method 方法

od = function () {

alert( " class2 new method1 " );

}

// 创建两个类的实例

var obj1 = new class1();

var obj2 = new class2();

function test() {

// 分别调用两个对象的method 方法

od();

od();

// 分别调用两个对象的method2 方法

od2();

od2();

}

从运行结果可见,obj2中重复定义的method 已经覆盖了继承的method方法,同时method2 方法未受影响。而且obj1中的method 方法仍然保持了原有的定义。这样,就实现了正确意义的类的继承。为了方便开发,可以为每个类添加一个共有的方法,用以实现类的继承:

// 为类添加静态方法inherit表示继承于某类

rit = function (baseClass) {

for ( var p in otype) {

this otype[p] = otype[p];

}

}

function class1() {

// 构造函数

}

otype = {

method: function () {

alert( " method1 " );

},

method2: function () {

alert( " method2 " );

}

}

function class2() {

// 构造函数

}

// 让class2 继承于class1

// for (var p in otype) {

// otype[p] = otype[p]; // 利用反射机制和prototype实现继承

// }

rit(class1); // 等价于上面注释掉的那一个for循环

// 覆盖定义class1中的method 方法

od = function () {

alert( " class2 new method1 " );

}

// 创建两个类的实例

var obj1 = new class1();

var obj2 = new class2();

function test() {

// 分别调用两个对象的method 方法

od();

od();

// 分别调用两个对象的method2 方法

od2();

od2();

}

上面的代码使逻辑变的更加清楚,也更容易理解。通过这种方法实现的继承,有一个缺点,就是在class2 中添加类成员定义时,不能给prototype 直接赋值,而只能对其属性进行赋值,例如不能为:

otype={

//成员定义

}

而只能为:

ertyName=someValue;

odName=function(){

//语句

}

由此可见,这样实现继承仍然要以牺牲一定的代码可读性为代价。有没有“不仅基类可以用对象直接赋值给property,而且在派生类中也可以同样实现,使代码逻辑更加清晰,也更能体现面向对象的语言特点”的js继承方式?引号里的说法是多么的诱人啊,继续学习去了。