javascript - 如何处理 fn.call(this) 替换原来的 this

Question

首先，我有一个用于管理员工的应用程序。当用户创建应用程序的新实例时，我希望他们可以选择提交一个函数，该函数将在应用程序中的其他任何操作之前运行。问题是我需要在该函数的末尾添加功能，因此我需要将其传递回应用程序。

但是，如果我在 StateManager.js 类中使用 fn.call(this)，它就会覆盖状态管理器的 this并摆脱了 StateManager 的功能。返回的确切错误是 Uncaught TypeError: this.onPreload is not a function

本质上，当创建一个新实例时，我想获取用户的 preload 函数并将其传递给 StateManager.js 进行调整。

这里是演示代码:

class Application {

  constructor(options = {}) {
    return new User(options);
  }
}

class User {

  constructor(options) {
    this._options = options;
    this.state = new StateManager(this);
    this.job = new Job(this);
    this.init();
  }

  init() {
    this.state.onPreload = this._options.preload;
    this.state.preload.call(this);
  }
}

class Job {

  constructor(user) {
    this.user = user;
  }

  changeTitle(title) {
    this.user.jobTitle = title;
  }
}

class StateManager {

  constructor(user) {
    this.user = user;
    this.onPreload = null;
  }

  preload() {
    this.onPreload();
  }
}

const options = {
  preload: preload
};

const app = new Application(options);

function preload() {
  app.job.changeTitle('CEO');
}

index.js

import { Application } from './Application.js';

const options = {
    preload: preload
};

const app = new Application(options);

function preload() {
    // Access some irrelevant function in job that sets a new value
    app.job.changeTitle('CEO');
}

app.js

import { User } from './User.js';

export class Application {
    constructor(options = {}) {
        return new User(options);
    }
}

user.js

import { StateManager } from './StateManager.js';
import { Job } from './Job.js';

export class User {
    constructor(options = {}) {
        this._options = options;
        this.state = new StateManager(this);
        this.job = new Job(this);

        this.init();
    }

    init() {
        this.state.onPreload = this._options.preload;
        this.state.preload.call(this);
    }
}

statemanager.js

export class StateManager {
    constructor(user) {
        this.user = user;
        this.onPreload = null;
    }

    preload() {
        this.onPreload();

        // My custom functionality to add at the end.
    }
}

Answer 1

preload() 引用了全局变量 app，但它是在用于初始化 app 的函数中调用的。它需要接收正在初始化的User对象，而不是引用全局变量。

使用 this.state.onPreload = this._options.preload.bind(this); 将 preload 函数的上下文绑定(bind)到该对象。

您还可以更改 StateManager.preload() 以使用 this.onPreload.call(this.user);。但这可能会产生不适当的依赖关系，该依赖关系并不适用于所有情况。如果我更好地理解所有的关系，我也许能够更好地做出决定。

class Application {

  constructor(options = {}) {
    return new User(options);
  }
}

class User {

  constructor(options) {
    this._options = options;
    this.state = new StateManager(this);
    this.job = new Job(this);
    this.init();
  }

  init() {
    this.state.onPreload = this._options.preload.bind(this);
    this.state.preload();
  }
}

class Job {

  constructor(user) {
    this.user = user;
  }

  changeTitle(title) {
    this.user.jobTitle = title;
  }
}

class StateManager {

  constructor(user) {
    this.user = user;
    this.onPreload = null;
  }

  preload() {
    this.onPreload();
  }
}

const options = {
  preload: preload
};

const app = new Application(options);
console.log(app.jobTitle);

function preload() {
  this.job.changeTitle('CEO');
}