从静态方法调用ES5类方法

2023-12-28

我想从没有实例的静态函数中调用内部函数,如下所示:

Foo.Bar = function (options) {

    Autodesk.Viewing.Extension.call(this, options);

    ...

    this.innerFunc = function innerFunc(){
      ...
    }
};

Foo.Bar.prototype.constructor =
    Foo.Bar;

Foo.Bar.SomeStaticFunc = function () {
    innerFunc();
}

Use: Foo.Bar.SomeStaticFunc();.

但我得到SomeStaticFunc is not a function.

这个例子here https://abdulapopoola.com/2013/03/30/static-and-instance-methods-in-javascript/使用类的变量,例如var Foo.Bar = function (options) {...但这不是与像这样创建类的实例并调用内部函数一样吗?

let x= new Foo.Bar(options);
x.innerFunc();

还有其他方法可以做到这一点吗?

PS:我了解 ES6 类,但我现在不想将此类迁移到 ES6,因为它并不完全简单。


嗯...看来您不知道 JavaScript 内部是如何工作的,所以这里是一个快速回顾。 :)

  • JavaScriptIS面向对象的语言。对象字面量是对象,数组是对象,函数是对象,等等。

  • JavaScriptIS NOT基于类的语言。你可以说:“嘿嘿,我见过class and extendsES6 中的关键字!”。是的,但这只是语法糖。JavaScript 不像 Java 那样基于类,它基于原型.

使用 ES5 语法,有两种方法来创建所谓的“类”:

  • 对象字面量
  • 构造函数

当您使用对象文字时,您的类如下所示:

var myClass = {
  myAttribute: "foo",
  myMethod: function () {
    return "bar";
  }
};

当您使用构造函数时,您的类如下所示:

function MyClass() {
  this.myAttribute = "foo";
  this.myMethod = function () {
    return "bar";
  };
}

这两种方法当然存在差异。有了对象字面量,你就有了一种单例,其中属性在某种程度上都是静态的。使用构造函数,您可以生成实例,其属性将由this关键词。例子:

var myInstance = new MyClass();
console.log(myInstance);

该实例将包含“myAttribute”和“myMethod”自己的财产。这意味着这些属性与实例相关联。如果你想调用这个方法,你必须这样做:

myInstance.myMethod();

到目前为止一切顺利...但是我们之前所做的有一些问题。this.myMethod将为每个实例一次又一次地创建MyClass而且总是一样的。处理这个问题的更好方法是将其放入原型以便所有实例可以共享它:

function MyClass() {
  this.myAttribute = "foo";
}

MyClass.prototype.myMethod = function () {
  return "bar";
};

这好多了,但是myMethod仍然与MyClass实例...

现在我想创建一个静态方法。根据定义,我们的静态方法将绑定到类,而不是它的实例:

MyClass.myStaticMethod = function () {
  return "baz";
};

好的。在这里,为了实验的目的,我想做这样的事情:

MyClass.myStaticMethod = function () {
  myMethod();
};

这是行不通的。为什么?实际上,myMethod既不存在于给定范围内,也不存在于外部范围内。myMethod已在另一个函数(构造函数)内声明并且不返回,因此从外部是不可见的。而且这个函数已经被放到了原型中MyClass。这意味着它在全局范围内不可用,而仅在实例上可用MyClass。当你仔细想想,这是非常合乎逻辑的。例如,当你想调用数组方法(Array.prototype 中的方法)时,这样做是没有意义的:

push('test');
reverse();
includes('a');

您必须在数组(数组实例)上调用这些方法。

[].push('test');
['foo', 'bar', 'baz'].reverse();
['a', 'b'].includes('a');
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

从静态方法调用ES5类方法 的相关文章