如何将对象的属性设置为类中的函数?

How can I set property of an object to a function in a class?

提问人:Peter 提问时间:2/4/2022 最后编辑:Peter 更新时间:2/4/2022 访问量:173

问:

我正在学习 JavaScript(意味着这里介绍的代码具有一些实验性功能,只是因为我想学习它们),但我遇到了一个问题。 我的概念是,当布局发生变化时,它会调用渲染函数,然后根据布局,渲染函数会创建处理 dom 的新类。我要执行的方法在 Appl 类的构造函数中设置。当我想执行此方法时,我收到一条错误消息

Uncaught TypeError: Object must be an instance of class Appl

哪个指向方法。如果我没记错的话,我的问题是不是实例的方法作为函数传递的,而是类的方法传递的,并且该方法不是静态的,因此无法处理。 如何在不写实例名称的情况下将函数设置为指向方法(这也不起作用,因为我想在将实例传递给 appl var 之前在构造函数中设置它)?appl.#config.callbackappl.#config.callbackappl.render

  $(document).ready(function(){
    appl = new Appl(config, "appl");
    appl.render();
  });

Appl 类本身:

class Appl{
    #config;
    #layout;

    constructor(config,selfName){
      this.#config = Object.create(config);
      this.#config.setCallback = this.render;
      this.#config.setObjectName = selfName;
    }
    get getConfig(){
      return this.#config;
    }
    get getLayout(){
      return this.#layout;
    }

    #selectLayout(){
      switch (this.#config.layout) {
        case "login":{
          this.#layout = new Login(this);
          break;
        }
        case "workspace":{
          this.#layout = new Workspace(this);
          break;
        }
        default:{
          return false;
        }
      }
    }

    render(){
      this.#selectLayout();
      this.#layout.render();
    }
  }

和配置对象:

  let logoutTime = 500;
  let config = {
    layout: "login",
    container: ".container",
    logoutTime: ()=>{
      return logoutTime * 1000;
    },
    set setLayout(value){
      this.layout = value;
      this.callback();
    },
    set setCallback(value){
      this.callback = value;
    },
    set setObjectName(value){
      this.selfName = value;
    }
  }

以及 Appl 类创建后的 appl 实例:

#config: Object
callback: ƒ render()
  length: 0
  name: "render"
  arguments: (...)
  caller: (...)
  [[FunctionLocation]]: (index):140
  [[Prototype]]: ƒ ()
  [[Scopes]]: Scopes[2]
   0: Script
    Appl: class Appl
    Login: class Login
    Workspace: class Workspace
    appl: Appl {#selectLayout: ƒ, #config: {…}, #layout: Login}
    config: {layout: 'login', container: '.container', logoutTime: ƒ}
    loginPanel: // the DOM
    logoutTime: 500
    selfName: "appl"
  [[Prototype]]: Object
#layout: Login
#selectLayout: ƒ #selectLayout()
getConfig: (...)
getLayout: (...)

提前致谢。

编辑:功能小提琴:https://jsfiddle.net/gazsop/9yLoprj1/2/

JavaScript 对象 范围 this

评论

0赞 Mark Schultheiss 2/4/2022
“JavaScript 标识符必须以字母、下划线 (_) 或美元符号 ($) 开头。后续字符也可以是数字 (0–9)。您有一些也可能与hashbang评论混淆,请参阅:developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/...#
0赞 Peter 2/4/2022
因为它们是私人的。developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/......
0赞 Mark Schultheiss 2/4/2022
我制作了您的代码片段的片段。如果您提出功能,这将有助于使您的问题更容易重现和更容易回答。请注意,就目前而言,您确实在名称中具有以“#”开头的变量(注意:站点不能很好地使用类中的 # 名称进行自动格式化,为格式化时代码段创建中的内容道歉
0赞 Peter 2/4/2022
我编辑了帖子,链接在最后。

答: 暂无答案