JavaScript中对象继承

来源:互联网 发布:ug数控铣床编程实例 编辑:程序博客网 时间:2024/05/20 19:49

类的继承有两种基本方法

对象冒充 基本原理: 构造函数使用this关键字给所有属性和方法赋值(构造函数实际上仅仅是赋值函数),所以可以利用一种方式,在类内部直接运行赋值函数,把其this关键字传递给新类。例如:

Java代码

   1. var a = function(){ 
   2.     this.a = 1; 
   3.     this.b = 2; 
   4.     alert(this); 
   5. } 
   6.  
   7. var b = function(){ 
   8.     this.aa = a;//对a中的this进行转换,同样的方式还有 
   9.     this.aa(); 
  10.     delete this.aa;  //要把这个中间方法删除掉,否则可能会在以后的操作中覆盖原来类的方法 
  11.  
  12.     //或者 
  13.     a.call(this,arg1,arg2); 
  14.     //或者 
  15.     a.apply(this,[args]); 
  16. } 
  17.  
  18. var ob = new b();    

var a = function(){
    this.a = 1;
    this.b = 2;
    alert(this);
}

var b = function(){
    this.aa = a;//对a中的this进行转换,同样的方式还有
    this.aa();
    delete this.aa;  //要把这个中间方法删除掉,否则可能会在以后的操作中覆盖原来类的方法

    //或者
    a.call(this,arg1,arg2);
    //或者
    a.apply(this,[args]);
}

var ob = new b();   

原型链

基本原理:关于原型链,详见(http://www.javaeye.com/topic/53537)把超类的一个实例付给子类的prototype对象,即可把超类的固定属性和方法传递给子类,要注意一点,这种方法无法在实例化时传递参数,所以一般采用混合方式进行类的继承。

prototype.js中的类定义和继承

1.6.0以前:

Java代码

   1. /** obsolete syntax **/  
   2. var Person = Class.create();    //通过Class.create方法创建空类 
   3. Person.prototype = {               //把方法定义到prototype中,注意,是通过initalize方法初始化类的属性 
   4.   initialize: function(name) {  
   5.     this.name = name;  
   6.   },  
   7.   say: function(message) {  
   8.     return this.name + ': ' + message;  
   9.   }  
  10. };  
  11.  
  12. var guy = new Person('Miro');  
  13. guy.say('hi');  
  14. // -> "Miro: hi"  
  15.                                             //prototype中的继承方式: 
  16. var Pirate = Class.create();    //建立空类; 
  17. // inherit from Person class:  
  18. Pirate.prototype = Object.extend(new Person(), {    //先实例化超类,再把超类中的方法复制到子类中去, 
  19.   // redefine the speak method                               //注意,实际上prototype类定义机制中并没有直接定义 
  20. say: function(message) {                                       //类的属性而是通过intilize方法,而且所有的方法都 
  21.     return this.name + ': ' + message + ', yarr!';      //之直接定义在prototype中,所以直接用原型链方式 
  22.   }                                                                        //继承超类的所有方法不会产生问题。 
  23. });  
  24.  
  25. var john = new Pirate('Long John');  
  26. john.say('ahoy matey');  
  27. // -> "Long John: ahoy matey, yarr!" 

/** obsolete syntax **/
var Person = Class.create();    //通过Class.create方法创建空类
Person.prototype = {               //把方法定义到prototype中,注意,是通过initalize方法初始化类的属性
  initialize: function(name) {
    this.name = name;
  },
  say: function(message) {
    return this.name + ': ' + message;
  }
};

var guy = new Person('Miro');
guy.say('hi');
// -> "Miro: hi"
                                            //prototype中的继承方式:
var Pirate = Class.create();    //建立空类;
// inherit from Person class:
Pirate.prototype = Object.extend(new Person(), {    //先实例化超类,再把超类中的方法复制到子类中去,
  // redefine the speak method                               //注意,实际上prototype类定义机制中并没有直接定义
say: function(message) {                                       //类的属性而是通过intilize方法,而且所有的方法都
    return this.name + ': ' + message + ', yarr!';      //之直接定义在prototype中,所以直接用原型链方式
  }                                                                        //继承超类的所有方法不会产生问题。
});

var john = new Pirate('Long John');
john.say('ahoy matey');
// -> "Long John: ahoy matey, yarr!"

来看一下Class.create方法的实现代码

Java代码

   1. var Class = { 
   2.   create: function() { 
   3.     return function() {                                          //实际上把所有的属性定义到intiliaze方法(实际上是一个类)中, 
   4.       this.initialize.apply(this, arguments);              //然后通过对象冒充方式继承该类 
   5.     } 
   6.   } 
   7. }            

var Class = {
  create: function() {
    return function() {                                          //实际上把所有的属性定义到intiliaze方法(实际上是一个类)中,
      this.initialize.apply(this, arguments);              //然后通过对象冒充方式继承该类
    }
  }
}           

可以从prototype的例子充分体会到通过对象冒充和原型链类继承的差别,一般来说属性需用对象冒充方式继承,方法需用原型链方式继承。

prototype-1.6.0以后版本:

Java代码

   1. 1.6.0以后,对prototype的类进行了更多的扩展,举例:     
   2.  
   3. /** new, preferred syntax **/  
   4. // properties are directly passed to `create` method  
   5. var Person = Class.create({  
   6.   initialize: function(name) {                       //不必定义一个空类,and定义方法的位置改变 
   7.     this.name = name;  
   8.   },  
   9.   say: function(message) {  
  10.     return this.name + ': ' + message;  
  11.   }  
  12. });  
  13.  
  14. // when subclassing, specify the class you want to inherit from  
  15. var Pirate = Class.create(Person, {            //第一个参数是class,作为超类在定义类时直接继承 
  16.   // redefine the speak method  
  17. say: function($super, message) {  
  18.     return $super(message) + ', yarr!';  
  19.   }  
  20. });  
  21.  
  22. var john = new Pirate('Long John');  
  23. john.say('ahoy matey');  
  24. // -> "Long John: ahoy matey, yarr!" 
  25.  
  26.  
  27.  
  28. //声明子类时对子类的initialize进行重写 

1.6.0以后,对prototype的类进行了更多的扩展,举例:   

/** new, preferred syntax **/
// properties are directly passed to `create` method
var Person = Class.create({
  initialize: function(name) {                       //不必定义一个空类,and定义方法的位置改变
    this.name = name;
  },
  say: function(message) {
    return this.name + ': ' + message;
  }
});

// when subclassing, specify the class you want to inherit from
var Pirate = Class.create(Person, {            //第一个参数是class,作为超类在定义类时直接继承
  // redefine the speak method
say: function($super, message) {
    return $super(message) + ', yarr!';
  }
});

var john = new Pirate('Long John');
john.say('ahoy matey');
// -> "Long John: ahoy matey, yarr!"



//声明子类时对子类的initialize进行重写


1.60以前

Java代码

   1. var Animal = Class.create();  
   2. Animal.prototype = {  
   3.   initialize: function(name, sound) {                                 //超类,顶一个两个参数 
   4.     this.name = name;  
   5.     this.sound = sound;  
   6.   },               
   7.  
   8. speak: function() {  
   9. alert(name + " says: " + sound + "!");  
  10. }  
  11. };  
  12.  
  13. var snake = new Animal("Ringneck", "hissssssssss");  
  14. snake.speak();  
  15. // -> alerts "Ringneck says: hissssssssss!"  
  16.  
  17. var Dog = Class.create();  
  18.  
  19. Dog.prototype = Object.extend(new Animal(), {  
  20. initialize: function(name) { //子类,定义一个参数 
  21. this.name = name;  
  22. this.sound = "woof";  
  23. }  
  24. });  
  25.  
  26. var fido = new Dog("Fido");  
  27. fido.speak();  
  28. // -> alerts "Fido says: woof!"   

var Animal = Class.create();
Animal.prototype = {
  initialize: function(name, sound) {                                 //超类,顶一个两个参数
    this.name = name;
    this.sound = sound;
  },              

speak: function() {
alert(name + " says: " + sound + "!");
}
};

var snake = new Animal("Ringneck", "hissssssssss");
snake.speak();
// -> alerts "Ringneck says: hissssssssss!"

var Dog = Class.create();

Dog.prototype = Object.extend(new Animal(), {
initialize: function(name) { //子类,定义一个参数
this.name = name;
this.sound = "woof";
}
});

var fido = new Dog("Fido");
fido.speak();
// -> alerts "Fido says: woof!"   


1.60以后

Java代码

   1. var Animal = Class.create({  
   2.   initialize: function(name, sound) {  
   3.     this.name = name;  
   4.     this.sound = sound;  
   5.   },  
   6.            
   7.  
   8. speak: function() {  
   9. alert(this.name + " says: " + this.sound + "!");  
  10. }  
  11. });  
  12. // subclassing Animal  
  13. var Snake = Class.create(Animal, {  
  14. initialize: function($super, name) { //通过$super的方式调用超类的initliaze,  
  15. $super(name, 'hissssssssss');  
  16. }  
  17. });  
  18. var ringneck = new Snake("Ringneck");  
  19. ringneck.speak();  
  20. //-> alerts "Ringneck says: hissssssssss!"  
  21.  
  22. var rattlesnake = new Snake("Rattler");  
  23. rattlesnake.speak();  
  24. //-> alerts "Rattler says: hissssssssss!"  
  25.  
  26. // mixing-in Enumerable  
  27. var AnimalPen = Class.create(Enumerable, {  
  28. initialize: function() {  
  29. var args = $A(arguments);  
  30. if (!args.all( function(arg) { return arg instanceof Animal }))  
  31. throw "Only animals in here!" 
  32. this.animals = args;  
  33. },  
  34.  
  35. // implement _each to use Enumerable methods  
  36. _each: function(iterator) {  
  37. return this.animals._each(iterator);  
  38. }  
  39. }); 
  40. var snakePen = new AnimalPen(ringneck, rattlesnake);  
  41. snakePen.invoke('speak');  
  42. //-> alerts "Ringneck says: hissssssssss!"  
  43. //-> alerts "Rattler says: hissssssssss!"

var Animal = Class.create({
  initialize: function(name, sound) {
    this.name = name;
    this.sound = sound;
  },
         
speak: function() {
alert(this.name + " says: " + this.sound + "!");
}
});
// subclassing Animal
var Snake = Class.create(Animal, {
initialize: function($super, name) { //通过$super的方式调用超类的initliaze,
$super(name, 'hissssssssss');
}
});
var ringneck = new Snake("Ringneck");
ringneck.speak();
//-> alerts "Ringneck says: hissssssssss!"

var rattlesnake = new Snake("Rattler");
rattlesnake.speak();
//-> alerts "Rattler says: hissssssssss!"

// mixing-in Enumerable
var AnimalPen = Class.create(Enumerable, {
initialize: function() {
var args = $A(arguments);
if (!args.all( function(arg) { return arg instanceof Animal }))
throw "Only animals in here!"
this.animals = args;
},

// implement _each to use Enumerable methods
_each: function(iterator) {
return this.animals._each(iterator);
}
});
var snakePen = new AnimalPen(ringneck, rattlesnake);
snakePen.invoke('speak');
//-> alerts "Ringneck says: hissssssssss!"
//-> alerts "Rattler says: hissssssssss!"

原创粉丝点击