JavaScript：公共方法和原型

Posted 2023-02-21

【中文标题】JavaScript：公共方法和原型

【英文标题】：JavaScript: Public methods and prototypes

【发布时间】：2011-03-12 00:41:26

【问题描述】：

我不完全确定如何在 JS 中实现 OOP 概念。

我有一个完全在其构造函数中声明的类：

function AjaxList(settings)


    // all these vars are of dubious necessity... could probably just use `settings` directly
    var _jq_choice_selector = settings['choice_selector'];
    var _jq_chosen_list = settings['chosen_list'];
    var _cb_onRefresh = settings['on_refresh'];
    var _url_all_choices = settings['url_choices'];
    var _url_chosen = settings['url_chosen'];
    var _url_delete_format = settings['url_delete_format'];

    var jq_choice_selector_form = _jq_choice_selector.closest("form");
    if (DEBUG && jq_choice_selector_form.length != 1)
    
        throw("There was an error selecting the form for the choice selector.");
    

    function refresh()
    
        _updateChoicesSelector();
        _updateChosenList();
        _cb_onRefresh();
    ;

    AjaxList.prototype.refresh = refresh; // will this be called on all AjaxLists, or just the instance used to call it?
    // AjaxList.refresh = refresh; // will this be called on all AjaxLists, or just the instance used to call it?

    // ...

有多个 AjaxList 实例。当我在其中一个上调用refresh() 时，我只希望那个列表能够自行刷新。在以下情况下：

term_list = AjaxList(settings);
term_list.refresh();

refresh() 调用似乎使所有 AjaxLists 刷新自己。这样做的正确方法是什么？

我正在使用 jQuery，如果它有什么不同的话。

【问题讨论】：

您对该语言（javascript、jQuery、类）有一些严重的误解。看我的回答，看清楚。

【参考方案1】：

我正在使用 jQuery，如果有的话 区别。

不，它没有。在这里查看我的答案：What's the difference between Javascript, Jquery and Ajax?

我有一个完全是 在其构造函数中声明

Javascript 中没有类。忘记他们。您确实需要学习该语言的一些基础知识才能使用它们。它不是 Java，尽管它看起来很相似。

如果您有 构造函数，它将创建一个实例。 共享方法将在原型链中，只有特定于实例的数据会直接进入带有这个关键字。

所以对象的基本概念如下所示：

// constructor of an instance
function MyObject( param1, param2 ) 
  this.param1 = param1;
  this.param2 = param2;
  this.param3 = 32;
  return this; // [optional]


// Public methods can be called by any instance.
// Instances share their prototype object.
// The this keyword always points to the current
// instance that calls the method.
MyObject.prototype.sum = function() 
  return this.param1 + this.param2 + this.param3;


// refresh should be a shared method, since it
// does the same thing on every instance
MyObject.prototype.refresh = function() 
  // do the refresh
  // ...

这个概念的威力在于内存中只有一个刷新功能。它可以处理任何实例。此外，如果另一个对象从 MyObject 继承，刷新功能将被继承。但是在内存中仍然会有一个共享刷新功能。它可以处理任何父或子实例。

【参考方案2】：

AjaxList = function(settings) 
    this._jq_choice_selector = settings["choice_selector"];
    this._jq_chosen_list = settings["chosen_list"];
    this._cb_onRefresh = settings["on_refresh"];
    this._url_all_choices = settings["url_choices"];
    this._url_chosen = settings["url_chosen"];
    this._url_delete_format = settings["url_delete_format"];

    this.jq_choice_selector_form = _jq_choice_selector.closest("form");
    if (DEBUG && jq_choice_selector_form.length != 1) 
        throw "There was an error selecting the form for the choice selector.";
    
;

AjaxList.prototype = 
    _updateChoicesSelector: function()  ,
    _updateChosenList: function()  ,
    _cb_onRefresh: function()  ,

    refresh: function() 
        this._updateChoicesSelector();
        this._updateChosenList();
        this._cb_onRefresh();
    
;

鉴于该结构，您应该可以调用：

var ajaxList = new AjaxList(settings);
ajaxList.refresh(); // etc.

【参考方案3】：

您不应该在构造函数中重新定义原型函数。 如果要创建特权函数，请使用构造函数中的 this.methodname = ...。

function AjaxList() 
  var privateVar = 0;
  function privateFunction() 
    //...
  
  //create a refresh function just for this instance of the AjaxList
  this.refresh = function() 
    //privileged function, it can access the 'privateVar & privateFunction'
    privateVar++;
  

//public functions that don't need access to the private variables/functions
AjaxList.prototype.publicFunction=function() 

;

另外，如果你想创建一个合适的对象，你需要改变

term_list = AjaxList(settings);

到

term_list = new AjaxList(settings);