検索
ホームページウェブフロントエンドjsチュートリアル簡単なJavaScriptクラスフレームワークの紹介_基礎知識

現在進行中の JavaScript 本を執筆する際、私は JavaScript 継承システムにかなりの時間を費やし、その過程で古典的なクラス継承をシミュレートするためのさまざまなソリューションを研究しました。これらの技術的ソリューションの中で、base2 と Prototype の実装は私が最も賞賛するものです。

これらのソリューションから、イデオロギー的な意味を持つフレームワークを抽出する必要があります。そのフレームワークは、シンプルで再利用可能で、依存関係から独立している必要があります。使用例は次のとおりです:

var Person = Class. extend ( {
 init: function (isDancing ) {
  this. dancing = isDancing;
 },
 dance: function ( ) {
  return this. dancing;
 }
} );
var Ninja = Person.extend({
 init: function(){
  this._super( false );
 },
 dance: function(){
  // Call the inherited version of dance()
  return this._super();
 },
 swingSword: function(){
  return true;
 }
});
var p = new Person(true);
p.dance(); // => true
var n = new Ninja();
n.dance(); // => false
n.swingSword(); // => true
// Should all be true
p instanceof Person && p instanceof Class &&
n instanceof Ninja && n instanceof Person && n instanceof Class

注意すべき点がいくつかあります:

  • コンストラクターは単純である必要があります (init 関数を通じて実装されます)。
  • 新しく定義されたアナロジーは、既存のクラス
  • から継承する必要があります。
  • すべての「クラス」は祖先クラス Class を継承するため、新しいクラスを作成する場合、そのクラスは Class のサブクラスである必要があります。
  • 最も難しい点: 親クラスのオーバーライドされたメソッドは (構成コンテキストを通じて) アクセス可能でなければなりません。
  • 上の例では、 Person 親クラスの init() メソッドと dance() メソッドが this._super() を通じて呼び出されていることがわかります。

結果には非常に満足しています。クラス定義が構造化され、単一継承が維持され、スーパークラス メソッドを呼び出すことができました。

単純なクラスの作成と継承

以下はその実装です (読みやすく、コメントも付いています)。約 25 行です。ご提案を歓迎いたします。

/* Simple JavaScript Inheritance
 * By John Resig http://ejohn.org/
 * MIT Licensed.
 */
// Inspired by base2 and Prototype
( function ( ) {
 var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;
 // The base Class implementation (does nothing)
 this.Class = function(){};
  
 // Create a new Class that inherits from this class
 Class.extend = function(prop) {
  var _super = this.prototype;
   
  // Instantiate a base class (but only create the instance,
  // don't run the init constructor)
  initializing = true;
  var prototype = new this();
  initializing = false;
   
  // Copy the properties over onto the new prototype
  for (var name in prop) {
   // Check if we're overwriting an existing function
   prototype[name] = typeof prop[name] == "function" &&
    typeof _super[name] == "function" && fnTest.test(prop[name]) ?
    (function(name, fn){
     return function() {
      var tmp = this._super;
       
      // Add a new ._super() method that is the same method
      // but on the super-class
      this._super = _super[name];
       
      // The method only need to be bound temporarily, so we
      // remove it when we're done executing
      var ret = fn.apply(this, arguments);    
      this._super = tmp;
       
      return ret;
     };
    })(name, prop[name]) :
    prop[name];
  }
   
  // The dummy class constructor
  function Class() {
   // All construction is actually done in the init method
   if ( !initializing && this.init )
    this.init.apply(this, arguments);
  }
   
  // Populate our constructed prototype object
  Class.prototype = prototype;
   
  // Enforce the constructor to be what we expect
  Class.prototype.constructor = Class;
  // And make this class extendable
  Class.extend = arguments.callee;
   
  return Class;
 };
})();

このうち、「初期化する/initを呼ばない」と「_superメソッドの作成」が最も難しいです。次に、誰もがその実装メカニズムをよりよく理解できるように、これについて簡単に紹介します。

初期化

関数プロトタイプの継承方法を説明するために、まず従来の実装プロセスを見てみましょう。これは、サブクラスのプロトタイプ属性が親クラスのインスタンスを指すようにするというものです。以下に示すように:


function Person ( ) { }
function Ninja ( ) { }
Ninja. prototype = new Person ( );
// Allows for instanceof to work:
(new Ninja()) instanceof Person

ただし、ここでの難しい点は、「instanceOf」の効果だけを取得したいだけであり、Person をインスタンス化し、そのコンストラクターを呼び出すという結果は必要ないことです。これを防ぐには、コード内で初期化する bool パラメータを設定します。この値は、親クラスがインスタンス化され、子クラスのプロトタイプ プロパティに設定された場合にのみ true になります。この処理の目的は、実際のインスタンス化中のコンストラクターの呼び出しとデザインの継承の違いを区別し、実際のインスタンス化中に init メソッドを呼び出すことです。

if ( !initializing )
 this.init.apply(this, arguments);
init 関数では、リソースを大量に消費するコード (サーバーへの接続、DOM 要素の作成など、誰も予測できません) が実行される可能性があるため、特に注意する価値があります。区別するために。

スーパーメソッド

継承を使用する場合、最も一般的な要件は、サブクラスがスーパークラスのオーバーライドされたメソッドにアクセスできることです。この実装では、最終的な解決策は、スーパークラス メソッドを指し、サブクラス メソッドでのみアクセスできる一時メソッド (._super) を提供することです。



var Person = Class. extend ( {
 init: function (isDancing ) {
  this. dancing = isDancing;
 }
} );
var Ninja = Person.extend({
 init: function(){
  this._super( false );
 }
});
var p = new Person(true);
p.dancing; // => true
var n = new Ninja();
n.dancing; // => false


この機能を実装するには、いくつかの手順が必要です。まず、extend を使用して、基本的な Person インスタンス (その構築プロセスは上で説明したクラス インスタンス) をリテラル オブジェクト (Person.extend() の関数パラメーター) とマージします。マージ プロセス中に、簡単なチェックが行われました。まず、マージされる属性が関数であるかどうかをチェックし、そうである場合は、上書きされるスーパークラス属性も関数であるかどうかをチェックします。両方のチェックが true の場合、このプロパティに対して _super メソッドを準備する必要があります。

追加されたスーパー メソッドをカプセル化するために、匿名クロージャ (関数オブジェクトを返す) がここで作成されることに注意してください。実行環境を維持する必要があるため、関数の実行後にリセットされるように古い this._super を保存する必要があります (同じ名前を付けたくない場合)。誤ってオブジェクト ポインタを失う) 予測できない問題。

次に、スーパー クラス内のオーバーライドされたメソッドのみを指す新しい _super メソッドを作成します。ありがたいことに、_super に変更を加えたりスコープを変更したりする必要はありません。関数の実行環境は関数呼び出しオブジェクト (ポインター this はスーパー クラスを指します) に応じて自動的に変更されるためです。

最後に、リテラル オブジェクトのメソッドを呼び出します。メソッドの実行中に This._super() が使用され、属性 _super が元の状態にリセットされ、関数が終了します。


同じ効果を達成する方法はたくさんあります (以前、super をそれ自体にバインドし、arguments.callee でアクセスするのを見てきました) が、この方法が使いやすさとシンプルさの特徴を最もよく反映していると感じます。

私が完成させた JavaScript プロトタイプに基づく多くの作品の中で、これは私が皆さんと共有するために公開した唯一のクラス継承実装計画です。私は、簡潔なコード (学習しやすく、継承しやすく、ダウンロードが少ない) を全員で議論できるようにする必要があると考えています。そのため、JavaScript クラスの構築と継承を学ぶ人にとって、この実装計画は良いスタートとなります。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
JavaScriptエンジンの理解:実装の詳細JavaScriptエンジンの理解:実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1)エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2)実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3)ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript:学習曲線と使いやすさPython vs. JavaScript:学習曲線と使いやすさApr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

Python vs. JavaScript:コミュニティ、ライブラリ、リソースPython vs. JavaScript:コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1)Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2)Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3)どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへ:すべてがどのように機能するかC/CからJavaScriptへ:すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1)C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2)C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3)JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン:実装の比較JavaScriptエンジン:実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析:ソースコードを語彙ユニットに変換します。 2。文法分析:抽象的な構文ツリーを生成します。 3。最適化とコンパイル:JITコンパイラを介してマシンコードを生成します。 4。実行:マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて:現実世界のJavaScriptブラウザを超えて:現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション(EDTECHアプリ)を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか? マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合)next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合)Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、