如何实现寄生继承以避免嵌套

Question

​

​

我想遵循上面所示的继承结构。我希望使用以下语法创建一个工程师：

var Mark = new Employee(id).WorkerBee(project).Engineer();

要实现这个语法，我必须按照寄生继承模式创建一个嵌套对象，如下所示：

    function Employee(id) {
      this.id = id;

      this.WorkerBee = function(project) {
        this.project = project;

        this.Engineer = function() {
          ...
          return this;
        };

        return this;
      };
    }

为了避免深层嵌套，我尝试用原型重写它。如何重写代码以实现与上述相同的目标？

​

      function Employee(id) {
        //variables
        this.id = id
        this.name = "";
        this.dept = "general";

        //methods
        this.getId = function() {
          return this.id
        }
      }
    Employee.prototype.WorkerBee = WorkerBee;

    function WorkerBee(project) {
      //variables
      this.projectName = project
      this.projects = [];
      //methods
      this.getProjectName = function() {
        return this.projectName
      }
      return this
    }
    WorkerBee.prototype.Engineer = Engineer

    function Engineer() {
      //variables
      this.dept = "engineering";
      this.machine = "";
      //methods
      this.getDept = function() {
        return this.dept
      }
      return this
    }

    var Mark = new Employee("5").WorkerBee("Secret Project").Engineer();
    console.log(Mark.getId()) //should print "5"
    console.log(Mark.getProjectName()) //should print "Secret Project"
    console.log(Mark.getDept()) //should print engineering

​

Answer 1

根据这些注释，您似乎相信必须使用这种奇怪的详细机制才能在雇员<- WorkerBee <- Engineer (等等)之间进行继承，但您不需要这样做；只有正常继承才能做到这一点：

​

// ==== Employee
function Employee(id) {
    this.id = id;
}
// Add Employee methods to Employee.prototype, e.g.:
Employee.prototype.getId = function() {
    return this.id;
};

// ==== WorkerBee, derived from Employee
function WorkerBee(id, project) {
    // Inheritance, part 1: Chain to the base constructor
    Employee.call(this, id);

    // WorkerBee stuff
    this.project = project;
}

// Inheritance, part 2: Create the object to use for WorkerBee
// instance prototypes, using Employee.prototype as its prototype.
WorkerBee.prototype = Object.create(Employee.prototype);
WorkerBee.prototype.constructor = WorkerBee;

// Add WorkerBee methods to WorkerBee.prototype, e.g.:
WorkerBee.prototype.getProjectName = function() {
    return this.project;
};

// ==== Engineer, derived from WorkerBee
function Engineer(id, project) {
    // Inheritance, part 1: Chain to the base constructor
    WorkerBee.call(this, id, project);
}

// Inheritance, part 2: Create the object to use for Engineer
// instance prototypes, using WorkerBee.prototype as its prototype.
Engineer.prototype = Object.create(WorkerBee.prototype);
Engineer.prototype.constructor = Engineer;

// Add Engineer methods to Engineer.prototype, e.g.:
Engineer.prototype.getDept = function() {
    return "Engineering";
};

// ==== Usage
var mark = new Engineer("5", "Secret Project");
snippet.log(mark.getId());          // "5"
snippet.log(mark.getProjectName()); // "Secret Project"
snippet.log(mark.getDept());        // "Engineering"

<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

​

这是使用JavaScript中的构造函数进行原型继承的标准方法(就目前而言，在ES6中，您可以使用新的class特性，它做的基本相同，带有一些语法糖)。只需添加Manager (从Employee派生)和SalesPerson (从WorkerBee派生)。

在旧浏览器上，您可能需要对Object.create进行部分填充，如下所示：

if (!Object.create) {
    Object.create = function(proto, props) {
        if (typeof props !== "undefined") {
            throw "The two-argument version of Object.create cannot be polyfilled.";
        }
        function ctor() { }
        ctor.prototype = proto;
        return new ctor();
    };
}

有用于将ES6源代码与class一起使用并将其转换为ES5代码的转播器。还有我的Lineage脚本，它使继承更少冗长。