JavaScript オブジェクト指向プログラミングについてもう一度話しましょう_js オブジェクト指向プログラミング

なお、この記事はJavaScriptの勉強を始めたばかりなので、このような記事を書いていきたいと思っていますので、お気軽にコメントや修正をお願いします。

JavaScript についての不満
初めて Javascript に触れたとき、この言語は、その単純さから多くの一般兵士に大きな不快感を与えるでしょう。そして、JavaScript の文法の不正確さは、JavaScript という名前の悲しい言語からも来ているので、Netscape の Javascript 設計者は、JavaScript をめぐって多くの不当な不当な扱いを受けたとき、頭が混乱していたに違いないと思います。人々はそれが WEB おもちゃ言語である Java の付属物であると考えています。そのため、JavaScript を軽蔑し、JavaScript は本物の言語ではないと考える人もいますが、それは本当に間違っています。 Javascript は単なる言語ではなく、実際の言語であるだけでなく、多くの新しいプログラミング モデル、プロトタイプの継承、クロージャーを作成した画期的な言語でもあります (著者注: クロージャーは JS の最初の作成物ではなく、Scheme である必要があります)。は最初のもので、プロトタイプ継承と動的オブジェクトは自己言語の最初のものでした。訂正していただきありがとうございます。) これはその後の動的言語に大きな影響を与えました。現在最も人気のある言語 (誰も) であることは、git で最も多く送信されている言語タイプを見れば理解できます。 HTML5 の登場により、OS を置き換える傾向が見られるようになると、UNIX/Linux にとっての C や JVM にとっての Java のように、JavaScript がブラウザ上で唯一の本当の言語となるでしょう。は MainFrame 用ですが、私たちもこの言語を真剣に理解し、再度検討する必要があります。さらに、JavaScript の正式名は ECMAScript です。この名前は明らかに Javascript よりもはるかに優れています。

本題に戻り、JavaScript でのオブジェクト指向プログラミングの話題に移りましょう。 Javascript でのオブジェクト指向プログラミングについて話すために、最初に行う必要があるのは、これまでに学んだオブジェクト指向プログラミングを忘れることです。従来の C または Java のオブジェクト指向の考え方を使用して Javascript のオブジェクト指向の考え方を学習すると、最初に学んだことを忘れて、この特殊なオブジェクト指向プログラミングをゼロから学習してみましょう。 OO プログラミングなので、どうやって OO プログラミングを理解すればよいでしょうか? 以前、C を学習していたのを覚えていますが、長い間学習した後、幸運にも名作『Inside The』を読むことができました。 C オブジェクト モデル」を読んで、突然啓蒙されました。そのため、この記事でもオブジェクトを使用します。JavaScript で OO プログラミングを探求するためのモデル アプローチ。 Javascript オブジェクト モデルの特殊性により、JavaScript の継承は従来の継承とは大きく異なります。同時に、JavaScript にはクラスがないため、JavaScript には拡張や実装がないことになります。では、JavaScript はどのようにして OO プログラミングを実装するのでしょうか?さて、始めて、JavaScript の OO の世界を見てみましょう

まず、JavaScript がオブジェクトをどのように定義するかを見てみる必要があります。以下はオブジェクト定義の 1 つです:

コードをコピー コードは次のとおりです:

var o = { };

次のようなオブジェクトも定義できます

コードをコピー コードは次のとおりです。

function f() { }

はい、そのとおりです。JavaScript では関数もオブジェクトです。
もちろん

コードをコピー コードは次のとおりです。

var array1= [ 1、2、3];

配列もオブジェクトです。
オブジェクトの基本概念のその他の説明については、Chen Hao の記事「Javascript オブジェクト指向プログラミング」を参照してください。
オブジェクトはすべて存在しますが、欠けているのはクラスだけです。結局のところ、関数の存在により、拡張する前に柔軟な方法でクラスを定義できます。このトピックでは、JavaScript オブジェクトの最も重要な属性である __proto__ メンバーについても理解する必要があります。

__proto__ メンバー
厳密に言えば、このメンバーをこの名前で呼ぶべきではありません。__proto__ は Firefox での名前であり、__proto__ には Firefox ブラウザーでのみアクセスできます。オブジェクトとして、そのメンバーまたはメソッドの 1 つにアクセスすると、このオブジェクトにそのようなメソッドまたはメンバーが存在しない場合、JavaScript エンジンはこのオブジェクトの __proto__ メンバーが指す別のオブジェクトにアクセスし、指定されたメソッドまたはメソッドを検索します。そのオブジェクト内のメンバーが見つからない場合は、そのオブジェクトの __proto__ メンバーが指すオブジェクトをリンク リストの終わりまで再帰的に検索し続けます。
それでは、例を挙げてみましょう。
たとえば、上で定義した配列オブジェクト array1 です。オブジェクト array1 を作成するとき、JavaScript エンジンにおける array1 の実際のオブジェクト モデルは次のとおりです:

array1 オブジェクトの長さ属性値は 3 ですが、次のメソッドを使用して設定できます。 array1 の長さ属性 要素を追加します:

コードをコピー コードは次のとおりです:

array1 .push(4);

push メソッドは、array1 の __proto__ メンバーが指すメソッド (Array.prototye.push()) から来ます。すべての配列オブジェクト ([] によって作成されたもの) には、プッシュ、リバース、その他のメソッドで同じオブジェクト (Array.prototype) を指す __proto__ メンバーが含まれているため、これらの配列オブジェクトはプッシュ、リバース、その他のメソッドを使用できます。

この場合、Array.prototype オブジェクトなどのテンプレート オブジェクトがあり、他のオブジェクト __proto_ が配置されている限り、__proto__ 属性はオブジェクト指向の「has a」関係に相当します。 _ 属性がこのオブジェクトを指している場合、継承パターンが完成します。良い！これは間違いなくできます。ただし、この属性は FireFox でのみ有効です。他のブラウザにも属性はありますが、__proto__ を介してアクセスすることはできず、この属性は読み取り専用です。 Javascriptで継承を実装するのは簡単ではないようです。

関数オブジェクトのプロトタイプ メンバー
まず、関数のプロトタイプ メンバーの定義を見てみましょう。

関数オブジェクトが作成されると、関数オブジェクトには、関数オブジェクトへの参照であるコンストラクタ メンバ
関数オブジェクトが作成されると、このメンバはオブジェクトになります。このコンストラクタ メンバは、この関数オブジェクトを指します。 。

例:

コードをコピー コードは次のとおりです:

function Base() {
this.id = "base"
}

関数オブジェクト Base にはプロトタイプ メンバーがあります。コンストラクターに関しては、実際には Base 関数オブジェクトそのものです。なぜこのタイプの関数を呼び出すのでしょうか。コンストラクターについてはどうでしょうか?その理由は、そのような関数が new 演算子で使用されるように設計されているためです。一般的な関数オブジェクトと区別するため、関数の先頭文字は大文字で表記するのが一般的です。コンストラクターの主な機能は、類似したオブジェクトのクラスを作成することです。

上記のコードの Javascript エンジンのオブジェクト モデルは次のとおりです


new 演算子
上記の基本概念を使用した後はじめに、new 演算子を追加することで、従来のオブジェクト指向クラスの new メソッドを使用してオブジェクトを作成できます。JavaScript では、このメソッドを擬似古典と呼びます。
上記の例に基づいて、次のコードを実行します

コードをコピーします コードは次のとおりです。

var obj = new Base();

このコードの結果は何でしょうか? Javascript エンジンで見られるオブジェクト モデルは次のとおりです:

new 演算子は実際には何をするのでしょうか? それは実際には非常に簡単です。 3つのこと。

コードをコピーします コードは次のとおりです。

var obj = {}; obj.__proto__ = Base.prototype;
Base.call(obj);

最初の行では、空のオブジェクト obj を作成します
2 行目では、__proto_この空のオブジェクトの _ メンバーは、Base 関数オブジェクトのプロトタイプ メンバー オブジェクトを指します
3 行目では、Base 関数オブジェクトの this ポインターを obj に置き換えてから、Base 関数を呼び出して、id メンバーを割り当てますこのメンバーをobjオブジェクトに追加すると、変数の値は「base」になります。call関数の使用法については、Chen Hao氏の「Javascriptオブジェクト指向プログラミング」の記事を参照してください。 Base.prototype オブジェクトにいくつかの関数を追加しますか?
たとえば、コードは次のとおりです:

コードをコピー コードは次のとおりです: Base.prototype.toString = function( ) {

return this.id;

}


次に、__proto__ の特性に従って、new を使用して新しいオブジェクトを作成すると、 toString メソッドにアクセスすると、新しいオブジェクトを作成することもできます。

コンストラクターでは、「クラス」のメンバー変数 (例: この例では id) を設定し、コンストラクター オブジェクトのプロトタイプでは、「クラス」のパブリック メソッドを設定します。したがって、クラスとクラスのインスタンス化の効果は、関数オブジェクト、JavaScript 固有の __proto__ およびプロトタイプ メンバー、および new 演算子を通じてシミュレートされます。

擬似古典継承
クラスをシミュレートしますが、継承はどのように行われるべきでしょうか?これは実際には非常に簡単で、コンストラクターのプロトタイプを親クラスに指すようにするだけです。たとえば、Derive クラスを設計します。以下のように

コードをコピーします コードは次のとおりです。 function Derive(id) {

this.id = id;

}
Derive.prototype = new Base();
Derive.prototype.test = function(id){
return this.id === id ;
}
var newObj = new Derive("derive");


このコードを実行すると、オブジェクト モデルはどのようになりますか?以前の導出によれば、次のオブジェクト モデルになるはずです

このように、newObj も基本クラス Base の toString メソッドを継承し、独自のメンバー ID を持ちます。このオブジェクト モデルがどのように導出されるのかについては、前述の説明を参照してください。このオブジェクト モデルを導出するのは難しくありません。 疑似古典継承は、C/Java を学習した学生にとっては少し安心できるものであり、特に new キーワードはよく知られていますが、この 2 つは似ていますが、メカニズムはまったく異なります。もちろん、どのような継承であっても、__proto__ メンバーなしでは実行できません。


プロトタイプの継承
これは Javascript のもう 1 つの継承メソッドです。この継承は、Chen Hao 氏の以前の記事「JavaScript オブジェクト指向プログラミング」の create 関数です。これは ECMAScript V5 の標準です。現在、V5 をサポートしているブラウザは、IE9、Chrome および Firefox の最新バージョンのようです。多いように思えますが、中国は IE6 の最も大きな被害を受けている地域であるため、作成関数の使用は避けることをお勧めします。幸いなことに、create 関数が登場する前に、JavaScript ユーザーはすでにこの関数と同等のものを設計していました。例: Douglas Crockford のオブジェクト関数を見てみましょう。

コードをコピー コードは次のとおりです。function object(old) {

function F( ) {} ;

F.prototype = old;
return new F();
var newObj = object(oldObject); たとえば、次のコードセグメント

コードをコピー

コードは次のとおりです。varbase ={ id: "base", toString:function(){ return this.id; }

var 派生 = object(base);
上記の関数を実行した後のオブジェクト モデルは次のとおりです。

このようなオブジェクト モデルを作成する方法は、原理も非常に単純です。オブジェクト関数を拡張するだけで、このモデルを描画できます。 、どのように絵を描くかは読者に任されています。
このタイプの継承はプロトタイプ継承と呼ばれます。比較的に、Pseudoclassical から継承するよりも簡単で便利です。このため、ECMAScript V5 では、開発者がプロ​​トタイプの継承を迅速に実装できるように、作成関数が追加されました。
上記の 2 つの継承メソッドは、JavaScript で最も一般的に使用される継承メソッドです。この記事の説明を通じて、JavaScript の OO プログラミングについてある程度の「原理」レベルの理解を得ることができます。

参考:
「JavaScript のプロトタイプと継承」
Advance Javascript (Douglas Crockford のビデオは必見です) 余談:
web2.0 以降、Web アプリケーションは HTML5 のリリースにより急速に発展しました。ブラウザの機能はブラウズです。ブラウザは、ブラウザほど単純なものではないと感じています。 JAVA 自体はクロスプラットフォームではないことについて、C の父親がこう言っていたのを覚えています。幸いなことに、今日のブラウザはそれ自体がプラットフォームです。ブラウザがプラットフォームの場合、ブラウザのセキュリティサンドボックスの制限により、パソコンのリソースはほとんど使用されないので、ブラウザはNC（ネットワークコンピュータ）のような感じでしょうか。私たちは実際に、Sun が当初提案したアイデアに戻りました。Sun は強力すぎるのですか?