ホームページ > ウェブフロントエンド > jsチュートリアル > 「new」キーワードは JavaScript のオブジェクトの継承にどのような影響を与えますか?

「new」キーワードは JavaScript のオブジェクトの継承にどのような影響を与えますか?

Mary-Kate Olsen
リリース: 2024-12-21 14:49:09
オリジナル
170 人が閲覧しました

How Does the `new` Keyword Impact Object Inheritance in JavaScript?

オブジェクト継承における 'new' キーワードを理解する

2 つのオブジェクト コンストラクター間の継承を作成する場合、'new' キーワードは重要な役割を果たします。次のコードのコンテキストでその目的を調べてみましょう:

WeatherWidget.prototype = new Widget;
ログイン後にコピー

ここでの目的は、新しい WeatherWidget コンストラクターを使用して Widget コンストラクターを拡張することです。 'new' キーワードを使用することで、Widget をコンストラクターとして効果的に呼び出し、その戻り値を WeatherWidget のプロトタイプ プロパティに割り当てます。

'new' を省略した場合の影響

コード内で「new」キーワードを省略した場合、結果は異なります。 「new」がないと、引数リストが追加されない限り、ウィジェットはコンストラクターとして呼び出されません。さらに、実装が ECMAScript Ed に準拠している場合、コンストラクター内の「this」参照がグローバル オブジェクトにバインドされる可能性があるため、そのようにウィジェットを呼び出すことは厳密モード コードでは不可能な場合があります。 5.x.

「new」の使用に関する潜在的な問題

「new」を使用すると継承を作成できますが、欠点もある可能性があります。たとえば、WeatherWidget のすべてのインスタンスは同じ Widget インスタンスから継承します。これは、Widget インスタンスから継承されたプロパティ値がすべての WeatherWidget インスタンス間で共有されることを意味します。

代替継承アプローチ

クラスベースの継承を実装するためのより適切な方法プロトタイプベースの言語では、次のアプローチを使用します。

function Dummy () {}
Dummy.prototype = Widget.prototype;
WeatherWidget.prototype = new Dummy();
WeatherWidget.prototype.constructor = WeatherWidget;
ログイン後にコピー

このアプローチにより、次のことが保証されます。 WeatherWidget インスタンスは、インスタンス間でプロパティ値を共有することなく、プロトタイプ チェーンを通じてプロパティを継承します。さらに、「constructor」プロパティが適切に設定されているため、各 WeatherWidget インスタンスは正しいコンストラクターを指します。

ECMAScript 5 以降

ECMAScript 5 以降では、次の構文を使用して継承を作成できます:

WeatherWidget.prototype = Object.create(Widget.prototype, {
  constructor: {value: WeatherWidget}
});
ログイン後にコピー

この構文結果として得られる 'constructor' プロパティを書き込み不可、列挙不可、構成不可にするという利点があります。

結論として、オブジェクト継承の 'new' キーワードは特定の目的を果たしますが、その使用はすべきです。潜在的な問題を避けるために注意してください。より高い柔軟性と制御を提供する継承の代替アプローチが利用可能です。

以上が「new」キーワードは JavaScript のオブジェクトの継承にどのような影響を与えますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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