ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript 設計パターンの 1 つであるカプセル化

JavaScript 設計パターンの 1 つであるカプセル化

高洛峰
リリース: 2016-11-25 11:03:01
オリジナル
1069 人が閲覧しました

C# と Java に精通している人は、オブジェクト指向の 3 つの主要な概念 (カプセル化、継承、ポリモーフィズム) を理解する必要があります。今日は Javascript でのカプセル化の機能の使用方法について話したいと思います。

現実のいくつかの物をクラスに抽象化し、その物の属性 (名詞) をクラスのプロパティとして使用し、物の動作 (動詞) をクラスのメソッドとして使用します。オブジェクト指向言語 (C# など) では、クラスまたはプロパティを変更するためのキーワードがいくつかあります (Private、public、protect)。これらのキーワードはアクセス許可を記述するため、詳細は説明しません。

JavaScript の変更可能な性質を見てみましょう (前回の例を引き続き使用しています):


var Man = function (name, age) { this.Name = name this.Age = age; } var 人 = new Interface("人", ["GetName", "GetAge"]); Man.prototype = { GetName: function () { return this.Name }, GetAge: function () { return this.Age; ; } } var Alan = new Man("Alan", 25);alert(Alan.GetAge()); Alan.DisplayAll = function () { return "名前: "+this.GetName() + "; 年齢: " + this. GetAge() }alert(Alan.DisplayAll());


最初に、2 つのパブリック フィールド (このブログで詳しく説明します。読み続けてください) ) と 2 つのパブリック メソッドを持つクラス (JavaScript の匿名メソッド) を作成しました。インスタンス - Alan を作成しましたが、このインスタンスに DisplayAll メソッドを動的に追加できるのは、JavaScript の柔軟性のおかげだと思います。

ここで、JavaScript の可変性により、多くのプログラマがこのコードを使用したい場合、プログラマはインスタンス化後に Name の値を変更することができ、初期化アクションは無意味になります:


var Alan = new Man( "Alan", 25); Alan.Name = "Alice"; // 悲劇、私がアラートを出したとき、私はアリスになりました。このフィールドを Private に変更すれば問題ありません。ただし、JavaScript にはこのキーワードがないので、これを行う必要があります。これがこのブログの存在意義です

他に何ができるかを考えてみましょう。 Private を設定する以外に C# を使用しますか? Setter メソッドと Getter メソッドを設定できます。

上記のコードを変更しましょう: メソッド 1 を呼び出してみましょう:

var person = new Interface("person", ["SetName", "SetAge", "GetName", "GetAge"]); var Man = function (名前、年齢) { this.SetAge(name); Man.prototype = { SetName: function (name) { this.Name = name }, SetAge: function (age) { this .Age = age; }, GetName: function () { return this.Name; }, GetAge: function () { return this "Alice"; 警告したとき、私は Alan.SetAge(10) になりました。 ;//誰かが私をこんなに若くしたのは悲劇です。alert(Alan.GetName()); function () { return "Name: "+this.GetName() + "; Age: " + this.GetAge() } alert(Alan.DisplayAll());


これは C# の Setter や Getter によく似ていますが、外部から変更できることがわかりました。ただし、制約の観点からは、初期値をメソッドで設定するコードよりも優れていると思われます。しかし、問題はまだ解決されていません。次のメソッドを見てみましょう: クロージャ

//パーミッション (パブリック) は Javascript の This キーワードを通じて開発されることを説明する必要があります。

クロージャについて話す前に、クロージャの本質を理解する必要があります。JavaScript では、メソッド内で宣言された変数に外部からアクセスできない場合、メソッドのみがスコープを持ちます。その場合、Private の概念が登場します。


var person = new Interface("person", ["SetName", "SetAge", "GetName", "GetAge"]); var Man = function (newname, newage) { var name, age this.SetName; = function (newname) { name = newname; } this.SetAge = function (newage) { age = newage; } this.GetName = function () { return name; } this.GetAge = function () { return name; .SetAge(newage); This.SetName(newname); var Alan = new Man("Alan", 25); // 現在、名前は変更できません。 SetAge(10); //悲劇、他の人が私にそのような年齢の警告を与えました(Alan.GetAge());


これでプライベート関数が実装されました。Var を使用して This を置き換えるだけです。 //上記の this.SetName や this.SetAge など、パブリックでプライベートにアクセスできるメソッドを呼び出します。

パブリック メソッドがプライベート フィールドへのアクセスを含まない場合は、それらをプロトタイプに置くことができます。 //利点は、複数のインスタンスがある場合、メモリ内にコピーが 1 つだけ存在することです


Man.prototype.DisplayAll = function () { return "Name: " + this.GetName() + "; Age: " + this.GetAge () }


笑~もう少し難しいものを見てみましょう:静的な変数とメソッドです

静的なものがクラス (Class) に属していることは誰もが知っています。上記のコードを変更しましょう:


var person = new Interface("person", ["SetName", "SetAge", "GetName", "GetAge","GetCount"]); var Man = (function () { var count = 0; return function ( newname, newage ) { var name, age; this.SetName = function (newname) { name = newname; } this.SetAge = function (newage) { age = newage; } this.GetName = function () { return name; This.GetAge = function () { return age; } this.GetCount = function () { return count; } this.SetName(newname); })(); DisplayAll = function () { return "名前: " + this.GetName() + "; 年齢: " + this.GetAge() } var Alan1 = new Man("Alan", 25); var Alan2 = new Man(" Alan", 25); alert("Man の "+Alan2.GetCount()+" インスタンスがあります" );


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