Question

我正在使用我的JavaScript“类”的模块模式。声明我正在返回的类的var self outisde然后在类构造函数中将其设置为this是否有任何明显的缺点，以便我不必担心上下文切换时不想要它。在这个小例子中，它可能是不必要的，这只是一个例子。

示例：

    var Seat = (function() {
      var self = null;
      function Seat(startX, startY, inputSeatNumber, inputTableNumber) {
        self = this;
        self.radius = 10;
        self.x = startX; self.y = startY;
        self.seatNumber = inputSeatNumber;
        self.tableNumber = inputTableNumber;
      }

      Seat.prototype.moveTo = function(newX, newY) {
        if(newX >= 0 && newY >= 0) {
          self.x = newX; self.y = newY;
        }
      };

      return Seat;
    })();

编辑：添加了示例

var SeatingChartView = (function() {
  function SeatingChartView(canvas_id, seatingChartController, seatForm) {
    this.stage = new createjs.Stage(canvas_id);
    this.controller = seatingChartController;
    this.seatForm = seatForm;

    this.disableRightClick(canvas_id);
  }

  SeatingChartView.prototype.render = function() {
    this.stage.update();
  }

  SeatingChartView.prototype.addSeat = function(newSeat) {
    var newCircle = new createjs.Shape();
    newCircle.graphics.beginFill("black").drawCircle(0, 0, 10);
    newCircle.x = newSeat.x;
    newCircle.y = newSeat.y;
    newCircle.seat = newSeat;
    newCircle.on('click', function(event) {
      if(event.nativeEvent.button == 2) {
        this.seatForm.open(event.currentTarget.seat);
      }
    });
    newCircle.on('pressmove', this.controller.moveSeat)
    this.stage.addChild(newCircle);
  }

  SeatingChartView.prototype.removeSeat = function(seat) {
    this.stage.children.forEach(function(child) {
      if(child.seat === seat) {
        this.stage.removeChild(child);
      }
    });
  }

  SeatingChartView.prototype.setBackground = function(imageLocation) {
    this.background = new createjs.Bitmap(imageLocation);
    window.setTimeout(function() {
      this.stage.canvas.width = this.background.image.width;
      this.stage.canvas.height = this.background.image.height;
      this.stage.addChild(this.background);
      this.stage.update();
    }.bind(this), 500);
  }

  SeatingChartView.prototype.disableRightClick = function(canvas_id) {
    $(function() {
      $('#' + canvas_id).bind('contextmenu', function(e) {
        return false;
      });
    });
  }

return SeatingChartView;
})();

Answer 1

在这种情况下，Seat的每个新实例都将共享最新的Self对象，因为它是在构造函数中设置的。你应该避免这样做。

Answer 2

更实际的演示示例可能是这样的，您希望确保this是类的实例。

function Foo() {
    var _this = this;

    _this.someItem = {};

    _this.go = function() {
        doSomethingElse(function(result) {
            _this.someItem.something = result; // _this and this are different
        });
    };
};

function doSomethingElse(callback) {
    callback('asdf');
}

var foo = new Foo();
foo.go();

对于使用该模式的示例，您可以在每个方法中定义_this，如果它有任何好处（这个不会，但更复杂的例子可能）：

Seat.prototype.moveTo = function(newX, newY) {
    var _this = this;
    if(newX >= 0 && newY >= 0) {
        _this.x = newX; _this.y = newY;
    }
};

Answer 3

是的，通过这种方式，Seat的所有实例将具有相同的this，从而导致各地出现问题。只需删除var self，然后在您使用this的所有位置使用self。在你给出的代码中，没有必要丢失对this的引用。

（@添加示例）现在您的问题更有意义了。

您不必一次尝试为所有方法处理此问题，而是必须在使用具有不同this的函数的每个点处理它（任何不在原型或实例）。

如果您在回调中不需要this，我只需使用.bind使实例this可用。但请注意，某些（非常）旧版本的IE不支持.bind，因此您需要使用polyfil才能使用它，或者将this存储在var中。

  SeatingChartView.prototype.addSeat = function(newSeat) {
    var newCircle = new createjs.Shape();
    newCircle.graphics.beginFill("black").drawCircle(0, 0, 10);
    newCircle.x = newSeat.x;
    newCircle.y = newSeat.y;
    newCircle.seat = newSeat;
    newCircle.on('click', function(event) {
      if(event.nativeEvent.button == 2) {
        this.seatForm.open(event.currentTarget.seat);
      }
    }.bind(this)); // modified here, added `.bind(this)`
    newCircle.on('pressmove', this.controller.moveSeat)
    this.stage.addChild(newCircle);
  }

Answer 4

这完全否定了＆＃34;分类＆＃34;的目的。但在JS中，它被称为原型设计。

主要是你希望基础原型被复制＆＃34;在创建新实例时。在扩展时，应该保护基础原型免受变化。

假设您已完成所做的工作，Seat的所有实例都将具有相同的属性。更糟糕的是，在制作新的＆＃34;副本时，＃34; Seat的所有其他先前创建的副本将更改其值。

由于您希望this维持对Seat的引用，我建议您使用以下模式：

var Base = {
    init: function(arg) {
        this.name = arg;
    },
    getName: function() {
        return this.name;
    }
}
Base.init('foo');
Base.getName(); // returns 'foo'

您转换的代码：

var Seat = {
    init: function(startX, startY, inputSeatNumber, inputTableNumber) {
        this.radius = 10;
        this.x = startX; 
        this.y = startY;
        this.seatNumber = inputSeatNumber;
        this.tableNumber = inputTableNumber;
    },
    moveTo: function(newX, newY) {
        if (newX >= 0 && newY >= 0) {
            this.x = newX; this.y = newY;
        }
    },
    setBackground: function(imageLocation) {
        var self = this;
        this.background = new createjs.Bitmap(imageLocation);
        setTimeout(function() {
            self.stage.canvas.width = self.background.image.width;
            self.stage.canvas.height = self.background.image.height;
            self.stage.addChild(self.background);
            self.stage.update();
        }, 500);
    }
}

扩展原型：

var vipSeat = Object.create(Seat);
vipSeat.init( //your init values )

你也不能创建一个init方法，只需使用Object.create的第二个参数来为原型赋值初始值：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create#Example:_Using_propertiesObject_argument_with_Object.create

模块模式和这个

4 个答案: