Javascript jquery oop重写方法函数

您好，我想知道如果我的方法声明如下，如何重写方法函数：

(function ($) {
    $.extend({
        tablesorter: new
        function () {
            function buildHeaders(table) {
                console.log('ORIGINAL HEADERS');
            }

            this.construct = function (settings) {
                return this.each(function () {
                    $headers = buildHeaders(this);
                });
            }
        }
    });

    $.fn.extend({
        tablesorter: $.tablesorter.construct
    });
})(jQuery);

我的目标是完全重写tableSorterbuildHeaders函数

(function ($) {
    var originalMethod = $.fn.tablesorter;
    $.fn.tablesorter = function() {
        console.log('overiding');

        function buildHeaders(table) {
            console.log('OVERRIDE HEADERS');
        }
        originalMethod.apply(this, arguments);
    }
})(jQuery);

(function ($) {
    $.extend({
        tablesorter: new
        function () {
            var self = this; //preserve the context
            this.buildHeaders = function (table) {
               //you can customize the template method anyway you want
               this.buildHeadersCore(table);
            }

            this.buildHeadersCore = function (table){
                console.log('ORIGINAL HEADERS');
            }

            this.construct = function (settings) {
                return this.each(function () {
                    $headers = self.buildHeaders(this);//call via "self" instead of "this" because "this" now refers to jquery object, not the tablesorter anymore
                });
            }
        }
    });

    $.fn.extend({
        tablesorter: $.tablesorter.construct
    });
})(jQuery);

function inherit(proto) {
    var F = function() { };
    F.prototype = proto;
    return new F();
}

(function ($) {
    var tablesorterExtended = inherit($.tablesorter);
    tablesorterExtended.buildHeadersCore = function (table){
         console.log('OVERRIDE HEADERS');
    }
    $.fn.tablesorterExtended = tablesorterExtended.construct;
   //or you can even use your old name. The point is the original buildHeaders function is not lost when you replace.
   //$.fn.tablesorter = tablesorterExtended.construct;
})(jQuery);

---

这不管用。。。任何帮助都会很好。谢谢

$.extend

不是扩展jQuery的正确方法，而是一种jQuery实用程序方法。您应该使用

$.fn.extend

。那么它应该会起作用。如果没有，也尝试使用

(function ($) {
  var originalMethod = $.fn.tablesorter;
  $.fn.extend({
    tablesorter: function() {
      console.log('overiding');

      function buildHeaders(table) {
        console.log('OVERRIDE HEADERS');
      }
      originalMethod.apply(this, arguments);
    }
  })
})(jQuery);

您可以在此处阅读更多内容：

希望这能有所帮助。

简短回答：不行。 函数中的函数（即，

buildHeaders

是另一个函数中的函数）是私有的，不能重写。以这个简单的示例为例，猜测输出：

// A very simple function inside a function
test = function() {
  function buildHeaders() {
    alert("original buildHeaders called");
  }

  buildHeaders();
}

// Now lets take a backup of the "test" function
oldTest = test;

// And try to override a private function
test = function() {
  function buildHeaders() {
    alert("duplicate buildHeaders called");
  }

  oldTest.apply(this, arguments);
}

// Call
test();

为什么？ 我认为您是在Java（或类似的）背景下尝试这一点的，在这里您覆盖了实际的方法。在Javascript中，您不重写函数，而是替换它们。i、 e

function x() { }    // Original function
oldX = x            // Original function is now oldX
x = function() { }  // x is now a **NEW** function
                    // we did not override, we replaced

// At this point, oldX and x are two different functions
// You just swapped their names, but x is no longer the original x

这一部分很清楚。现在进入第二部分，私有/局部变量：

function x() {
  var y = 0;
}
x();
alert(y); // No, you cannot access "y" from outside

但让我们来看看：

function x() {
  y = 0;  // Without "var"
}
x();
alert(y); // Alerts "0"!!

如果您给出

var y=0

，则它在该函数中变为私有。如果不这样做，它将变为全局范围（从技术上讲是更高范围的，但我们暂时不考虑）

第三部分，函数中的函数默认为私有函数。以同样的例子来说

function x() {
  function y() { }
  // this is the same as saying:
  var y = function() { }
  // note "var y", so you can't override this from outside
}

因此，如果通常在函数中定义函数，如

function x（）{function y（）{}}

，那么

y

是

x

的私有函数。再加上这一点，您永远无法覆盖javascript中的函数，只能替换。因此，您将永远无法访问或修改该

y

，除非从原始

x

功能中进行访问或修改

(function ($) {
    var originalMethod = $.fn.tablesorter;
    $.fn.tablesorter = function() {
        console.log('overiding');

        function buildHeaders(table) {
            console.log('OVERRIDE HEADERS');
        }
        originalMethod.apply(this, arguments);
    }
})(jQuery);

(function ($) {
    $.extend({
        tablesorter: new
        function () {
            var self = this; //preserve the context
            this.buildHeaders = function (table) {
               //you can customize the template method anyway you want
               this.buildHeadersCore(table);
            }

            this.buildHeadersCore = function (table){
                console.log('ORIGINAL HEADERS');
            }

            this.construct = function (settings) {
                return this.each(function () {
                    $headers = self.buildHeaders(this);//call via "self" instead of "this" because "this" now refers to jquery object, not the tablesorter anymore
                });
            }
        }
    });

    $.fn.extend({
        tablesorter: $.tablesorter.construct
    });
})(jQuery);

function inherit(proto) {
    var F = function() { };
    F.prototype = proto;
    return new F();
}

(function ($) {
    var tablesorterExtended = inherit($.tablesorter);
    tablesorterExtended.buildHeadersCore = function (table){
         console.log('OVERRIDE HEADERS');
    }
    $.fn.tablesorterExtended = tablesorterExtended.construct;
   //or you can even use your old name. The point is the original buildHeaders function is not lost when you replace.
   //$.fn.tablesorter = tablesorterExtended.construct;
})(jQuery);

唯一的选择 只有在您有权访问某个函数时，才能使用自定义实现替换该函数。因此，您必须编辑原始函数，或者以某种方式必须在函数外部保存对

buildHeaders

的引用。i、 e.您必须执行以下操作之一：

// ...
tablesorter: new function() {
  this.buildHeaders = function() { }
  // ...
}

// and later, you can replace this:
tablesorter.buildHeaders = function() { // alternative code }

您将能够重写该函数，因为它不是私有的，并且您有一个句柄来访问它

---

编辑：次要语法有以下几种方法：

• 按照RDX的答案来做：存储对

  buildHeaders

  的引用并完全替换它（记住将上下文存储为

  this

  ，在

  构造中
  函数引用jquery对象，而不是
  表排序器
  ）

• 为什么不采取更简单的方法：只需在第一块代码中修改原始函数。我想你不这样做的原因是因为你不想失去原来的函数，否则你可以用这个简单的方法代替第一种方法

如果是这样的话，我在这里提出另一种基于。此方法允许您完全覆盖模板方法的一部分，而不会丢失原始函数

(function ($) {
    var originalMethod = $.fn.tablesorter;
    $.fn.tablesorter = function() {
        console.log('overiding');

        function buildHeaders(table) {
            console.log('OVERRIDE HEADERS');
        }
        originalMethod.apply(this, arguments);
    }
})(jQuery);

(function ($) {
    $.extend({
        tablesorter: new
        function () {
            var self = this; //preserve the context
            this.buildHeaders = function (table) {
               //you can customize the template method anyway you want
               this.buildHeadersCore(table);
            }

            this.buildHeadersCore = function (table){
                console.log('ORIGINAL HEADERS');
            }

            this.construct = function (settings) {
                return this.each(function () {
                    $headers = self.buildHeaders(this);//call via "self" instead of "this" because "this" now refers to jquery object, not the tablesorter anymore
                });
            }
        }
    });

    $.fn.extend({
        tablesorter: $.tablesorter.construct
    });
})(jQuery);

function inherit(proto) {
    var F = function() { };
    F.prototype = proto;
    return new F();
}

(function ($) {
    var tablesorterExtended = inherit($.tablesorter);
    tablesorterExtended.buildHeadersCore = function (table){
         console.log('OVERRIDE HEADERS');
    }
    $.fn.tablesorterExtended = tablesorterExtended.construct;
   //or you can even use your old name. The point is the original buildHeaders function is not lost when you replace.
   //$.fn.tablesorter = tablesorterExtended.construct;
})(jQuery);

---

这对他的代码不起作用，因为

$headers=buildHeaders（This）再也找不到
buildHeaders
函数。请记住，
此
引用的是jquery对象，而不是
表排序器
。如果OP将
buildHeaders
更改为对象函数，而不是函数中的当前函数，则是-它们必须更新代码的其他部分。因此，总体答案是“不行”，当前代码不支持重写，任何更改都需要对现有代码进行轻微更改，这与OP在不修补现有代码的情况下重写内容的目标背道而驰。因此答案是不，你不能