在Javascript（ES5）中尝试简单的OPP继承方法 [英] Trying simple approach to OPP inheritance in Javascript (ES5)

问题描述

为了好奇，我在Javascript中玩原型继承和OOP继承。大多数结果涉及使用函数模拟类和扩展概念，而其他人使用原型和构造函数。

Just for the sake of curiosity, I was playing with prototypal inheritance and OOP inheritance in Javascript. Most results involve emulating 'Class' and 'extends' concepts with functions, while others use the prototype and constructors.

我写了这段代码：

function Warrior(weaponName) {
    var weapon = weaponName;
    this.getWeapon = function() {
        return weapon;
    };
    this.setWeapon = function(value) {
        weapon = value;
    };
    this.displayInfo = function() {
        return {
            "weapon": this.getWeapon(),
        };
    };
}

function Archer() {
    var accuracy = "86%";
    this.parent = Archer.prototype; // Inheritance workaround
    this.getAccuracy = function() {
        return accuracy;
    };
    this.setAccuracy = function(value) {
        accuracy = value;
    };
    this.displayInfo = function() {
        var form = this.parent.displayInfo();
        form.accuracy = this.getAccuracy();
        return form;
    };
}
Archer.prototype = new Warrior("bow");
var w = new Warrior("sword");
var a = new Archer();
console.log(w.displayInfo());
console.log(a.displayInfo());

我这样做是为了在显示来自Warrior类的信息时，它将对象显示为

I made this so when displaying the information from the Warrior class, it shows the object as

{ weapon: "sword" }

当显示来自Archer的信息时，对象是：

And when the information from Archer is shown, the object is:

{ weapon: "sword", accuracy: "86%" }

子类从超类获取信息，加入它。从Archer调用getWeapon（）或setWeapon也有效。这个链条没有问题，即使我添加了第三类Kyudoka，它扩展了Archer并拥有它自己的属性。

The "subclass" is taking information from the "superclass" and adding to it. Calling "getWeapon()" or "setWeapon" from Archer also works. The chain goes on without problems, even when I add a third class "Kyudoka" that extends "Archer" and has it's own properties as well.

但是与更多我在研究过程中发现的复杂代码，我觉得这可能是一个天真的实现（继承解决方法行），我错过了一些东西（考虑到JS有很多细微之处）。

But comparing to the more complex code I found while researching, I feel this could be a naive implementation (the "Inheritance workaround" line) and I'm missing something (considering that JS has a lot of subtlety).

这是一个理论问题，我没有在任何系统中使用此代码。

This is a theorical question, I'm not using this code in any system.

推荐答案

主要有 javascript 中的3种继承，根据书 Javascript好的部分： Pseudoclassical ， Prototypal 和功能性。

There are mainly 3 kinds of inheritance in javascript, according to the book Javascript the Good Parts: Pseudoclassical, Prototypal and Functional.

您刚刚发布的那个适合 Pseudoclassical 继承，您可以使用构造函数模拟Class行为。

The one you just posted would fit under the Pseudoclassical inheritance, where you emulate a Class behaviour using constructor functions.

我发现功能模式更有用，更灵活h允许你保护你的变量（让它们变成私有的）。

I find more useful and flexible the Functional pattern, which allows you to protect your variables (make them private).

var constructor = function (spec, my) {
  var that, other private instance variables;
  my = my || {};
  //Add shared variables and functions to my
  that = a new object;
  //Add privileged methods to that
  return that;
}

Prototypal 基本上是让您的对象直接从其他有用的对象，就像将它们（有用的对象）作为新的对象构造函数原型一样。

Prototypal is basically having your objects inherit directly from other useful object, which would be something like having them (the useful objects) as your new object constructor prototype.

Object.beget = function (o) {
  var F = function () {};
  F.prototype = o;
  return new F();
};

var a = {}
//Add shared variables to a
var b = Object.beget(a);
//Add new methods to b

这是对每种模式的许多考虑因素，例如，Crockford在他的书中提到功能模式具有很大的灵活性。它比伪经典模式需要更少的工作量，
并且为我们提供了更好的封装和信息隐藏以及对超级方法的访问。 / em>，但我也看到过相反的文章，比如这个 http：// bolinfest .com / javascript / inheritance.php

That are many considerations to each of the patterns, for instance Crockford says in his book "The functional pattern has a great deal of flexibility. It requires less effort than the pseudoclassical pattern, and gives us better encapsulation and information hiding and access to super methods.", but I've also seen articles arguing the other way around, such as this http://bolinfest.com/javascript/inheritance.php

编辑------

In如果您想知道达到超级方法的不同方法，可以在功能模式中执行以下操作：

In case you might want to know different aproaches to reaching super methods, in the Functional pattern you can do the following:

Function.prototype.method = function (name, func) {
  this.prototype[name] = func;
  return this;
};

Object.method('superior', function (name) {
  var that = this,
  method = that[name];
  return function ( ) {
    return method.apply(that, arguments);
  };
});

var archer = function (spec, accuracy) {
  var that = warrior(spec),
  super_displayInfo = that.superior('displayInfo');
  that.getAccuracy = function() {
    return accuracy;
  };
  that.setAccuracy = function(value) {
    accuracy = value;
  };
  that.displayInfo = function (n) {
    var form = super_displayInfo()
    form.accuracy = that.getAccuracy();
    return form;
  };
  return that;
};

这篇关于在Javascript（ES5）中尝试简单的OPP继承方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！