Question

我有一个可以在特定DOM元素上执行方法的小库。它看起来有点像这样：

//An accessor method for the library
window.$ = function(selector){
    var new_instance = new lib();
    return new_instance.init(selector);
}
//And the actual library...
function lib(){
    this.context = window;
    this.init = function(sel){
        this.context = document.querySelector(sel);
        return this;
    };
    this.addPlugin = function(name, fn){
        lib.prototype[name] = fn;
        return this;
    };
}

与Prototype或jQuery一样，您选择带$(_selector_)调用的元素。要向库中添加方法，可以使用lib.addPlugin(...)方法。不幸的是，当我添加这样的方法时：

lib.addPlugin('foo',function(){
    console.log(this.context);
    return this;
});

THIS关键字引用window，而不是原始父库实例。我不太了解所有原型机的工作原理，但我想知道是否有一些我可以绕过/解决这个问题。我想新添加的方法能够引用父库的变量。

Answer 1

不要在构造函数中重新定义函数，每次调用使用大量内存的$时都要创建一个闭包。

无论如何，除了addPlugin是一个实例方法而不是我实现的静态方法之外，我没有看到任何其他问题：

function lib(){
this.context = window;
}

lib.addPlugin = function(name, fn){
  this.prototype[name] = fn;
  return this;
 };

lib.prototype.init = function(sel){
this.context = document.querySelector(sel);
return this;
};

jsfiddle：http://jsfiddle.net/rAasm/

如何给原型方法访问父变量？

1 个答案: