Javascript ES6类定义在窗口全局中不可访问 [英] Javascript ES6 class definition not accessible in window global

问题描述

我遇到了一个有趣的问题，至少我认为这很有趣，有点恼人。我有一个类，对于这个问题，我会保持非常简单...

I have come across an interesting issue, at least I think it's interesting, and a little annoying. I have a class, for this question I will keep it extremely simple...

class Foo {
    static pageChange() {
        console.log('The page changed');
    }
}

现在，我可以使用Foo.pageChange ）没有问题，一切工作如预期。硬的部分，有趣的位，当我尝试访问这个动态。
我有一个单独的对象，监视事件和处理根据需要分派它们。这涉及到Google可视化库，其中我有一个表，并且表具有绑定到它的事件。我有一个对象，负责从PHP输出创建所有这一切。它是一个系统的一个heck，在一个简单的解释，你可以在PHP中做这样的事情...

Now, I can access that with Foo.pageChange() no problem, everything works as expected. The hard part, and interesting bit comes in when I try to access this dynamically. I have a separate object that monitors events and handles dispatching them as needed. This pertains to the Google visualization library, where I have a table, and the table has events tied to it. I have an object that is responsible for creating all of this from PHP output. It is one heck of a system, in an easy explanation you can do something like this in PHP...

GoogleVisLibrary::renderChart(
    array(
        'chartType' => 'table',
        'chartData' => $this->chartData,
        'chartOptions' => $this-chartOptions,
        'events' => array(
             'sort' => 'Foo.pageChange'
        )
);

现在，将创建表和所有的好东西。问题是访问静态方法在Foo类在javascript。在创建Foo之前​​，这是一个类。

now that will create teh table and all that good stuff. The problem is accessing that static method in the Foo class in javascript. What I had prior to creating the Foo as a class was this.

var Foo = {
    pageChange: function() {
         console.log('page changed');
    }
}

然后在我的事件库处理程序，它将看起来像这样..

then in my event library handler thingy it would look something like this..

for(var i = 0, l = events.length; i < l; i++) {
    window[events.className][events.fnName].apply();
}

这将工作正常，因为Foo可以通过窗口访问['Foo' ]
，但是当你使用第一个代码片段中显示的类定义时，你不能再从窗口super global访问它，它只是输出'undefined'。

and that would work fine because Foo can be accessed through window['Foo'] but when you use the class definition shown in the first code snippet, you can no longer access it from the window super global, it just outputs 'undefined'.

所以，有没有办法访问一个类中的静态方法，通过动态引用，像你可以通过窗口全局的Foo对象？

So, is there any way to access a static method in a class, through a dynamic reference like you can with the Foo object through the window global?

I我希望这是有道理的，我正在解释它。如果anyhting没有意义，请随时问，我会尽力解释更好。

I am hoping that makes sense and I am explaining it correctly. If anyhting doesn't make sense please feel free to ask, I will try to explain better. Thank you in advance for any help you can give.

推荐答案

要在窗口中获得参考 object，你需要明确这样做：

To get a reference on the window object, you'll need to do that explicitly:

window.Foo = class Foo { ... }

阅读更多关于不是窗口属性的类对象在此答案中，还引用了 ECMA2015规范，第8.1.1.4节：全球环境记录：

Read more about classes not being properties of the window object in this answer, which also quotes the ECMA2015 Specification, Section 8.1.1.4: Global Environment Records:

全局环境记录在逻辑上是单个记录，但它被指定为封装对象Environment Record和声明性环境记录的组合。对象Environment Record具有作为其基本对象的相关领域的全局对象。这个全局对象是由全局环境记录的GetThisBinding具体方法返回的值。 （例如，浏览器上的窗口引用的全局对象 全局环境记录的对象Environment Record组件包含所有内置全局变量的绑定（第18节）以及由全局代码中包含的FunctionDeclaration ，GeneratorDeclaration 或 VariableStatement 引入的所有绑定。全局代码中所有其他ECMAScript声明的绑定都包含在全局环境记录的声明性环境记录组件中。

A global Environment Record is logically a single record but it is specified as a composite encapsulating an object Environment Record and a declarative Environment Record. The object Environment Record has as its base object the global object of the associated Realm. This global object is the value returned by the global Environment Record’s GetThisBinding concrete method. (E.g., the global object referenced by window on browsers — T.J.) The object Environment Record component of a global Environment Record contains the bindings for all built-in globals (clause 18) and all bindings introduced by a FunctionDeclaration, GeneratorDeclaration, or VariableStatement contained in global code. The bindings for all other ECMAScript declarations in global code are contained in the declarative Environment Record component of the global Environment Record.

使用专用对象

最好不要使用全局对象，并专门使用特定的对象来包含你的类，并将你的事件管理库对象，如以下简化代码段所示：

Using a dedicated object

It would be better not to use the global object for this, and dedicate a specific object to contain your classes and base your event managing library on that object, as illustrated in this simplified snippet:

(function () {
    var classes = {
        Foo: class Foo {
            static pageChange() {
                console.log('The page changed');
            }
        }
    }

    /////////////
    var events = [{
        className: 'Foo',
        fnName: 'pageChange'
    }];
    for(var event of events) {
        classes[event.className][event.fnName].apply();
    }
}());

这篇关于Javascript ES6类定义在窗口全局中不可访问的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！