javascript - 将函数添加到 $(this) 的原型(prototype)

Question

我正在扩展 jquery.contentcarousel plugin ，并且我已经达到了通过 __prototype__ 定义新函数的特定点。我缩小了代码以演示关键部分:

(function($) {
    var   aux      = {
    navigate : function(){
        //...
      },
    }
    methods = {
        init     : function( options ) {

            return this.each(function() {

                var $el        = $(this);

                //THIS IS THE SLIPPERY LINE:
                $el.__proto__.scrollOneLeft = function() {
                    aux.navigate( -1, $el, $wrapper, $.extend(settings, {sliderSpeed: 10, sliderEasing: ''}), cache );
                };
            });

        }
    }

    $.fn.contentcarousel = function(method) {
        if ( methods[method] ) {
            return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || ! method ) {
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  method + ' does not exist on jQuery.contentcarousel' );
        }
    }; 

})(jQuery);

这适用于现代浏览器，但问题是 $el.__proto__ 不适用于 IE9 和 IE10(尚)。我不是 jQuery Ninja，所以我想这无论如何都不是正确的解决方案。

所以我的问题是，在这种情况下如何正确定义新方法？

Answer 1

是的，这不是执行此操作的正确方法。 jQuery具有很强的扩展能力，本例已经以跨浏览器的方式进行了介绍。

您可以在 jQuery 数组对象上定义新函数，方法是:

jQuery.fn.asdfize = function () {
    this.html('asdf');
    return this; // for chainability
}

您可以使用$('div').asdfize();将所有div的innerHTML替换为asdf。

这基本上就是您所需要的，因为 $(this) 具有 jQuery 数组对象 (jQuery.fn) 作为其原型(prototype)。

旧的 jQuery wiki 有一篇关于 plugin authoring 的好文章。其中涵盖了这一点。

编辑:

您已经在代码中使用 $.fn.contentcarousel 完成了此操作。其他案例有何不同？

编辑2:

在这部分代码中:

return this.each(function() {
    var $el = $(this);
    $el.__proto__.scrollOneLeft = function() { ... };
});

您可以在每个迭代中覆盖 scrollOneLeft 函数。这可能不是您想要的!

您可能只想定义该函数一次，但在其中使用 this 因为它将是您调用它的 jQuery 对象。