ホームページ > ウェブフロントエンド > jsチュートリアル > JSオブジェクト継承のユースケースの詳細な説明

JSオブジェクト継承のユースケースの詳細な説明

php中世界最好的语言
リリース: 2018-06-04 10:48:55
オリジナル
1592 人が閲覧しました

今回は、JS オブジェクト継承の使用例について詳しく説明します。JS オブジェクト継承を使用する際の注意点は何ですか?実際の事例を見てみましょう。

所有していないオブジェクトを変更することは、特定の問題に対する良い解決策です。 「正常な」状態では、通常は発生しませんが、開発者が問題に遭遇し、オブジェクトを変更することでそれを解決したために発生する可能性があります。それにもかかわらず、既知の問題には常に複数の解決策があります。コンピューター サイエンスの知識の多くは、Java などの静的型付け言語環境における困難な問題を解決するために進化してきました。これらのオブジェクトを直接変更せずに拡張する、いわゆるデザイン パターンと呼ばれるメソッドが存在する場合があります。

JS 以外では、オブジェクト拡張の最も一般的な形式は継承です。あるタイプのオブジェクトがすでに必要な機能のほとんどを実行している場合は、それを継承して、いくつかの機能を追加します。 JS には、オブジェクトベースの継承とタイプベースの継承という 2 つの基本的な形式があります。

JS では、継承には依然として大きな制限がいくつかあります。まず、DOM または BOM オブジェクトから継承することはできません。次に、配列インデックスと長さプロパティの間には複雑な関係があるため、配列からの継承は正しく機能しません。

オブジェクトベースの継承

オブジェクトベースの継承では、コンストラクターを呼び出さずに、あるオブジェクトが別のオブジェクトを継承することもよくあります。 ES5 Object.create() メソッドは、この種の継承を実装する最も簡単な方法です。例:

var person = {  name: 'Nicholas',  sayName: function () {    console.log(this.name);
  }
};var myPerson = Object.create(person);
myPerson.sayName(); // "Nicholas"
ログイン後にコピー

この例では、person を継承する新しいオブジェクト myperson を作成します。この継承メソッドは、myperson のプロトタイプが person に設定されるのと同様であり、それ以降、新しいオブジェクトで同じ名前の変数を再定義することなく、myperson は person のプロパティとメソッドにアクセスできるようになります。たとえば、myPerson.sayName() を再定義すると、person.sayName() へのアクセスが自動的に遮断されます:

myPerson.sayName = function () {  console.log('Anonymous');
};
myPerson.sayName(); // "Anonymous"person.sayName(); // "Nicholas"
ログイン後にコピー

Object.create() メソッドは 2 番目のパラメータを指定でき、パラメータ オブジェクト内のプロパティとメソッドは次のように追加されます。オブジェクトの新しいもの。例:

var myPerson = Object.create(person, {  name: {    value: 'Greg'
  }
});
myPerson.sayName(); // "Greg"person.sayName(); // "Nicholas"
ログイン後にコピー

この例で作成された myperson オブジェクトには独自の name 属性値があるため、sayName() を呼び出すと、「Nicholas」ではなく「Greg」が表示されます。

この方法で新しいオブジェクトが作成されると、その新しいオブジェクトは完全に自由に変更できます。結局のところ、あなたはオブジェクトの所有者であり、プロジェクト内でメソッドを追加したり、既存のメソッドを上書きしたり、メソッドを削除したり(またはアクセスを禁止したり)することもできます。

型ベースの継承

型ベースの継承は、オブジェクトベースの継承と同じように機能します。ここでの継承は、プロトタイプに依存します。したがって、型ベースの継承は、オブジェクトではなくコンストラクターを通じて実装されます。これは、継承されたオブジェクトのコンストラクターにアクセスする必要があることを意味します。 JS のネイティブ型と比較すると、開発者がコンストラクターを定義する場合、型ベースの継承が最も適しています。同時に、型ベースの継承には通常 2 つの手順が必要です。最初にプロトタイプの継承、次にコンストラクターの継承です。コンストラクターの継承とは、スーパークラスのコンストラクターを呼び出すときに、新しく作成されたオブジェクトを this 値として渡すことです。例:

function Person (name) {  this.name = name;
}function Author (name) {
  Person.call(this, name); // 继承构造器}
Author.prototype = new Person();
ログイン後にコピー

このコードでは、Author タイプは Person から継承します。属性名は実際には Person クラスによって管理されるため、 Person.call(this, name) を使用すると、Person コンストラクターが属性の定義を続行できます。これに対して Person コンストラクターが実行され、Author オブジェクトを指すため、最終的な名前はこの Author オブジェクトで定義されます。

オブジェクトベースの継承と比較して、型ベースの継承は、新しいオブジェクトを作成するときにより柔軟です。タイプを定義すると、複数のインスタンス オブジェクトを作成でき、それらはすべて共通のスーパークラスから継承されます。新しい型は、使用する必要があるプロパティとメソッドを明確に定義する必要があり、それらはスーパークラスのものとは完全に異なる必要があります。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

Web 開発で null 比較を回避する方法

Web 開発でグローバル変数の使用を避ける必要がある理由

以上がJSオブジェクト継承のユースケースの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート