Function.prototype on 方法没有通过 object 的 this

Question

First of all, sorry for my bad english.

I want to create a prototype for Function class like: ( delay is an example )

import { delay } from 'lodash';

export default function(
    this: (...args: any) => any,
    wait: number,
    ...params: [any]
  ): any {
  return delay(this, wait, ...params);
};

I've applied it and when I call it from a function it's work well:

console.log('render');
console.log.delay(1000, 'delayed render');

but when I call it from a method the this isn't pass:

class Test {
  constructor() {
    this.consoleLog('render');                      // Test {} render
    this.consoleLog.delay(1000, 'delayed render');  // undefined delayed render
  }
  consoleLog(text) {
    console.log(this, text);
  }
}

How can I pass the 'this' cleanly?

Answer 1

I don't believe the problem is your delay prototype, it's the context in which the console.log under the consoleLog method is being invoked.

If you define it like this, you'll see the context you want:

class Test {
  constructor() {
    this.consoleLog = this.consoleLog.bind(this);
    this.consoleLog('render');                      
    this.consoleLog.delay(1000, 'delayed render');
  }
  consoleLog(text) {
    console.log(this, text);
  }
}

I believe what's happening is that delay is being called on the context of consoleLog , and since delay is ultimately calling whatever this(params) is with no context (not being accessed via an object -- ie consoleLog('delayed render') instead of someObj.consoleLog('delayed render') ), thus undefined . I hope that makes sense.

To paint it using a pseudo stacktrace:

Normal execution context:
const test = new Test()
test.consoleLog('abc')
-> consoleLog gets called in the context of `test`
-> console.log thus displays `Test` as the object `this` is referring to

Delayed execution context:
const test = new Test()
-> delay gets called with consoleLog as `this`
-> this(params) gets executed (consolLog(params))
-> since consoleLog was not called ON an object (see test.consoleLog above)
its context is undefined in strict mode, thus `console.log(this, text)` will
show `undefined "delayed render"`