javascript - `this` 引用在原型(prototype)链中丢失

Question

这相当广泛，但有趣且详细。

我使用原型(prototype)的标准 JavaScript 方式定义了两个“类”，如下所示:

来源

function Source() {
  this._sourceGuid = "";
  this._periodGuid = "";
  this._eventName = "";
  this._eventKind = 0;

  if (arguments.length > 0) {
    if (arguments[0].__proto__ === this.__proto__) {
      this.sourceGuid(arguments[0].sourceGuid());
      this.periodGuid(arguments[0].periodGuid());
      this.eventName(arguments[0].eventName());
      this.eventKind(arguments[0].eventKind());
    } else {
      this.sourceGuid(arguments[0].sourceGuid);
      this.periodGuid(arguments[0].periodGuid);
      this.eventName(arguments[0].eventName);
      this.eventKind(arguments[0].eventKind);
    }
  }
};

Source.prototype.sourceGuid = function (value) {
  if (arguments.length > 0) {
    this._sourceGuid = value
  } else {
    return this._sourceGuid;
  }
};

Source.prototype.periodGuid = function (value) {
  if (arguments.length > 0) {
    this._periodGuid = value
  } else {
    return this._periodGuid;
  }
};

Source.prototype.eventName = function (value) {
  if (arguments.length > 0) {
    this._eventName = value
  } else {
    return this._eventName;
  }
};

Source.prototype.eventKind = function (value) {
  if (arguments.length > 0) {
    this._eventKind = value
  } else {
    return this._eventKind;
  }
};

Source.prototype.toJSON = function() {
  return {
    sourceGuid: this.sourceGuid(),
    periodGuid: this.periodGuid(),
    eventName: this.eventName(),
    eventKind: this._eventKind()
  };
};

AnalogCamerasSource 扩展了 Source

function AnalogCamerasSource() {

  this.__proto__.apply(this, arguments);

  this._serverGuid = "";
  this._cameraId = 0;
  this._waitingTime = 0;

  if (arguments.length > 0) {
    if (arguments[0].__proto__ === this.__proto__) {
      this.serverGuid(arguments[0].serverGuid());
      this.cameraId(arguments[0].cameraId());
      this.waitingTime(arguments[0].waitingTime());
    } else {
      this.serverGuid(arguments[0].serverGuid);
      this.cameraId(arguments[0].cameraId);
      this.waitingTime(arguments[0].waitingTime);
    }
  }
};

AnalogCamerasSource.prototype = Source;

AnalogCamerasSource.prototype.serverGuid = function (value) {
  if (arguments.length > 0) {
    this._serverGuid = value
  } else {
    return this._serverGuid;
  }
};

AnalogCamerasSource.prototype.cameraId = function (value) {
  if (arguments.length > 0) {
    this._cameraId = value
  } else {
    return this._cameraId;
  }
};

AnalogCamerasSource.prototype.waitingTime = function (value) {
  if (arguments.length > 0) {
    this._waitingTime = value
  } else {
    return this._waitingTime;
  }
};

AnalogCamerasSource.prototype.toJSON = function() {
  var json = this.__proto__.toJSON();

  json.serverGuid = this.serverGuid();
  json.cameraId = this.cameraId();
  json.waitingTime = this.waitingTime();

  return json;
};

现在我需要一个 AnalogCamerasSource 实例，并且我正在尝试像这样简单地创建它:

var data = {"sourceGuid":"{05A00E05-F30D-497D-A272-156F135E1486}","periodGuid":"{8A071454-B473-4937-9C54-4899F866D7FA}","eventName":"signal-lost","eventKind":3,"serverGuid":"{9976B57D-486B-4BCA-8432-78D7C8EDB52B}","cameraId":4,"waitingTime":5};

var c = new AnalogCamerasSource(data);

现在，行 this.__proto__.apply(this,arguments); 负责调用父级的构造函数，看起来它应该做得很好，但目前它应该调用在父类的构造函数中调用父类的函数时，会抛出以下错误:

TypeError: this.sourceGuid is not a function
    at Function.Source (http://localhost:8081/js/app/events/model/0-Source.js:14:12)
    at AnalogCamerasSource (http://localhost:8081/js/app/events/model/AnalogCamerasSource.js:3:33)

现在，这是来自 Chrome 调试器的图片，显示属性在原型(prototype)链的下方，当像 this.__proto__.apply(this,参数) 来自 AnalogCamerasSource。

那么，为什么 this.sourceGuid 不是一个函数呢？我应该如何调用父级的构造函数才能使该链正常工作？

这是一个 fiddle :https://jsfiddle.net/98bp8pvh/

Answer 1

重构了您的代码(避免在代码中使用 __proto__)

function Source() {
  var args = arguments[0] || {};
  this._sourceGuid = args.sourceGuid || '';
  this._periodGuid = args.periodGuid || '';
  this._eventName = args.eventName || '';
  this._eventKind = args.eventKind || 0;
};

Source.prototype.sourceGuid = function(value) {
  if (arguments.length > 0) {
    this._sourceGuid = value || '';
  } else {
    return this._sourceGuid;
  }
};

Source.prototype.periodGuid = function(value) {
  if (arguments.length > 0) {
    this._periodGuid = value || '';
  } else {
    return this._periodGuid;
  }
};

Source.prototype.eventName = function(value) {
  if (arguments.length > 0) {
    this._eventName = value || '';
  } else {
    return this._eventName;
  }
};

Source.prototype.eventKind = function(value) {
  if (arguments.length > 0) {
    this._eventKind = value || 0;
  } else {
    return this._eventKind;
  }
};

Source.prototype.toJSON = function() {
  return {
    sourceGuid: this.sourceGuid(),
    periodGuid: this.periodGuid(),
    eventName: this.eventName(),
    eventKind: this.eventKind()
  };
};

function AnalogCamerasSource() {
  var args = arguments[0] || {};
  this._serverGuid = args.serverGuid || '';
  this._cameraId = args.cameraId || 0;
  this._waitingTime = args.waitingTime || 0;
  
  this.sourceGuid(args.sourceGuid);
  this.periodGuid(args.periodGuid);
  this.eventName(args.eventName);
  this.eventKind(args.eventKind);
};

AnalogCamerasSource.prototype = Object.create(Source.prototype);

AnalogCamerasSource.prototype.serverGuid = function(value) {
  if (arguments.length > 0) {
    this._serverGuid = value || '';
  } else {
    return this._serverGuid;
  }
};

AnalogCamerasSource.prototype.cameraId = function(value) {
  if (arguments.length > 0) {
    this._cameraId = value || 0;
  } else {
    return this._cameraId;
  }
};

AnalogCamerasSource.prototype.waitingTime = function(value) {
  if (arguments.length > 0) {
    this._waitingTime = value || 0;
  } else {
    return this._waitingTime;
  }
};

AnalogCamerasSource.prototype.toJSON = function() {
  var json = Source.prototype.toJSON.call(this);

  json.serverGuid = this.serverGuid();
  json.cameraId = this.cameraId();
  json.waitingTime = this.waitingTime();

  return json;
};

var data = {
  "sourceGuid": "{05A00E05-F30D-497D-A272-156F135E1486}",
  "periodGuid": "{8A071454-B473-4937-9C54-4899F866D7FA}",
  "eventName": "signal-lost",
  "eventKind": 3,
  "serverGuid": "{9976B57D-486B-4BCA-8432-78D7C8EDB52B}",
  "cameraId": 4,
  "waitingTime": 5
};

var c = new AnalogCamerasSource(data);
console.log(c);