调用具有可变参数计数的类对象答案

【问题标题】：Calling class object with variable count of arguments调用具有可变参数计数的类对象
【发布时间】：2015-02-26 03:46:07
【问题描述】：

我正在为一项非常具体的任务制作自己的类 jQuery 库。（不想用jquery，更接近原生js）。

在我的情况下，我需要一个解决方案来调用带有和不带有 agruments 的类 - 某些选择器。

我提到的 - 课程必须以两种方式工作：

myclass.function();

和：

myclass(selector).function();

类的初始化是这样的

(function(window){
var myclass = function( selector ){
        return new myclass.model.build( selector );
    };

myclass.model = myclass.prototype = {
    constructor: myclass,
    myfunction: function(){
        alert("some function's alert");
    }
};

myclass.model.build = function( selector ){
    if( !selector )
        return this;
    /* Picking objects by selector */
};

window.myclass = myclass;
return myclass;
})(window);

【问题讨论】：

标签： javascript function class arguments prototype

【解决方案1】：

jsFiddle Demo

有几种方法可以做到这一点。这是一种常见的方法，即设置一个本地函数（“类”）的实例，该函数的原型被配置为可扩展的对象，并且还具有作为对象附加的属性。

//use window and document shortcut
(function(win,doc){
 //setup local function in order to extend
 var jakeWeary = function(selector){
  //force an instance to be returned when referenced
  return new jakeWeary.fun.start(selector);        
 };
 //allow prototype to be extended by referencing fun
 jakeWeary.fun = jakeWeary.prototype = {
  constructor : jakeWeary,
  //use passed values to query
  start : function(selector){
   //query against present document
   var nodes = doc.querySelectorAll(selector);
   //mimic an array of matched elements
   for(var i = 0; i < nodes.length;i++){
    this[i] = nodes[i];       
   }
   //return self for chaining
   return this;     
  }
 };
 //extend function object in order to be used without calling instance
 jakeWeary.div = function(content){
  var div = document.createElement("div");
  div.innerHTML = content;
  return div; 
 };
 //expose
 win.jakeWeary = win.jk = jakeWeary;
})(window,document)

//call instance to match the selector `.d`
var $ = jakeWeary('.d');//lets use a fun variable like $ for this
//reference the third matched element, and then append a div created from a function on the
//jakeWeary function object
$[2].appendChild(jk.div("<p>Reinventing the wheel</p>"));

<div id="i">i</div>
<div class="d">d</div>
<div class="d">d</div>
<div class="d">d</div>

【讨论】：

非常感谢。你的例子让我意识到，它是如何真正起作用的。在 jq 中有一个 .extend 函数，它将函数直接包含在函数对象中，但 jq.fn。以前没有意识到这一点。

【解决方案2】：

您的意思是您希望非实例调用生成一个默认实例，然后应用到它？

var Foo = (function () {
    // set up constructor
    var Foo = function () {
        this.fizz = 'buzz';
    };
    Foo.prototype = Object.create(null);
    // instance version
    Foo.prototype.bar = function () {return 'this.fizz is ' + this.fizz;};
    // non-instance version
    Foo.bar = function () {return Foo.prototype.bar.apply(new Foo(), arguments);};
    return Foo;
}());

Foo.bar(); // "this.fizz is buzz"

【讨论】：