类的继承有两种基本方法
对象冒充 基本原理: 构造函数使用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!"
JavaScript中对象继承
最新推荐文章于 2024-09-29 10:45:28 发布