无法在运行时获取函数的全局执行上下文变量

Question

我猜这是一个纯香草的 javascript 问题。

我需要覆盖一个函数 showDatepicker ，我是这样做的 :

            const Base = (Handsontable.editors.DateEditor as any).prototype as any;
            const DateEditorHelper = Base.extend();

            DateEditorHelper.prototype.showDatepicker = function (event: any[]) {                    
                Base.showDatepicker.apply(this, event)

                this.$datePicker.config(this.getDatePickerConfig());

                var offset = this.TD.getBoundingClientRect();
                var dateFormat = this.cellProperties.dateFormat || this.defaultDateFormat;
                var datePickerConfig = this.$datePicker.config();
                var dateStr = void 0;
                var isMouseDown = this.instance.view.isMouseDown();
                var isMeta = event ? (0, _unicode.isMetaKey)(event.keyCode) : false;

                this.datePickerStyle.top = offset.top >= $(window).height() - 224 ? window.pageYOffset + offset.top - 224 + (0, _element.outerHeight)(this.TD) + 'px' : window.pageYOffset + offset.top + (0, _element.outerHeight)(this.TD) + 'px';
                this.datePickerStyle.left = window.pageXOffset + offset.left + 'px';

                this.$datePicker._onInputFocus = function () { };
                datePickerConfig.format = dateFormat;

                if (this.originalValue) {
                    dateStr = this.originalValue;

                    if ((0, _moment2.default)(dateStr, dateFormat, true).isValid()) {
                        this.$datePicker.setMoment((0, _moment2.default)(dateStr, dateFormat), true);
                    }

                    // workaround for date/time cells - pikaday resets the cell value to 12:00 AM by default, this will overwrite the value.
                    if (this.getValue() !== this.originalValue) {
                        this.setValue(this.originalValue);
                    }

                    if (!isMeta && !isMouseDown) {
                        this.setValue('');
                    }
                } else if (this.cellProperties.defaultDate) {
                    dateStr = this.cellProperties.defaultDate;

                    datePickerConfig.defaultDate = dateStr;

                    if ((0, _moment2.default)(dateStr, dateFormat, true).isValid()) {
                        this.$datePicker.setMoment((0, _moment2.default)(dateStr, dateFormat), true);
                    }

                    if (!isMeta && !isMouseDown) {
                        this.setValue('');
                    }
                } else {
                    // if a default date is not defined, set a soft-default-date: display the current day and month in the
                    // datepicker, but don't fill the editor input
                    this.$datePicker.gotoToday();
                }

                this.datePickerStyle.display = 'block';
                this.$datePicker.show();
            }

实际上是我对原始函数的代码进行了一些小的修改。我认为函数的内部代码变量将在运行时进行评估（我不是在谈论内部函数范围变量作为其参数或在其中声明的变量，而是关于执行上下文的全局变量）。在函数执行之前根本没有错误（当浏览器读取函数时，它不会抱怨某些变量未定义）但是当它运行时，我得到了这个错误：

Uncaught ReferenceError: _unicode is not defined
    at eval (eval at DateEditorHelper.showDatepicker (module.js?v=64fd5db96274:40281), <anonymous>:1:1)
    at e.DateEditorHelper.showDatepicker (module.js?v=64fd5db96274:40281)

被覆盖的函数运行在与原始函数应该运行的上下文相同的上下文中，我不知道为什么全局变量未定义。

原功能是一个上手的内置编辑器（datePicker）。我从 this thread and this

得到的最重要的想法

Answer 1

你说你从原来的函数中复制了代码并做了一些小改动。问题似乎是您正在使用名为 _unicode 的变量。你在定义那个变量吗？

用修改后的 'original' 代码替换方法代码时，必须确保旧代码引用的任何其他 variable/function 也被复制。

您必须考虑到原始方法是在另一个上下文中定义的。可能，作者并不是要派生此 class 或覆盖其方法。

模块（或 IIFE）的优点是您可以定义一个 public API 同时封装实现的私有部分。当然，这意味着覆盖方法或函数要困难得多。

在这种情况下，变量 _unicode 显然打算成为私有实现的一部分。它的名称遵循以下划线开头的惯例这一事实几乎就是证明。它可能是在与 DatePickerHelper 相同的模块中定义的，或者是从另一个模块导入的，但无论如何我几乎可以肯定它没有导出，因此您无法访问它并且您的代码失败。

要使覆盖生效，您必须更改代码以避免使用该 _unicode 变量，或者按照与原始代码相同的方式自行定义它。当然，根据它的定义方式，您最终可能不得不 'copy' 大量代码，但这是任何 JavaScript 曾尝试重写外部库方法的程序员都会遇到的问题受苦了。

让我们看一个这样的例子'private implementation':

(function() {
  // this is a function I want to keep private.
  function giveMeHello() {
    return 'hello, ';
  }
  
  // this is the class I want to share
  class Greeting {
    greet(name) {
      console.log(giveMeHello() + name);
    }
  }
  
  window.Greeting = Greeting;
})();

const greet1 = new Greeting();
greet1.greet('Oscar');  // outputs 'hello, Oscar'.

// As a consumer of Greeting, I don't like the way if greets people. I want the name to be in uppercase
// implementation is practically identical to original code
Greeting.prototype.greet = function() {
  console.log(giveMeHello() + name.toUpperCase());
};

// Let's use it!
greet1.greet('John'); // Oh! Error! giveMeHello is not defined!

如你所见，在这个例子中我和你做的一样。但我的实现与原始实现一样依赖于 giveMeHello 函数。但是 giveMeHello 不是全局函数或 public 函数。从我覆盖该功能的那一刻起，我无法访问它。因此，当我执行该方法时，它失败了。

如果现在我只是在覆盖方法之前复制 giveMeHello 函数，它将起作用。

你现在明白了吗？如果您不这样做，我建议您阅读 JavaScript 中有关范围的更多信息，这超出了 Whosebug 的目的。

无法在运行时获取函数的全局执行上下文变量

can't get function's global execution context variable in runtime

javascript

handsontable