更改或覆盖 JavaScript 函数答案

【问题标题】：Change or override javascript functions更改或覆盖 JavaScript 函数
【发布时间】：2018-06-20 08:23:14
【问题描述】：

我正在尝试覆盖几个 javascript 函数。 javascript 由 chrome 中的 Requestly extension 加载。我觉得所有的代码都封装在一个函数里面，包裹在()中；

// start of the file
"use strict";
!function(Bt, Xt) {
    "object" == typeof module && "object" == typeof module.exports ? 
    module.exports = Bt.document ? Xt(Bt, !0) : function(Gt) {
        if (!Gt.document)
            throw new Error("jQuery requires a window with a document");
        return Xt(Gt)
    }
    : Xt(Bt)
}("undefined" == typeof window ? this : window, function(Bt, Xt) {
    function Gt(Cr, Pr) {
        var Ar = (Pr = Pr || kn).createElement("script");
        Ar.text = Cr,
        Pr.head.appendChild(Ar).parentNode.removeChild(Ar)
    } // all the functions are defined below here

    UI.writeLine = function(a, b, c, d=!0) {
        //display a line of text in the browser window
    }

    let UI_writeLine = UI.writeLine;
    UI.writeLine = function(x, y, z) {
        Network.send() // 1. change - comment out this line
        UI_writeLine.call(a, b, c, d, !1);
    }

    let writeText = new function() {
        if (var1 == 1 || var2 == 2) // 2. change - modify this if-test
    }

// end of file
}
);

我的意图是更改加载代码中的几行，可能只是通过 requestly 加载一个额外的 JavaScript 文件。我试图在一个正在加载的附加 JavaScript 文件中定义这两个有趣的函数，但似乎只有原始定义在使用。我认为 let 关键字将函数设为私有？

我当然可以复制 requestly 加载的原始代码，然后更改完整的代码。但如前所述，我只需要更改几行并考虑在附加文件或用户脚本中覆盖它。不过，用户脚本可能是一个复杂而混乱的选择。

虽然熟悉编程，但对javascript不是很熟悉。

【问题讨论】：

我只需要更改几行，哪些会改变答案（如果有的话）是否正确。
您需要向我们展示这些功能的确切位置和使用方式。这里的“私人”是什么意思？
我花了一些时间编辑并试图澄清我的原始帖子。脚本本身非常大，并且以不可读的变量名缩小。希望这次我包含了更多相关的部分。

标签： javascript google-chrome-extension userscripts

【解决方案1】：

从您发布的代码看来，您可以传入一个新函数，其中的函数已被注释掉或更改以满足您的需求。下面的代码在我的编辑器中签出（Webstorm 11 & Quokka）。您可以尝试按要求加载此内容。

'use strict'
!function (Bt, Xt) {
  'object' === typeof module && 'object' === typeof module.exports ? module.exports = Bt.document ? Xt(Bt, !0) : function (Gt) {
      if (!Gt.document)
        throw new Error('jQuery requires a window with a document')
      return Xt(Gt)
    }
    : Xt(Bt)
}(myFunction())


function myFunction () {
  return 'undefined' === typeof window ? this : window, function (Bt, Xt) {
    function Gt (Cr, Pr) {
      let Ar = (Pr = Pr || kn).createElement('script')
      Ar.text = Cr
      Pr.head.appendChild(Ar).parentNode.removeChild(Ar)
    } // all the functions are defined below here

    UI.writeLine = function (a, b, c, d = !0) {

    }

    let UI_writeLine = UI.writeLine
    UI.writeLine = function (x, y, z) {
      //Network.send() // 1. change - comment out this line
      UI_writeLine.call(a, b, c, d, !1)
    }

    let writeText = function () {
      if (var1 === 'my value 1' || var2 === 'my value 2') { // 2. change - modify this if-test
        // Do what I need
      }
    }
    // end of file
  }

}

您可以在 javascript 中利用的一个鲜为人知的事情是，您可以覆盖像变量这样的表达函数。

【讨论】：

不幸的是，它似乎不起作用。如果我创建一个附加文件并按要求加载它，我只会在第 8 行得到一个错误：: Xt(Bt) Uncaught TypeError: Xt is not a function。 i.stack.imgur.com/75Xqf.png 注意，原始的 JavaScript 文件也是按请求加载的。

【解决方案2】：

简而言之，您的代码遵循此结构

function(windowArg, functionArg) {

}(window, function(a, b) {
  // Some Private functions here

  UI.writeLine = function() { ... } // First definition

  let UI_writeLine = UI.writeLine;  // Holds reference to above definition

  UI.writeLine = function(x, y, z) { // New definition for UI.writeLine
    Network.send() // 1. change - comment out this line
    UI_writeLine.call(a, b, c, d, !1);
  }

  let writeText = new function() { // Private function
    if (var1 == 1 || var2 == 2) 
  }
});

现在，看看我提到的 cmets。在外部脚本的帮助下，您可以覆盖 UI.writeLine 的定义并注释您想要的代码。

所以如果你再定义一个这样的脚本

(function() {
  UI.writeLine = function() {
    // Network.send()
    ... Other Code
  }
}());

并在之前的脚本之后使用Requestly 插入它。您应该能够看到您的代码正在执行，因为您将 UI.writeLine 的引用更改为新函数。

但是writeTest是函数内部的私有函数，你可以通过外部脚本编写修改。

对于这种情况，我建议您修改原始脚本并在此处注释代码。使用Requestly Library 托管您的文件，在那里修改它，添加适当的注释并复制 url 并使用 Requestly 插入。你可以试试Library feature here

免责声明：在此处请求创始人。

【讨论】：