javascript対象継承の詳細とreactの対象継承の原理

まとめ「javascript高級プログラム設計」第六章は対象継承に関する内容があります.この文章を読む前に、jsの対象を見て詳しく説明します.OO言語の継承には2つの形態があり、インターフェースの継承と継承が実現され、jsでは継承のみがサポートされています.
オブジェクト継承の6つの方法
1.プロトタイプチェーン

function SuperType() {
    this.property = true;
}

SuperType.prototype.getSuperValue = function () {
    return this.property;
};

function SubType() {
    this.subproperty = false;
}

//inherit from SuperType
SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function () {
    return this.subproperty;
};

var instance = new SubType();
alert(instance.getSuperValue());   //true

alert(instance instanceof Object);      //true
alert(instance instanceof SuperType);   //true
alert(instance instanceof SubType);     //true

alert(Object.prototype.isPrototypeOf(instance));    //true
alert(SuperType.prototype.isPrototypeOf(instance)); //true
alert(SubType.prototype.isPrototypeOf(instance));   //true

プロトタイプチェーンはjsの継承を実現する主な方法である.その基本的な考え方は、原型を利用して、一つの引用タイプに別の引用タイプの属性と方法を継承させることです.一般的な場合の継承は解決されますが、オブジェクトが作成されたように、この継承された参照タイプの値はすべてのインスタンスで共有されます.実際の応用ではプロトタイプ鎖を単独で使うことは少ない.2.構造関数を借りる(偽造関数または古典継承ともいう)

function SuperType() {
    this.colors = ["red", "blue", "green"];
}

function SubType() {
    //  SuperType
    SuperType.call(this);
}

//inherit from SuperType
SubType.prototype = new SuperType();

var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors);    //"red,blue,green,black"

var instance2 = new SubType();
alert(instance2.colors);    //"red,blue,green"

プロトタイプチェーン法が参照型の値を共有するという問題は解消されましたが、構造関数モードに存在する問題――方法はすべて構造関数内で定義され、関数を多重化することができなくなりました.
3.コンビネーション継承(偽経典継承ともいう)

function SuperType(name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}

SuperType.prototype.sayName = function () {
    alert(this.name);
};

function SubType(name, age) {
    SuperType.call(this, name);

    this.age = age;
}

//inherit from SuperType
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function(){
    alert(this.age);
}

var instance1 = new SubType('Nicholas', 29);
instance1.colors.push('black');
alert(instance1.colors);           //"red,blue,green,black"
instance1.sayName();               //'Nicholas'
instance1.sayAge();                //29

var instance2 = new SubType('Greg',27);
alert(instance2.colors);           //"red,blue,green"
instance2.sayName();               //'Greg'
instance2.sayAge();                //27

関数が共有できない問題を解決します.属性は構造関数、関数はプロトタイプで継承されます.jsで最もよく使われる継承モードとなります.4.原型式継承

function object(o) {
    function F() { }
    F.prototype = o;
    return new F();
}

var person = {
    name: "Nicholas",
    friends: ["Shelby", "Court", "Van"]
};

var anotherPerson = object(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");

var yetAnotherPerson = object(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");

alert(person.friends);   //"Shelby,Court,Van,Rob,Barbie"

ES 5にObject.create()を追加し、この方法を代替します.
5.寄生式継承

function createAnother(o) {
    var clone = object(o);
    clone.sayHi = function() {
        alert('hi');
    }
    return clone;
}

var person = {
    name: 'Nicholas',
    friends: ['Shelby', 'Court', 'Van']
};

var anotherPerson = createAnother(person);
anotherPerson.sayHi();//'Hi'

寄生構造関数と工場モードは似ている.主に対象を考慮してカスタムタイプやコンストラクタではなく,寄生型継承は有用なモードである.
6.寄生結合式継承

function inheritPrototype(subType, superType){
    var prototype = Object(superType.prototype);
    prototype.constructor = subType;
    subType.property = prototype;
}

function SuperType(name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}

SuperType.prototype.sayName = function () {
    alert(this.name);
};

function SubType(name, age) {
    SuperType.call(this, name);

    this.age = age;
}

inheritPrototype(SubType, SuperType);

SubType.prototype.sayAge = function () {
    alert(this.age);
}

は、引用タイプの最も理想的な継承モデルです.
では、私たちがよく知っているreactはどのような形で継承されているのかを見てみましょう.引き継ぎを実施する例:

var CommentBox = React.createClass({
  render: function() {
    return (
      

        Hello, world! I am a CommentBox.
      
    );
  }
});

私たちは伝来したのがオブジェクトであることを観測することができます.私たちは引き続きReact.create Classという方法を探しています.

createClass: function (spec) {
  var Constructor = function (props, context, updater) {
    // This constructor gets overridden by mocks. The argument is used
    // by mocks to assert on what gets mounted.

    if (process.env.NODE_ENV !== 'production') {
      process.env.NODE_ENV !== 'production' ? warning(this instanceof Constructor, 'Something is calling a React component directly. Use a factory or ' + 'JSX instead. See: https://fb.me/react-legacyfactory') : void 0;
    }

    // Wire up auto-binding
    if (this.__reactAutoBindPairs.length) {
      bindAutoBindMethods(this);
    }

    this.props = props;
    this.context = context;
    this.refs = emptyObject;
    this.updater = updater || ReactNoopUpdateQueue;

    this.state = null;

    // ReactClasses doesn't have constructors. Instead, they use the
    // getInitialState and componentWillMount methods for initialization.

    var initialState = this.getInitialState ? this.getInitialState() : null;
    if (process.env.NODE_ENV !== 'production') {
      // We allow auto-mocks to proceed as if they're returning null.
      if (initialState === undefined && this.getInitialState._isMockFunction) {
        // This is probably bad practice. Consider warning here and
        // deprecating this convenience.
        initialState = null;
      }
    }
    !(typeof initialState === 'object' && !Array.isArray(initialState)) ? process.env.NODE_ENV !== 'production' ? invariant(false, '%s.getInitialState(): must return an object or null', Constructor.displayName || 'ReactCompositeComponent') : _prodInvariant('82', Constructor.displayName || 'ReactCompositeComponent') : void 0;

    this.state = initialState;
  };
  Constructor.prototype = new ReactClassComponent();
  Constructor.prototype.constructor = Constructor;
  Constructor.prototype.__reactAutoBindPairs = [];

  injectedMixins.forEach(mixSpecIntoComponent.bind(null, Constructor));

  mixSpecIntoComponent(Constructor, spec);

  // Initialize the defaultProps property after all mixins have been merged.
  if (Constructor.getDefaultProps) {
    Constructor.defaultProps = Constructor.getDefaultProps();
  }

  if (process.env.NODE_ENV !== 'production') {
    // This is a tag to indicate that the use of these method names is ok,
    // since it's used with createClass. If it's not, then it's likely a
    // mistake so we'll warn you to use the static property, property
    // initializer or constructor respectively.
    if (Constructor.getDefaultProps) {
      Constructor.getDefaultProps.isReactClassApproved = {};
    }
    if (Constructor.prototype.getInitialState) {
      Constructor.prototype.getInitialState.isReactClassApproved = {};
    }
  }

  !Constructor.prototype.render ? process.env.NODE_ENV !== 'production' ? invariant(false, 'createClass(...): Class specification must implement a `render` method.') : _prodInvariant('83') : void 0;

  if (process.env.NODE_ENV !== 'production') {
    process.env.NODE_ENV !== 'production' ? warning(!Constructor.prototype.componentShouldUpdate, '%s has a method called ' + 'componentShouldUpdate(). Did you mean shouldComponentUpdate()? ' + 'The name is phrased as a question because the function is ' + 'expected to return a value.', spec.displayName || 'A component') : void 0;
    process.env.NODE_ENV !== 'production' ? warning(!Constructor.prototype.componentWillRecieveProps, '%s has a method called ' + 'componentWillRecieveProps(). Did you mean componentWillReceiveProps()?', spec.displayName || 'A component') : void 0;
  }

  // Reduce time spent doing lookups by setting these on the prototype.
  for (var methodName in ReactClassInterface) {
    if (!Constructor.prototype[methodName]) {
      Constructor.prototype[methodName] = null;
    }
  }

  return Constructor;
}

寄生構造関数モードを用いて作成されたオブジェクトであり,継承方式は寄生結合式継承であることがわかる.
要約:基本型は構造関数で継承され、参照型(関数を含む)はプロトタイプで継承され、通常は組み合わせで継承されます.ここでは対象継承の分類とまとめをするだけで、具体的な内容と解釈は全部「js高級手順設計」第六章にあります.詳しく知りたいなら、この本を読むことを強く勧めます.