Javascript继承:从超类方法设置子类的属性

时间:2013-11-20 18:55:14

标签: javascript oop inheritance

很抱歉,如果以前曾经问过这个问题,但经过大量搜索,我似乎无法找到明确解决我情况的答案。

我有一个超级类,我们称之为Form,它有一些通用的方法。我只关注两种特殊方法。 show_form()显示表单,load_token()从服务器获取令牌。

表格

function Form() {
  // Event handler for form submission
  this.submit_button.bind('click', jQuery.proxy(function(){
    this.submit();
  }, this));
}

Form.prototype.show_form = function() {
  // Some other stuff happens here, but this is the relevant part. 
  // We load the token
  this.load_token();
}

Form.prototype.load_token = function(){
  // Contains a synchronous ajax request that fetches the token from the server 
  // and sets it. So we end up with
  this.token = 'some-token';
};

然后我有一个名为EmailForm的子类,它继承自Form。我还为此类定义了一个自定义submit()方法,该方法由Form()的构造函数中的事件处理程序调用。所以我有:

EmailForm

function EmailForm() {};
EmailForm.prototype = new Form();

EmailForm.prototype.submit = function() {
  console.log(this.token); // Returns undefined
};

最后,以下是它们如何结合在一起

$('#email_form_link').bind('click', function(){
  var email_form = new EmailForm();
  email_form.show_form();
});

问题

所以我需要令牌来向服务器发出请求。由于有几种形式需要load_token()方法,我在超类中定义它并让子类继承它。由于我调用email_form.show_form(),我希望email_form的{​​{1}}属性会被设置,但似乎并非如此。

那么如何调用从超类继承的方法,并让它更改调用它的sub-classe属性?

2 个答案:

答案 0 :(得分:0)

您可以尝试使用this关键字定义方法,而不是使用对象的prototype。当然,这意味着每个新对象都将获得它自己的方法实例(更多内存),而不是“继承”或共享同一个实例,但这样,每个对象(子类EmailForm)都拥有自己的属性token设置。

实施例

http://jsfiddle.net/64RRY/1/

答案 1 :(得分:0)

http://api.jquery.com/bind/

  

从jQuery 1.7开始,.on()方法是首选方法   将事件处理程序附加到文档。

如果你想为每个表单提供一个令牌而不是问题可能是由于异步请求在你请求值时没有返回值(我没有看到异步代码,也没有请求令牌值的代码)< / p>

Form.prototype.load_token = function(){
  var me = this;
  $.get("ur").then(function(data){
    me.token = 'some-token';
  }//,fail function here
  );
};

如果您希望将令牌设置一次,并为之后创建的每个EmailForm或表单项共享其值:

$.get("url")then(function(data){
  Form.prototype.token = data.token;
});