JavaScriptの継承の詳しい解説(1)_jsオブジェクト指向

オブジェクト指向とオブジェクトベース

ほぼすべての開発者は、オブジェクト指向言語 (C、C#、Java など) での開発経験があります。 従来のオブジェクト指向言語には、クラスとインスタンスという 2 つの非常に重要な概念があります。 クラスはモノのクラスのパブリックな動作とメソッドを定義し、インスタンスはクラスの特定の実装です。 また、オブジェクト指向プログラミングには、カプセル化、継承、ポリモーフィズムという 3 つの重要な概念があることもわかっています。

しかし、JavaScript の世界では、これらすべての機能は存在しないようです。 JavaScript 自体はオブジェクト指向言語ではなく、オブジェクトベースの言語であるためです。 ここには興味深い機能がいくつかあります。たとえば、次の例のように、JavaScript では文字列、配列、日付、数値、さらには関数も含めてすべてがオブジェクトです。

    // 定义一个函数 - add<br>    function add(a, b) {<br>      add.invokeTimes++;<br>      return a + b;<br>    }<br>    // 因为函数本身也是对象，这里为函数add定义一个属性，用来记录此函数被调用的次数<br>    add.invokeTimes = 0;<br><br>    add(1 + 1);<br>    add(2 + 3);<br>    console.log(add.invokeTimes);  // 2<br>    

JavaScript でクラスと継承をシミュレートします

オブジェクト指向言語では、クラスを使用してカスタム オブジェクトを作成します。ただし、JavaScript ではすべてがオブジェクトです。

では、カスタム オブジェクトを作成するにはどうすればよいでしょうか?

これには、プロトタイプという別の概念の導入が必要です。新しく作成されたカスタム オブジェクトはすべて、このテンプレート (プロトタイプ) のコピーです (実際にはコピーではなく、リンクですが、このリンクは表示されません)。コピーのように感じます）。

プロトタイプを使用してカスタム オブジェクトを作成する例を見てみましょう:

ここでは、関数 person をコンストラクターと呼びます。これは、カスタム オブジェクトを作成する関数です。 JavaScript がコンストラクターとプロトタイプを通じてクラスの機能をシミュレートしていることがわかります。

    // 构造函数<br>    function Person(name, sex) {<br>      this.name = name;<br>      this.sex = sex;<br>    }<br>    // 定义Person的原型，原型中的属性可以被自定义对象引用<br>    Person.prototype = {<br>      getName: function() {<br>        return this.name;<br>      },<br>      getSex: function() {<br>        return this.sex;<br>      }<br>    }<br>    

カスタム オブジェクト (インスタンス化されたクラス) を作成するコード:

コード var zhang = new Person("ZhangSan", "man") が実行されると、実際に内部で次のことが行われます。

    var zhang = new Person("ZhangSan", "man");<br>    console.log(zhang.getName());  // "ZhangSan"<br><br>    var chun = new Person("ChunHua", "woman");<br>    console.log(chun.getName());  // "ChunHua"<br>    

空のオブジェクト (new Object()) を作成します。

Person.prototype の属性 (キーと値のペア) をこの空のオブジェクトにコピーします (前述したように、内部実装はコピーではなく隠しリンクです)。
• this キーワードを使用してこのオブジェクトをコンストラクターに渡し、コンストラクターを実行します。
• このオブジェクトを変数 zhang に代入します。

プロトタイプ テンプレートがインスタンス化されたオブジェクトにコピーされるのではなく、リンクの方法であることを証明するには、次のコードを参照してください:

JavaScript 内に実装されたこの隠れたプロトタイプ リンクは、JavaScript が依存する温かい土壌であり、シミュレーション実装の継承の基礎でもあります。

    function Person(name, sex) {<br>      this.name = name;<br>      this.sex = sex;<br>    }<br>    Person.prototype.age = 20;<br><br>    var zhang = new Person("ZhangSan", "man");<br>    console.log(zhang.age);  // 20<br>    // 覆盖prototype中的age属性<br>    zhang.age = 19;<br>    console.log(zhang.age);  // 19<br>    delete zhang.age;<br>    // 在删除实例属性age后，此属性值又从prototype中获取<br>    console.log(zhang.age);  // 20<br>    

JavaScript で単純な継承を実装するにはどうすればよいですか?

次の例では、従業員クラス Employee を作成します。これは、プロトタイプのすべてのプロパティを Person から継承します。

    function Employee(name, sex, employeeID) {<br>      this.name = name;<br>      this.sex = sex;<br>      this.employeeID = employeeID;<br>    }<br>    // 将Employee的原型指向Person的一个实例<br>    // 因为Person的实例可以调用Person原型中的方法, 所以Employee的实例也可以调用Person原型中的所有属性。<br>    Employee.prototype = new Person();<br>    Employee.prototype.getEmployeeID = function() {<br>      return this.employeeID;<br>    };<br><br>    var zhang = new Employee("ZhangSan", "man", "1234");<br>    console.log(zhang.getName());  // "ZhangSan<br>    

上記の継承の実装は非常に大まかであり、多くの問題があります:

Employee コンストラクターとプロトタイプ (以下、クラス) の作成時に person がインスタンス化されますが、これは不適切です。

Employee のコンストラクターは親クラス person のコンストラクターを呼び出すことができないため、Employee コンストラクターで名前と性別属性が繰り返し割り当てられます。
• Employee の関数は Person の同じ名前の関数を上書きしますが、オーバーロード メカニズムはありません (これは前のものと同じタイプの問題です)。
• JavaScript クラスを作成するための構文は断片化しすぎており、C#/Java の構文ほど洗練されていません。
• 実装のコンストラクター属性にポインティング エラーがあります。これについては 2 番目の記事で説明します。
この例は第 3 章で改善します。

JavaScript 継承の実装

JavaScript 自体にはクラスと継承の完全な実装がなく、手動による実装には多くの問題があることがわかっているため、インターネット上にはこの困難なタスクの実装がすでに多数あります。

Douglas Crockford -

• JavaScript におけるプロトタイプの継承 Douglas Crockford -
• JavaScript における古典的な継承 John Resig -
• 単純な JavaScript の継承 Dean Edwards -
• JavaScript 継承の基本クラス
• プロトタイプ
• ムーツール
• Extjs
このシリーズの記事では、これらの実装を 1 つずつ詳しく分析し、最終的には JavaScript でクラスと継承がどのように実装されるかを深く理解します。

次の章では、this、コンストラクター、プロトタイプなど、クラス実装に関連する知識を紹介します。