为什么高阶函数隐藏我的ES6类属性？ [英] Why are Higher Order Functions hiding my ES6 Class properties?

问题描述

编辑：我添加了更新的截图（最后），以便进一步说明。

我试图使用高order函数来组合子类/ mixins但注意到我只能访问我扩展的第一个类的属性，并且只能访问任何后续类的属性 称为班级。这是我的意思的一个人为的例子：

这些是将子类应用于父类的函数：

  export const middleNameClass = middlename => BaseClass => {
 return class extends BaseClass {
 constructor（args）{
 super（args）; 
 this.middlename = middlename; 
} 
}; 
}; 
 
 export const lastNameClass = lastname => BaseClass => {
 return class extends BaseClass {
 constructor（args）{
 super（args）; 
 this.lastname = lastname; 
} 
}; 
}; 
  

这是 firstNameClass ，它将被扩展直接由父类 Person ：

  class firstNameClass {
构造函数（args）{
 this.firstname = args; 
 
 
 $ / code $ / pre 
 $ b $ p这是 Person  code>，它扩展了 firstNameClass ： 
 
 
  class Person extends firstNameClass {
构造函数（args）{
 super（args）; 
 this.getNames = this.getNames.bind（this）; 
 
 //我用来将类属性记录到控制台
 this.getNames（）; 
 
 
 getNames（）{
 console.log（this inside getNames（）：，this）; 
 console.log（名字里面的getNames（）：，this.firstname）; 
 console.log（getname中的middlenames（）：，this.middlename）; 
 console.log（lastnames里面的getNames（）：，this.lastname）; 
} 
} 
  
最后，这里是我应用更高阶的位置函数并创建我的类：
 
 pre $ const $ enhanced $增强类型compose（
 middleNameClass（Allan），
 lastNameClass（Poe）
）（Person）; 
 
 const namedPerson = new enhancedClass（Edgar）; 
  

但是，当我查看我的console.log时，我看到以下内容：


）getNames（）中的this.firstnames：埃德加
this.middlenames里面的getNames（）：undefined
this.lastnames里面的getNames（） ：undefined


有人可以解释我做错了什么？

编辑：
这里是我的 Person 类的内容：

以下是创建类后输出到控制台的内容：

解决方案

在 new enhancedClass（'Edgar'） ：

• lastNameClass 的构造函数调用 super


• middleNameClass 的构造函数调用 super


• Person 的构造函数调用 super firstNameClass does this.firstName ='Edgar'


• 返回到 Person ，它调用 getNames


• 返回到 middleNameClass ，其中 this.middleName ='Allan'


• 返回至 lastNameClass ，其中 this.lastName ='Poe'

事后调用 getNames 应该可行。如果您每次使用 extend ，那么也会发生同样的情况。

EDIT: I've added updated screenshots (at the end), for further clarification.

I'm attempting to use high order functions to compose subclasses/mixins but noticed I can only access the properties of the very first class I extend and can only access the properties of any subsequent classes after I've called the class. Here is a contrived example of what I mean:

These are functions that will apply subclasses to the parent class:

export const middleNameClass = middlename => BaseClass => {
  return class extends BaseClass {
    constructor(args) {
      super(args);
      this.middlename = middlename;
    }
  };
};

export const lastNameClass = lastname => BaseClass => {
  return class extends BaseClass {
    constructor(args) {
      super(args);
      this.lastname = lastname;
    }
  };
};

Here is firstNameClass, which will be extended directly by the parent class, Person:

class firstNameClass {
  constructor(args) {
    this.firstname = args;
  }
}

This is Person, which extends firstNameClass:

class Person extends firstNameClass {
  constructor(args) {
    super(args);
    this.getNames = this.getNames.bind(this);

    // I'm using to log class properties to the console
    this.getNames();
  }

  getNames() {
    console.log("this inside getNames(): ", this);
    console.log("firstnames inside getNames(): ", this.firstname);
    console.log("middlenames inside getNames(): ", this.middlename);
    console.log("lastnames inside getNames(): ", this.lastname);
  }
}

and finally, here is where I apply my higher order functions and create my class:

const enhancedClass = compose(
  middleNameClass("Allan"),
  lastNameClass("Poe")
)(Person);

const namedPerson = new enhancedClass("Edgar");

However, I see the following when I check my console.log:

this.firstnames inside getNames(): Edgar
this.middlenames inside getNames(): undefined
this.lastnames inside getNames(): undefined

Could someone explain what I'm doing wrong?

EDIT: Here are the contents of my Person class:

and here is what is output to the console, after I create the class:

解决方案

At new enhancedClass('Edgar'), this happens:

• lastNameClass's constructor calls super
• middleNameClass's constructor calls super
• Person's constructor calls super
• firstNameClass does this.firstName = 'Edgar'
• Return to Person, which calls getNames
• Return to middleNameClass, which does this.middleName = 'Allan'
• Return to lastNameClass, which does this.lastName = 'Poe'

Calling getNames afterwards should work. Same thing would've happened if you used extend every time.

这篇关于为什么高阶函数隐藏我的ES6类属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！