Javascript オブジェクト指向プログラミング (1) encapsulation_js オブジェクト指向

JavaScript を学ぶ上で最も難しいことは何ですか?

オブジェクトが一番難しいと思います。 Javascript のオブジェクト モデルは非常に独特で他の言語とは異なるため、初心者が習得するのは簡単ではありません。

以下は私の学習メモです。この部分の学習に役立つことを願っています。主に
次の 2 冊の本を参照しました:

《オブジェクト指向JavaScript》（オブジェクト指向JavaScript）

《JavaScript 上級プログラミング (第 2 版)》（Web 開発者のためのプロフェッショナル JavaScript 第 2 版）

これらはすべて優れた Javascript の本なので、一読をお勧めします。

ノートは 3 つの部分に分かれています。今日の第 1 部は「カプセル化」について説明し、 第 2 部 と 第 3 部 では「継承」について説明します。

============================

JavaScript オブジェクト指向プログラミング (1): カプセル化

著者: Ruan Yifeng

JavaScript はオブジェクトベースの言語であり、遭遇するほとんどすべてがオブジェクトです。ただし、構文にクラスがないため、真のオブジェクト指向プログラミング (OOP) 言語ではありません。

それでは、「プロパティ」と「メソッド」をオブジェクトにカプセル化したい場合、またはプロトタイプ オブジェクトからインスタンス オブジェクトを生成したい場合は、どうすればよいでしょうか?

1. オブジェクトの元のモードを生成します

猫を「名前」と「色」の 2 つの属性を持つオブジェクトとみなしたとします。

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

var Cat = {
name: '',
color : ''
}

ここで、このプロトタイプ オブジェクトに基づいて 2 つのインスタンス オブジェクトを生成する必要があります。

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

var cat1 = {}; // 作成します。空のオブジェクト
cat1.name = "大马"; // プロトタイプオブジェクトの属性に従って値を割り当てます
cat1.color = " yellow"
var cat2 = {}; 🎜> cat2.name = "Ermao";
cat2.color = "Black";

これが最も単純なカプセル化です。ただし、この書き方には 2 つの欠点があります。1 つは、より多くのインスタンスが生成される場合、作成が非常に面倒になることです。2 つ目は、インスタンスとプロトタイプ間の接続を確認する方法がありません。

2. オリジナルモードの改善
コードの重複の問題を解決する関数を書くことができます。

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

function Cat(name,color){
return {in in us in us in us us us us us us us can us can us can us us us may us in：🎜>


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

var cat1 = Cat("Big Hair","Yellow")
var cat2 = Cat("Ermao","Black") );

このメソッドの問題は、依然として cat1 と cat2 の間に本質的な接続がなく、それらが同じプロトタイプ オブジェクトのインスタンスであることを反映できないことです。 3. コンストラクター パターン プロトタイプ オブジェクトからインスタンスを生成する問題を解決するために、JavaScript はコンストラクター パターンを提供します。 いわゆる「コンストラクター」は実際には通常の関数ですが、this 変数は内部で使用されます。コンストラクターで new 演算子を使用するとインスタンスが生成され、this 変数はインスタンス オブジェクトにバインドされます。

たとえば、cat プロトタイプ オブジェクトは次のように記述できます。

コードをコピーします

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

function Cat(name,color){
this.name=name;
this.color=color;

今すぐ生成できますインスタンスオブジェクト。

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

var cat1 = new Cat("Big Hair ","Yellow ");
var cat2 = new Cat("二毛","black");
alert(cat1.name); // Big Cat
alert(cat1.color); / / Yellow

この時点で、cat1 と cat2 には、コンストラクターを指すコンストラクター属性が自動的に含まれます。

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

alert(cat1.constructor == Cat) ; // true
alert(cat2.constructor == Cat); //true

JavaScript は、プロトタイプ オブジェクトとインスタンス オブジェクトの間の関係を検証するための instanceof 演算子も提供します。

コードをコピーします コードは次のとおりです。 true Alert(cat2instanceof Cat); //true

4. コンストラクター パターンの問題

コンストラクター メソッドは使いやすいですが、次のような問題があります。メモリの浪費の問題。
見てください。不変属性「type」(タイプ) を Cat オブジェクトに追加し、メソッド Eat (マウスを食べる) を追加します。次に、プロトタイプ オブジェクト Cat は次のようになります:


コードをコピー

コードは次のとおりです: function Cat(name,color){ this.name = name;

this.type = "ネコ";

this.eat = function(){ ("マウスを食べる");};
}


同じメソッドを使用してインスタンスを生成します:

コードをコピー

コードは次のとおりです。 var cat1 = new Cat("Big Hair","Yellow") var cat2 = new Cat ("Er Hair") ","Black" "); alert(cat1.type); // 猫

cat1.eat(); // 表面的にはネズミを食べるようです問題ありませんが、実は大きな欠点があります。つまり、インスタンス オブジェクトごとに、type 属性と Eat() メソッドの内容はまったく同じになります。インスタンスが生成されるたびに、繰り返しの内容のためにより多くのメモリを占有する必要があります。これは環境に優しくも効率的でもありません。

alert(cat1.eat == cat2.eat); //false
type 属性と Eat() メソッドをメモリ内で 1 回だけ生成し、その後はすべてのインスタンスがそのメモリ アドレスを指すようにすることはできますか?答えは「はい」です。

5. プロトタイプ モード

JavaScript では、各コンストラクターが別のオブジェクトを指すプロトタイプ属性を持つことを規定しています。このオブジェクトのすべてのプロパティとメソッドは、コンストラクターのインスタンスによって継承されます。

これは、これらの不変のプロパティとメソッドをプロトタイプ オブジェクトに直接定義できることを意味します。



コードをコピー

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

function Cat(name,color){ this .name = 名前; This.color = color; Cat.prototype.type = "ネコ"; Cat.prototype.eat = function(){alert(" Eat Mouse")};

次にインスタンスを生成します。




コードをコピー

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

var cat1 = new Cat("Big Hair ","Yellow "); var cat2 = new Cat("二毛","黑"); alert(cat1.type); // 猫 cat1.eat(); // 食べるMouse このとき、すべてのインスタンスの type 属性と Eat() メソッドは実際には同じメモリ アドレスであり、プロトタイプ オブジェクトを指すため、動作効率が向上します。

alert(cat1.eat == cat2.eat); //true

6. プロトタイプモード検証メソッド

6.1 isPrototypeOf()
このメソッドは、特定のプロトタイプ オブジェクトとインスタンスの間の関係。

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

alert(Cat.prototype.isPrototypeOf(cat1)); //true
alert(Cat.prototype.isPrototypeOf(cat2)); //true

6.2 hasOwnProperty ()
各インスタンス オブジェクトには hasOwnProperty() メソッドがあり、特定のプロパティがローカル プロパティであるか、プロトタイプ オブジェクトから継承されたプロパティであるかを判断するために使用されます。

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

alert(cat1.hasOwnProperty("name") )); // true
alert(cat1.hasOwnProperty("type")); // false

6.3 演算子
がインスタンスに含まれているかどうかを判断するために使用できます。ローカルかどうかに関係なく、属性。

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

alert("name" in cat1); // true
alert("type" in cat1); // true

in 演算子は、オブジェクトのすべてのプロパティを調べるために使用することもできます。
for(var prop in cat1) {alert("cat1[" prop "]=" cat1[prop]); }
まだ終わっていません。このシリーズの第 2 部「 コンストラクター」を読み続けてください。継承 」と 3 番目の部分「非コンストラクター関数の継承 」。

(終了)