Question

我有一个项目，该项目的组件可以从另一个文件导入匿名函数。

import ball from './ball';
export default class Canvas extends Component {
  constructor(props){
      super(props);
      this.state = {...}
      this.context = {...};
  }
_ball = ball();
_player(){...}
}

（'...'=删除代码以简化问题）

这是导入功能的代码段：

export default () => {
  console.log(this);
  const context = this.context;
  const player = this.player();
  return {...}
}

问题在于'this'不引用Canvas对象。 console.log(this)返回undefinded。

如何在不内联函数的情况下解决此问题？

Answer 1

将类的上下文分配给ball时，需要将类的上下文_ball分配给// inline but could be an import/export function ball () { console.log('in ball', this) } class Foo { constructor() { this.bar = 'hello' this.context = 'I am context' this._ball = ball.bind(this) this.callBallSomewhereElse() } callBallSomewhereElse () { this._ball() } } new Foo()

这里是一个例子。

ball

或者考虑将参数传递给球形ball导入，而不是依赖于传递给Function的整个上下文。我不了解您的最终游戏逻辑，但请尝试使功能尽可能地哑巴，例如，通过传递this特定参数而不是绑定整个上下文对象（ball）来保持{{1 }}功能苗条，并且通过不将_ball分配给ball等来保持苗条。

// inline but could be an import/export
function ball (context, bar) {
  console.log('in ball', context, bar)
}

class Foo {
  constructor() {
    this.bar = 'hello'
    this.context = 'I am context'
    
    this.callBallSomewhereElse()
  }
  
  callBallSomewhereElse () {
    ball(this.context, this.bar)
  }
}

new Foo()

Answer 2

由于您要导入的功能是箭头功能，因此该功能中的this将始终指向定义该功能的上下文。您甚至无法在Canvas类中重新绑定箭头功能，因为我们无法重新绑定箭头功能。

您需要做两件事，以访问导入功能中的this对象，访问Canvas。

1：使用功能关键字将要导入的箭头功能更改为普通的js功能：

    export default function(){
    ...
    }

2：您要使用_ball函数初始化ball()的Canvas类中的行，请使用JavaScript call方法将this的Canvas类提供给{{1 }}函数。

ball()

call（）方法用于以提供的任何_ball = ball.call(this);作为参数来调用函数，即

进行这两项更改将使您的工作变得更加轻松，并且导入功能中的this将引用Canvas对象。

Answer 3

Call HDEVNOTIFY RegisterDeviceNotification(HANDLE hRecipient, LPVOID NotificationFilter,DWORD Flags);应该是具有动态上下文的常规函数：

ball

应在正确的上下文中调用它：

export default function () {
  const context = this.context;
  const player = this.player();
  return {...}
}

这不是传统的方式，它需要export default class Canvas extends Component { ball = ball.call(this); ... }知道它所使用的上下文。

通过类实现此目的的一种更常见的方法是使用带有mixin的装饰器：

ball

其用法类似于：

const extendWithBallOrElse = (keyName = 'ball') => Class => class extends Class {
  constructor(...args) {
    super(...args);

    const context = this.context;
    const player = this.player();
    this[keyName] = ...;
};

或者：

@extendWithBallOrElse()
export default class Canvas extends Component {...}

导入函数中的对象引用

3 个答案: