this 指的是它所属的类，而不是调用实例的类

Question

class ElPush {
  pushElement(type) {
    document
      .querySelector(`#${type}-projects`)
      .querySelectorAll("li")
      .forEach((el) => {
        this.itemLog.push(el);
      });
  }
}

我想使用 ElPush 类将元素推送到 itemLog 数组中，该数组存在于下面给出的 ActiveItem 类中

class ActiveItem {
  constructor() {
    this.itemLog = [];
    const elPush = new ElPush();
    elPush.pushElement("active");

    console.log(this.itemLog);
  }
}
class FinishedItem {
  constructor() {
    this.itemLog = [];
    const elPush = new ElPush();
    elPush.pushElement("finished");

    console.log(this.itemLog);
  }
}
class App {
  static init() {
    const activeList = new ActiveItem();
  }
}
App.init();

ElPush 中的 this.itemLog.push(el); 行抛出错误 Cannot read property 'push' of undefined

我知道这不是一个实用的解决方案，但我只是在练习 opp 概念，并且非常希望提供任何解决方案

Answer 1

// - still class based for being recognizable to the OP.
// - the query part should be refactored
//   as simple helper/utility function.
//
class ProjectItemQuery {
  query(type) {
    return Array.from(document
      .querySelector(`#${ type }-projects`)
      .querySelectorAll("li")
    );
  }
}

// refactored query helper.
function queryProjectItems(type) {
  return Array.from(document
    .querySelector(`#${ type }-projects`)
    .querySelectorAll("li")
  );
}

class ActiveItems {
  constructor() {
    const itemQuery = new ProjectItemQuery;

    this.list = itemQuery.query("active");
  //this.list = queryProjectItems("active");

    console.log('ActiveItems :: list : ', this.list);
  }
}

class FinishedItems {
  constructor() {
    this.list = queryProjectItems("finished");

    console.log('FinishedItems :: list : ', this.list);
  }
}

class App {
  static init() {
    const activeItemList = (new ActiveItems).list;
    const finishedItemList = (new FinishedItems).list;

    console.log('App :: init :: activeItemList : ', activeItemList);
    console.log('App :: init :: finishedItemList : ', finishedItemList);
  }
}
App.init();

.as-console-wrapper { min-height: 100%!important; top: 0; }

<ul id='active-projects'>
  <li>foo</li>
  <li>bar</li>
</ul>

<ul id='finished-projects'>
  <li>baz</li>
  <li>biz</li>
</ul>

编辑

问

• abhinay khalatkar

我已经采用了这种返回方法，但我想知道的是，如果上述方式可行吗？我的意思是是否可以从不同的类 (b) 更改类 (a) 的属性如果在此类（a）中实例化类（b），则使用“bind（）”和“this”？我不想要一种解决方法，而是一种直接的方法来做到这一点。如果不是，我将采用这种方式。感谢 A2A。

一个

• 彼得·塞利格

当然可以......甚至有很多方法可以完成这项任务。但是为什么要在设计中增加更多的复杂性（这里......不太好阅读，更容易搞砸，因此更容易出错）而不是保持它的简洁和轻量级？

将上面给出的示例代码与接下来提供的示例代码进行比较。前者发生的事情比现在发生的事情更具可读性/清晰/可理解性......

// - a less favourable, function based, mixin approach
//
function ProjectItemQueryMixin() {
  if (!Array.isArray(this.list)) {
    this.list = [];
  } 
  this.queryAndPush = function (type) {
    document
      .querySelector(`#${ type }-projects`)
      .querySelectorAll("li")
      .forEach(elm => this.list.push(elm));
  }
}

class ActiveItems {
  constructor() {
    // this.list = [];

    // - Applying the mixin based `query` 
    //   method directly to an instance
    //   is the less favourable way.
    ProjectItemQueryMixin.call(this);

    this.queryAndPush("active");

    console.log('ActiveItems :: list : ', this.list);
  }
}

class FinishedItems {
  constructor() {
    // this.list = [];

    this.queryAndPush("finished");

    console.log('FinishedItems :: list : ', this.list);
  }
}
ProjectItemQueryMixin.call(FinishedItems.prototype);
// - Applying the mixin based `query` method to the
//   prototype was the choice for everyone that is
//   concerned about design and memory usage.
// - A lot of developers will find this confusing as well.

class App {
  static init() {
    const activeItemList = (new ActiveItems).list;
    const finishedItemList = (new FinishedItems).list;

    console.log('App :: init :: activeItemList : ', activeItemList);
    console.log('App :: init :: finishedItemList : ', finishedItemList);
  }
}
App.init();

.as-console-wrapper { min-height: 100%!important; top: 0; }

<ul id='active-projects'>
  <li>foo</li>
  <li>bar</li>
</ul>

<ul id='finished-projects'>
  <li>baz</li>
  <li>biz</li>
</ul>

第三次迭代，这次尽可能接近 OP 的代码

// ... Again, one does not need a class instance for this task.
//
// A simple function/method with `this` context called
// `queryAndPushProjectItems(type)` would already solve
// the OP's problem.
//
class ProjectItemQuery {
  queryAndPush(type) {
    document
      .querySelector(`#${ type }-projects`)
      .querySelectorAll("li")
      .forEach(elm => this.list.push(elm));
  }
}

class ProjectItems {
  // - The constructor's `type` argument prevents
  //   copying over and over the same item class
  //   related code that just differs in how items
  //   are going to be queried.
  constructor(type) {
    this.list = [];

    const itemQuery = new ProjectItemQuery;

    // - This code block answers th OP's question.
    // - Call `queryAndPush` of the above created
    //   `ProjectItemQuery` instance within the
    //   `this` context of any `ProjectItems`
    //   instance.
    // - Of course this is not a desirable design.
    itemQuery.queryAndPush.call(this, type);
    // - or ...
    // `queryAndPushProjectItems.call(this, type);`

    console.log('ProjectItems :: type, list : ', type, this.list);
  }
}

class App {
  static init() {
    const activeItems = new ProjectItems('active');
    const finishedItems = new ProjectItems('finished');

    console.log('App :: init :: activeItems.list : ', activeItems.list);
    console.log('App :: init :: finishedItems.list : ', finishedItems.list);
  }
}
App.init();

.as-console-wrapper { min-height: 100%!important; top: 0; }

<ul id='active-projects'>
  <li>foo</li>
  <li>bar</li>
</ul>

<ul id='finished-projects'>
  <li>baz</li>
  <li>biz</li>
</ul>