javascript - 如何重用函数属性？

Question

我想做如下的事情：

function StatusBox() {
    this.connectionStatus = $("#connectionStatus");
}

StatusBox.nosupport = function(type) {
    StatusBox.connectionStatus.html('<span style="color: red;">' + NO_SUPPORT + '</span>');
};

StatusBox.error = function(type) {
    StatusBox.connectionStatus.html('<span style="color: red;">' + ERROR + '</span>');
};

但我没被抓住TypeError: Cannot read property 'html' of undefined

如何在子函数中重用$("#connectionStatus")？

标签： javascriptfunctionthis

Answer 1

从我可以看到你所追求的设计模式是这样的：

function StatusBox() {
    this.connectionStatus = $("#connectionStatus");
}

StatusBox.prototype.nosupport = function(type) {
    this.connectionStatus.html('<span style="color: red;">' + NO_SUPPORT + '</span>');
};

StatusBox.prototype.error = function(type) {
    this.connectionStatus.html('<span style="color: red;">' + ERROR + '</span>');
};

let statusBox = new StatusBox();
statusBox.nosupport();
statusBox.error();

但你也可以这样做：

function StatusBox() { }

StatusBox.getConnectionStatus = function() {
    StatusBox.connectionStatus = $("#connectionStatus");
};

StatusBox.nosupport = function(type) {
    StatusBox.connectionStatus.html('<span style="color: red;">' + NO_SUPPORT + '</span>');
};

StatusBox.error = function(type) {
    StatusBox.connectionStatus.html('<span style="color: red;">' + ERROR + '</span>');
};

StatusBox.getConnectionStatus();
StatusBox.nosupport();
StatusBox.error();

这有点多余，因为一个简单的对象将完成相同的任务：

const StatusBox = {
   getConnectionStatus: function() {
      StatusBox.connectionStatus = $("#connectionStatus");
   },
   nosupport: function(type) {
      StatusBox.connectionStatus.html('<span style="color: red;">' + NO_SUPPORT + '</span>');
   }
   error: function(type) {
      StatusBox.connectionStatus.html('<span style="color: red;">' + ERROR + '</span>');
   }
};

StatusBox.getConnectionStatus();
StatusBox.nosupport();
StatusBox.error();