JavaScript 中的真正继承答案

【问题标题】：Real inheritance in JavaScriptJavaScript 中的真正继承
【发布时间】：2020-12-14 10:30:19
【问题描述】：

我尝试在两个 AngularJS 服务和一个通用服务之间实现原型继承，但这似乎不足以满足我的需求。

我制作了ChildService、SecondChildService 和ParentService。

ChildService 通过原型继承扩展 ParentService
SecondChildService 通过原型继承扩展 ParentService

ParentService 有一个方法让我们称之为logIt() 记录属性it

ChildService 实现了自己的it 版本
SecondChildService 实现了自己的it 版本

现在我将ParentService 视为“基类”，并且我在ParentService 中有一个调用logIt() 的方法，即initialize()。这仅在ParentService中实现

我需要运行ChildService.initialize() 并看到ChildService 的it 被记录。与SecondChildService 相同。

而ParentService 记录了它自己的it 版本。我相信原型继承的原因是组合实现而不是真正的继承

您能否提出一个解决方法？

编辑：

这是我的父服务

angular.module('common').service('parentService', ParentService);
ParentService.$inject = [];

/* @ngInject */
function ParentService() {
  'use strict';
  var vm = this;
  vm.it = "parent";

  vm.initialize = function () {
    vm.logIt();
  };

  vm.logIt = function () {
    console.log(this.it);
  };
}

这是我的儿童服务

angular.module('common').service('childService', ChildService);
ChildService.$inject = ['parentService'];

/* @ngInject */
function ChildService(parentService) {
  'use strict';
  var vm = this;
  angular.extend(this, parentService);
  vm.it = "child";
}

这就是我运行childService.initialize()时在日志中得到的内容

parent

我希望得到child

【问题讨论】：

如果您包含重现问题的代码会很有帮助。
我认为你误解了angular.extend 的作用。在 Javascript 中，原型设置为 Object.setPrototypeOf 而不是 angular.extend。这就是 class B extends A 在后台使用的内容。

标签： javascript composition prototypal-inheritance

【解决方案1】：

我无法重现您的问题。在以下示例中，继承似乎可以正常工作：

class Main {
    do_it() {
        console.log("Main do_it");
        this.it();
    }
    it() {
        console.log("Main it executed");
    }
}

class A extends Main {
    it() {
        console.log("A it executed");
    }
}

var a = new A;
a.do_it();
console.log("Done");

Main 类中定义的do_it 方法正确调用了覆盖父类it 方法的扩展类的it 方法。

【讨论】：

【解决方案2】：

问题出在ParentService。我正在使用vm.logIt，而我应该使用this.logIt 以便从子服务范围获取it。与标准继承相反，似乎在原型继承中logIt() 函数存在两次，一次在ParentService 中，一次在ChildService 中（从父级继承）。使用this.logIt()，您可以从孩子那里调用它，它实际上从孩子那里获得it，而使用vm.logIt()，您可以从父母那里调用它，从那里获得it。这是范围的问题。

这是ParentService的正确实现：

angular.module('common').service('parentService', ParentService);
ParentService.$inject = [];

/* @ngInject */
function ParentService() {
  'use strict';
  var vm = this;
  vm.it = "parent";

  vm.initialize = function () {
    this.logIt(); // <-- this changed
  };

  vm.logIt = function () {
    console.log(this.it);
  };
}

【讨论】：