ホームページ > 記事 > ウェブフロントエンド > JavaScript 継承の基礎メモの共有を強化する

JavaScript 継承の基礎メモの共有を強化する

小云云オリジナル: 2018-03-12 14:10:341266ブラウズ

セキュリティ上の理由から、ローカルクラスとホストクラスは継承できませんが、その他は継承できます。 ECMAScript では抽象クラスを厳密に定義していませんが、使用が許可されていないクラスがいくつかあります。サブクラスは、コンストラクターやメソッド実装を含む、スーパークラスのすべてのプロパティとメソッドを継承します。すべてのプロパティとメソッドはパブリックであるため、サブクラスはこれらのメソッドに直接アクセスできることに注意してください。サブクラスは、スーパークラスにない新しいプロパティやメソッドを追加したり、スーパークラスのプロパティやメソッドをオーバーライドしたりすることもできます。

JavaScript の継承メカニズムは明示的に指定されていませんが、模倣によって実装されています。これは、継承の詳細すべてがインタープリターによって完全に処理されるわけではないことを意味します。

オブジェクトの偽装

端的に言うと、まずスーパークラスAのコンストラクターメソッドを書くことです。クラス B の別のコンストラクターを作成し、
使用後、クラス A への参照を削除します。
サブクラス属性を定義します(すべての新しいサブクラス属性は参照の削除後に定義されます)

<span style="font-size: 14px;">// 超类ClassA的构造方法function ClassA(sColor) {<br/>    this.color = sColor;    this.sayColor = function () {、<br/>        alert(this.color);<br/>    };<br/>}// 子类ClassB的构造方法function ClassB(sColor, sName) {<br/>    // 引用ClassA的构造方法<br/>    this.newMethod = ClassA;    // 使用ClassA的构造方法够照ClassB<br/>    this.newMethod(sColor);    // 删除对ClassA的引用<br/>    delete this.newMethod;    /* 所有的子类新属性在删除引用后定义 */<br/>    // 子类属性<br/>    this.name = sName;    this.sayName = function () {<br/>        alert(this.name);<br/>    };<br/>}</span>

オブジェクトの偽装は多重継承を実現できます

クラスは複数のスーパークラスを継承できます。

ClassX と ClassY、ClassZ はこれら 2 つのクラスを継承したいと考えています。

同じ名前のプロパティまたはメソッドを持つ 2 つのクラス ClassX と ClassY がある場合、ClassY の優先度が高くなります。次のクラスを継承しているため。

<span style="font-size: 14px;">function ClassZ() {<br/>  // 继承ClassX<br/>  this.newMethod = ClassX;  this.newMethod();  delete this.newMethod;  //继承ClassY<br/>  this.newMethod = ClassY;  this.newMethod();  delete this.newMethod;<br/>}</span>

call() メソッド

call() メソッドは、古典的なオブジェクト偽装メソッドに最もよく似ています。

1つのパラメータがこのオブジェクトとして使用されます。他のすべてのパラメーターは関数自体に直接渡されます。

<span style="font-size: 14px;">function ClassB(sColor, sName) {<br/>  /*<br/>  将classB付给ClassA中的this<br/>  这时classA中的this实际指向是ClassB<br/>  */<br/>  ClassA.call(this, sColor);  this.name = sName;  this.sayName = function () {<br/>    alert(this.name);<br/>  };<br/>}</span>

apply() メソッド

は、this として使用されるオブジェクトと関数に渡されるパラメータの配列という 2 つのパラメータを取ります。

apply2 番目のパラメーターは配列のみです

<span style="font-size: 14px;">function ClassB(sColor, sName) {<br/>  // 引用ClassA构造方法<br/>  ClassA.apply(this, new Array(sColor));  // 也可以使用arguments<br/>  // 只有超类中的参数顺序与子类中的参数顺序完全一致时才可以传递参数对象<br/>  // ClassA.apply(this, arguments);<br/>  // ClassB 自己的属性<br/>  this.name = sName;  this.sayName = function () {<br/>    alert(this.name);<br/>  };<br/>}</span>

プロトタイプチェーン

継承この形式は元々、ECMAScript のプロトタイプチェーンに使用されていました。

<span style="font-size: 14px;">// ClassA的构造方法function ClassA() {<br/>  //要求为空，全部写在prototype上}// ClassA的属性ClassA.prototype.color = "blue";<br/>ClassA.prototype.sayColor = function () {<br/>  alert(this.color);<br/>};// ClassB的构造方法function ClassB() {}// 继承ClassA的属性ClassB.prototype = new ClassA();// ClassB自己的属性，需要出现在继承之后ClassB.prototype.name = "";<br/>ClassB.prototype.sayName = function () {<br/>  alert(this.name);<br/>};</span>

instanceof演算について

プロトタイプチェーンでは、instanceof演算子も独特の方法で動作します。 instanceof は、ClassB のすべてのインスタンスについて、ClassA と ClassB の両方に対して true を返します。

<span style="font-size: 14px;">var objB = new ClassB();<br/>alert(objB instanceof ClassA);  //输出 "true"alert(objB instanceof ClassB);  //输出 "true"</span>

混合メソッド

<span style="font-size: 14px;">// ClassA的构造方法,只写属性，不写函数function ClassA(sColor) {<br/>  this.color = sColor;<br/>}// 使用原型给ClassA赋予函数ClassA.prototype.sayColor = function () {<br/>  alert(this.color);<br/>};// ClassB的构造方法function ClassB(sColor, sName) {<br/>  // 先调用ClassA，继承ClassA的属性<br/>  ClassA.call(this, sColor);  this.name = sName;<br/>}// 再通过原型链继承ClassA的函数ClassB.prototype = new ClassA();// 通过原型链定义自己的函数ClassB.prototype.sayName = function () {<br/>    alert(this.name);<br/>};</span>

ClassB コンストラクターで、オブジェクトを使用して、ClassA クラスの sColor 属性を継承するふりをします。

強調表示されているコードの 2 行目では、プロトタイプチェーンを使用して ClassA クラスのメソッドを継承します。
JavaScriptの基本強化メモ - 継承

セキュリティ上の理由から、ローカルクラスとホストクラスは継承できませんが、その他は継承できます。

ECMAScript では抽象クラスを厳密に定義していませんが、使用が許可されていないクラスもあります。

サブクラスは、コンストラクターとメソッドの実装を含む、スーパークラスのすべてのプロパティとメソッドを継承します。すべてのプロパティとメソッドはパブリックであるため、サブクラスはこれらのメソッドに直接アクセスできることに注意してください。サブクラスは、スーパークラスにない新しいプロパティやメソッドを追加したり、スーパークラスのプロパティやメソッドをオーバーライドしたりすることもできます。

オブジェクトの偽装

端的に言うと、まずスーパークラスAのコンストラクターメソッドを書くことです。クラス B の別のコンストラクターを作成し、

使用後、クラス A への参照を削除します。
サブクラス属性を定義します(すべての新しいサブクラス属性は参照の削除後に定義されます)

<span style="font-size: 14px;">// 超类ClassA的构造方法function ClassA(sColor) {<br/>    this.color = sColor;    this.sayColor = function () {、<br/>        alert(this.color);<br/>    };<br/>}// 子类ClassB的构造方法function ClassB(sColor, sName) {<br/>    // 引用ClassA的构造方法<br/>    this.newMethod = ClassA;    // 使用ClassA的构造方法够照ClassB<br/>    this.newMethod(sColor);    // 删除对ClassA的引用<br/>    delete this.newMethod;    /* 所有的子类新属性在删除引用后定义 */<br/>    // 子类属性<br/>    this.name = sName;    this.sayName = function () {<br/>        alert(this.name);<br/>    };<br/>}</span>

オブジェクトの偽装は多重継承を実現できます

クラスは複数のスーパークラスを継承できます。
ClassX と ClassY、ClassZ はこれら 2 つのクラスを継承したいと考えています。

次のクラスを継承しているため。

<span style="font-size: 14px;">function ClassZ() {<br/>  // 继承ClassX<br/>  this.newMethod = ClassX;  this.newMethod();  delete this.newMethod;  //继承ClassY<br/>  this.newMethod = ClassY;  this.newMethod();  delete this.newMethod;<br/>}</span>

call()方法

call() 方法是与经典的对象冒充方法最相似。
一个参数用作 this 的对象。其他参数都直接传递给函数自身。

<span style="font-size: 14px;">function ClassB(sColor, sName) {<br/>  /*<br/>  将classB付给ClassA中的this<br/>  这时classA中的this实际指向是ClassB<br/>  */<br/>  ClassA.call(this, sColor);  this.name = sName;  this.sayName = function () {<br/>    alert(this.name);<br/>  };<br/>}</span>

apply() 方法

两个参数，用作 this 的对象和要传递给函数的参数的数组。
apply第二个参数只能是数组

<span style="font-size: 14px;">function ClassB(sColor, sName) {<br>  // 引用ClassA构造方法<br>  ClassA.apply(this, new Array(sColor));  // 也可以使用arguments<br>  // 只有超类中的参数顺序与子类中的参数顺序完全一致时才可以传递参数对象<br>  // ClassA.apply(this, arguments);<br>  // ClassB 自己的属性<br>  this.name = sName;  this.sayName = function () {<br>    alert(this.name);<br>  };<br>}</span>

原型链（prototype chaining）

继承这种形式在 ECMAScript 中原本是用于原型链的。

<span style="font-size: 14px;">// ClassA的构造方法function ClassA() {<br>  //要求为空，全部写在prototype上}// ClassA的属性ClassA.prototype.color = "blue";<br>ClassA.prototype.sayColor = function () {<br>  alert(this.color);<br>};// ClassB的构造方法function ClassB() {}// 继承ClassA的属性ClassB.prototype = new ClassA();// ClassB自己的属性，需要出现在继承之后ClassB.prototype.name = "";<br>ClassB.prototype.sayName = function () {<br>  alert(this.name);<br>};</span>

关于 instanceof 运算

在原型链中，instanceof 运算符的运行方式也很独特。对 ClassB 的所有实例，instanceof 为 ClassA 和 ClassB 都返回 true。

<span style="font-size: 14px;">var objB = new ClassB();<br/>alert(objB instanceof ClassA);  //输出 "true"alert(objB instanceof ClassB);  //输出 "true"</span>

混合方式

<span style="font-size: 14px;">// ClassA的构造方法,只写属性，不写函数function ClassA(sColor) {<br/>  this.color = sColor;<br/>}// 使用原型给ClassA赋予函数ClassA.prototype.sayColor = function () {<br/>  alert(this.color);<br/>};// ClassB的构造方法function ClassB(sColor, sName) {<br/>  // 先调用ClassA，继承ClassA的属性<br/>  ClassA.call(this, sColor);  this.name = sName;<br/>}// 再通过原型链继承ClassA的函数ClassB.prototype = new ClassA();// 通过原型链定义自己的函数ClassB.prototype.sayName = function () {<br/>    alert(this.name);<br/>};</span>

ClassB 构造函数中，用对象冒充继承 ClassA 类的 sColor 属性。
在第二行突出显示的代码中，用原型链继承 ClassA 类的方法。

JavaScript 継承の基礎 メモの共有を強化する

オブジェクトの偽装

ClassB コンストラクターで、オブジェクトを使用して、ClassA クラスの sColor 属性を継承するふりをします。

端的に言うと、まずスーパークラスAのコンストラクターメソッドを書くことです。クラス B の別のコンストラクターを作成し、

call()方法

apply() 方法

原型链（prototype chaining）

混合方式

関連記事

JavaScript 継承の基礎メモの共有を強化する