构造函数中赋值this报错：Invalid left-hand side in assignment

问题场景 #

我尝试创建游戏玩家对象，最初的写法如下：

let player = game.add.sprite(100, 100, 'player');
player.speed = 4;
player.gravity = 1;

随后改写为构造函数形式时，触发语法错误：

let player = new Player(100, 100);

function Player(x, y) {
  this = game.add.sprite(x, y, 'player');
  this.speed = 4;
  this.gravity = 1;
}

报错信息：Uncaught SyntaxError: Invalid left-hand side in assignment

原因 #

在JavaScript的构造函数中，this是由new关键字自动生成的对象引用，语法上不允许直接给this赋值，这是语言本身的限制。

解决方法 #

方法1：用Object.assign合并自定义属性 #

直接将自定义属性合并到game.add.sprite返回的精灵对象上，构造函数最终返回该对象即可：

function Player(x, y) {
  const sprite = game.add.sprite(x, y, 'player');
  Object.assign(sprite, {
    speed: 4,
    gravity: 1
  });
  return sprite;
}

// 使用方式不变
let player = new Player(100, 100);

注：这种写法下，即使不用new关键字调用Player函数，也能正常生成玩家对象。

方法2：ES6类继承Sprite（推荐引擎适配场景） #

如果项目支持ES6+语法，可以让Player类直接继承游戏引擎的Sprite类，这样this会正确指向Sprite实例：

class Player extends game.add.sprite.constructor {
  constructor(x, y) {
    // 调用父类构造函数创建Sprite实例
    super(x, y, 'player');
    // 添加自定义属性
    this.speed = 4;
    this.gravity = 1;
    // 部分引擎需要手动将实例添加到场景中
    game.add.existing(this);
  }
}

let player = new Player(100, 100);

方法3：使用工厂函数（最简洁） #

放弃构造函数，直接用普通函数封装玩家对象的创建逻辑：

function createPlayer(x, y) {
  const player = game.add.sprite(x, y, 'player');
  player.speed = 4;
  player.gravity = 1;
  return player;
}

// 调用生成玩家对象
let player = createPlayer(100, 100);

内容的提问来源于stack exchange，提问作者coolidenticon