JavaScript中的继承(二)

welkin — Fri, 15 Feb 2008 18:08:00 GMT

借鉴于Prototype框架中的继承机制的实现，我们可以更加有条理的改写我们的代码，让它看起来更加符合面向对象的风格。在prototype中的继承是使用extend方法，所以需要先要定义extend函数(为了方便理解，变量名称有改动)：

//为Object添加一个extend静态类方法
Object.extend=function(destination,source){
  for(property in source){
    destination[property]=source[property];
  }
  return destination;
}

//为Object添加extend方法
Object.prototype.extend=function(o){
  return Object.extend.apply(this,[this,o]);
}

在prototype中定义extend方法分两步走。
第一步，先为Object添加一个extend静态类方法，这个方法的作用是将原类(source)的所有属性和方法通过反射机制(for(... in ...))来传给目的类(destination)，最后返回目的类。
第二步，为Object类的原形添加extend方法，在这个方法中调用了第一步中定义的Object类静态方法extend，apply方法中的第一个this是要绑定到的当前对象，第二个参数是个数组，数组中的this是对象本身，o是传进来的参数。这个extend方法的作用是将对象o的所有属性和方法赋值给对象自身，再将自身返回，得到的就是一个继承了调用extend方法的函数的所有属性和方法的类，你可以在调用extend方法时在其参数中用JSON格式来为其添加新方法/属性或是重写旧方法。

下面我们就可以用这个extend方法了，我们还是举Person和Teacher的例子：

//定义基类Person
function Person(name,age){
   this.name=name;
   this.age=age;
}
Person.prototype={
   shout:function(){
     alert("I'm a person.");
   }
}

//定义Person子类Teacher
function Teacher(name,age){
   this.name=name;
   this.age=age;
}
Teacher.prototype=(new Person()).extend({
   shout:function(){
     alert("I'm a teacher.");
   }
});

这里与先前的例子不同的是在定义Person和Teacher时，将构造函数和方法的定义分开，定义方法时使用JSON格式，这样看起来就更符合面向对象的风格了，注意Teacher继承Person的时候，在调用extend方法时又重写了Person的shout方法，这里也是使用JSON格式。
好！我们来测试一下吧！

var p=new Person("tom","18"); //定义Person对象
var t=new Teacher("Green","33") //定义Teacher对象
p.shout();
t.shout();

我们将看到结果：
第一个对话框："I'm a person."
第二个对话框："I'm a teacher."

welkin 2008-02-16 02:08 发表评论

JavaScript中的继承(一)

welkin — Fri, 15 Feb 2008 17:22:00 GMT

在javascript中不存在面向对象中的继承关系，我们可以通过很多种手段来实现继承机制，先看一个简单的例子：

//基类Person
function Person(name,age){
  this.name=name;
  this.age=age;
  this.shout=function(){
    alert("I'm a person.");
  }
}

//Person子类Teacher
function Teacher(name,age){
  this.temp=Person;
  this.temp(name,age);
  delete temp;
}

我们先定义了一个Person类（我习惯站在面向对象的角度来称呼它，当然，你可以称它为函数），含有两个属性name,age和一个方法shout，让Teacher类继承Person类的办法是为Teacher添加一个临时函数temp，先让temp指向Person这个构造函数，然后调用temp(name,age)时实际则是调用了Person(name,age)这个构造函数，这样就Teacher就继承了Person的所有属性和方法，最后只需删除temp这个临时函数即可。当然，如果你需要为Teacher添加新的方法或是重写Person的方法时，你可以在delete temp之后添加。

上面的例子也可以用call函数或apply函数实现，这样用起来更加简单：

//基类Person
function Person(name,age){
  this.name=name;
  this.age=age;
  this.shout=function(){
    alert("I'm a person.");
  }
}

//Person子类Teacher
function Teacher(name,age){
  //this.temp=Person;
  //this.temp(name,age);
  //delete temp;
  Person.call(this,name,age);
}

用apply实现只需将Teacher中Person.call(this,name,age);换为Person.apply(this,[name,age]);

welkin 2008-02-16 01:22 发表评论

BlogJava-welkinwwl-文章分类-JavaScript

JavaScript中的继承(二)

JavaScript中的继承(一)