2013-04-08 64 views
7

类继承请看看下面的例子:呼叫基类的功能 - 在JavaScript

MyBaseClass = function(a) { 
    this.a = a; 
}; 

$.extend(MyBaseClass.prototype, { 
    init: function() { 
     console.log('I am initializing the base class'); 
    } 
}); 

MyChildClass = $.extend(MyBaseClass, { 
    init: function() { 
     MyBaseClass.prototype.init(); 
     console.log('I am initializing the child class'); 
    } 
}); 

var = new MyChildClass(); 
var.init(); 

Тhis应同时输出“我初始化基类”和“我初始化子类”。

我需要能够继承MyBaseClass类,但仍然能够在新的init()方法开始时调用他的init()方法。

我该怎么做?

+3

'$ .extend'不符合你的想法。 – 2013-04-08 09:48:35

+1

这个代码的一个明显问题是在底部使用'var' – 2013-04-08 09:49:57

+3

反正'$ .extend'是什么? – 2013-04-08 09:51:13

回答

17

jQuery's extend不构建继承,但是“将两个或多个对象的内容合并到第一个对象中”

使用prototype based inheritance实现自己的继承和显式调用 “超级” 的方法:

MyBaseClass = function(a) { 
    this.a = a; 
}; 
MyBaseClass.prototype.init = function() { 
    console.log('I am initializing the base class'); 
}; 

MyChildClass = function(a) { 
    this.a = a; 
} 
MyChildClass.prototype = Object.create(MyBaseClass.prototype); // makes MyChildClass "inherit" of MyBaseClass 
MyChildClass.prototype.init = function() { 
    MyBaseClass.prototype.init.call(this); // calls super init function 
    console.log('I am initializing the child class'); 
}; 

var child= new MyChildClass(); 
child.init(); 

Output

I am initializing the base class 
I am initializing the child class 
+0

这里应该使用'Object.create'吗? – 2013-04-08 09:55:17

+0

正如OP所说的“类”和继承,我个人觉得原型更适合。 – 2013-04-08 09:55:59

+2

也许Jan打算使用'MyChildClass.prototype = Object.create(MyBaseClass.prototype);'。这将是一个更好的方法来继承恕我直言。实例化父*的新实例可能有缺点。 – 2013-04-08 10:27:29

1

jsFiddle Demo

夫妇的事情。 extend真的只是增加了属性,它并没有太大的作用。因此,您需要为您的类准备好一个函数,从基类继承,然后在该类原型上使用扩展。

function MyChildClass(){}; 
MyChildClass.prototype = new MyBaseClass(); 
$.extend(MyChildClass.prototype, { 
init: function() { 
    MyBaseClass.prototype.init(); 
    console.log('I am initializing the child class'); 
} 
}); 

这里是我喜欢用继承的另一种方法 - 当的方法特异性将是一个问题 - 这是基类存储在其自己的财产

function MyChildClass(){}; 
MyChildClass.prototype = new MyBaseClass(); 
MyChildClass.prototype.base = new MyBaseClass(); 
$.extend(MyChildClass.prototype, { 
init: function() { 
    this.base.init(); 
    console.log('I am initializing the child class'); 
} 
}); 
1

另一个基于原型模式来实现这一目标:

MyBaseClass = function(a) { 
    this.a = a; 
}; 

MyBaseClass.prototype = { 
    init: function() { 
     console.log('I am initializing the base class'); 
    } 
}; 

MyChildClass = function() {}; 
MyChildClass.prototype = $.extend(new MyBaseClass(), { 
    init: function() { 
     this.super.init.call(this); 
     console.log('init child'); 
    }, 
    super: MyBaseClass.prototype, 
    constructor: MyChildClass 
}); 

var a = new MyChildClass(); 
a.init(); 

输出:

I am initializing the base class 
init child 

这里this.super存储对基类的引用。

+0

诚实的问题:你为什么要指定构造函数? – 2013-04-08 09:59:25

+0

@dystroy - 我在jquery源代码中看到了。我认为这是因为有时候,构造函数有时会指向错误的函数(现在不记得确切的场景来让它执行此操作)。 – 2013-04-08 10:00:37

+0

@dystroy能够使用'instanceof'。 'MyChildClass的一个实例' – dfsq 2013-04-08 10:01:45