Tampermonkey，以编程方式修改函数失败，但复制粘贴有效

Question

这与其说是一个问题，不如说是一种好奇。所以我在 classes.min.js

的网站上有一个功能

function Div(t){
        var e = this.div = document.createElement("div");
        e.style.position = t.position || "absolute", !t.width && 0 != t.width || (e.style.width = t.width + "px"), !t.height && 0 != t.height || (e.style.height = t.height + "px"), t.x || (t.x = 0), t.y || (t.y = 0), this.width = t.width, this.height = t.height, t.marginBottom && (e.style.marginBottom = t.marginBottom + "px"), t.props && (e.props = t.props), !t.top && 0 != t.top || (e.style.top = t.top + "px"), !t.left && 0 != t.left || (e.style.left = t.left + "px"), t.borderRadius && (e.style.borderRadius = t.borderRadius + "px"), t.border && (e.style.border = t.border), t.color && (e.style.backgroundColor = t.color), t.background && (e.style.background = t.background), t.backgroundSize && (e.style.backgroundSize = t.backgroundSize + "px"), t.pointerEvents && (e.style.pointerEvents = t.pointerEvents), !t.opacity && 0 != t.opacity || (e.style.opacity = t.opacity), t.zIndex && (e.style.zIndex = t.zIndex), t.cursor && (e.style.cursor = t.cursor), t.title && (e.title = t.title), t.transition && (e.style.transition = t.transition), t.setOrigin || (t.setOrigin = 0), .5 == t.setOrigin && (t.x = t.x - t.width / 2, t.y = t.y - t.height / 2), 1 == t.setOrigin && (t.x = t.x - t.width, t.y = t.y - t.height), this.x = t.x, this.y = t.y, e.style.marginLeft = t.x + "px", e.style.marginTop = t.y + "px", t.marginBottom && (e.style.marginBottom = t.marginBottom + "px"), t.className && (e.className = t.className), this.setClassName = function(t) {
            e.className = t
        }, this.show = function() {
            e.style.display = "block"
        }, this.hide = function() {
            e.style.display = "none"
        }, this.setX = function(t) {
            x = this.x = t, e.style.marginLeft = x + "px"
        }, this.setY = function(t) {
            y = this.y = t, e.style.marginTop = y + "px"
        }, this.setWidth = function(t) {
            !t && 0 != t || (e.style.width = t + "px", this.width = t)
        }, this.setHeight = function(t) {
            !t && 0 != t || (e.style.height = t + "px", this.height = t)
        }, this.setColor = function(t) {
            e.style.backgroundColor = t
        }, this.setOpacity = function(t) {
            e.style.opacity = t
        }, t.toPreDiv ? t.toPreDiv.prepend(e) : t.toDiv && t.toDiv.appendChild(e), this.remove = function() {
            e.parentNode && e.parentNode.removeChild(e)
        }
    }

我正在尝试使用 Tampermonkey 向该函数添加一些代码行，所以我这样做了

// ==UserScript==
// @name         userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @run-at       document-idle
// @description  userscript
// @author       You
// @match        https://website.com/*
// @icon         x
// @grant        none
// ==/UserScript==



(function(w) {
    oldDiv = Div;
    Div = function(t){
        console.log("added");
        oldDiv(t);
    }
})(window);

我在控制台中收到一堆“已添加”消息，但当 main.min.js 尝试访问创建的 div 时我也收到 200 多个错误，并且该网站无法按预期运行。

但是当我简单地复制粘贴函数时

// ==UserScript==
// @name         userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @run-at        document-idle
// @description  userscript
// @author       You
// @match        https://website.com/*
// @icon         x
// @grant        none
// ==/UserScript==



(function(w) {
    Div = function(t){
        console.log("added");
        var e = this.div = document.createElement("div");
        e.style.position = t.position || "absolute", !t.width && 0 != t.width || (e.style.width = t.width + "px"), !t.height && 0 != t.height || (e.style.height = t.height + "px"), t.x || (t.x = 0), t.y || (t.y = 0), this.width = t.width, this.height = t.height, t.marginBottom && (e.style.marginBottom = t.marginBottom + "px"), t.props && (e.props = t.props), !t.top && 0 != t.top || (e.style.top = t.top + "px"), !t.left && 0 != t.left || (e.style.left = t.left + "px"), t.borderRadius && (e.style.borderRadius = t.borderRadius + "px"), t.border && (e.style.border = t.border), t.color && (e.style.backgroundColor = t.color), t.background && (e.style.background = t.background), t.backgroundSize && (e.style.backgroundSize = t.backgroundSize + "px"), t.pointerEvents && (e.style.pointerEvents = t.pointerEvents), !t.opacity && 0 != t.opacity || (e.style.opacity = t.opacity), t.zIndex && (e.style.zIndex = t.zIndex), t.cursor && (e.style.cursor = t.cursor), t.title && (e.title = t.title), t.transition && (e.style.transition = t.transition), t.setOrigin || (t.setOrigin = 0), .5 == t.setOrigin && (t.x = t.x - t.width / 2, t.y = t.y - t.height / 2), 1 == t.setOrigin && (t.x = t.x - t.width, t.y = t.y - t.height), this.x = t.x, this.y = t.y, e.style.marginLeft = t.x + "px", e.style.marginTop = t.y + "px", t.marginBottom && (e.style.marginBottom = t.marginBottom + "px"), t.className && (e.className = t.className), this.setClassName = function(t) {
            e.className = t
        }, this.show = function() {
            e.style.display = "block"
        }, this.hide = function() {
            e.style.display = "none"
        }, this.setX = function(t) {
            x = this.x = t, e.style.marginLeft = x + "px"
        }, this.setY = function(t) {
            y = this.y = t, e.style.marginTop = y + "px"
        }, this.setWidth = function(t) {
            !t && 0 != t || (e.style.width = t + "px", this.width = t)
        }, this.setHeight = function(t) {
            !t && 0 != t || (e.style.height = t + "px", this.height = t)
        }, this.setColor = function(t) {
            e.style.backgroundColor = t
        }, this.setOpacity = function(t) {
            e.style.opacity = t
        }, t.toPreDiv ? t.toPreDiv.prepend(e) : t.toDiv && t.toDiv.appendChild(e), this.remove = function() {
            e.parentNode && e.parentNode.removeChild(e)
        }
    }
})(window);

它完全可以正常工作。我就是不明白为什么，有什么见解吗？

Answer 1

这样解决了

// ==UserScript==
// @name         userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @run-at       document-idle
// @description  userscript
// @author       You
// @match        https://website.com/*
// @icon         x
// @grant        none
// ==/UserScript==



(function(w) {
    oldDiv = Div;
    Div = function(t){
        console.log("added");
        oldDiv.apply(this, arguments);
    }
})(window);

但我仍然不明白为什么这个有效，而第一种方法无效，因为我一直在使用它，这是我第一次遇到这个问题。

Tampermonkey，以编程方式修改函数失败，但复制粘贴有效

Tampermonkey, modifying a function programmaticaly fails, but copy-pasting works

javascript

tampermonkey