JavaScript のカプセル化を理解する-jsチュートリアル-php.cn

JavaScript のカプセル化を理解する

PHPz

リリース： 2018-10-13 17:35:00

オリジナル

1532 人が閲覧しました

カプセル化は、オブジェクトの内部データ表現と実装の詳細を隠すこととして定義できます。情報の隠蔽はカプセル化によって強制できます。

JavaScript には、プライベートメンバーを宣言するための明示的なキーワードはありません。したがって、カプセル化/情報隠蔽を実現したい場合は、別のアイデアから始める必要があります。クロージャの概念を使用して、オブジェクト内からのみアクセスできるメソッドとプロパティを作成し、カプセル化要件を達成できます。

基本的なメソッド

一般的に言えば、カプセル化の目的を達成するために 3 つのメソッドを使用することを学びます。

this.XXX を使用して変数を宣言し、getXXX、setXXX などの値の取得および代入メソッドを宣言します。
this._XXX を使用して変数を宣言し、getXXX、setXXX などの値の取得および代入メソッドを宣言します。
これを行うには、「関数スコープ」の概念を使用します。

1. ポータルを開きます

var Book = function(isbn,title,author){
 this.setIsbn(isbn);
 this.setTitle(title);
 this.setAuthor(author);
};

Book.prototype = {
 setIsbn: function(isbn){
  this.isbn = isbn;
 },
 getIsbn: function(){
  return this.isbn;
 },
 setTitle: function(title){
  this.title = title;
 },
 getTitle: function(){
  return this.title;
 },
 setAuthor: function(author){
  this.author = author;
 },
 getAuthor: function(){
  return this.author;
 }
};

ログイン後にコピー

カプセル化を実現するには、このメソッドを使用します。ただし、評価者と割り当て者はプライベートプロパティを保護するために実装されています。ただし、実際の使用においては、プライベートプロパティには外部からアクセスできるため、基本的にカプセル化は実装されていません。

2. 命名規則を使用して区別する

var Book = function(isbn,title,author){
 this.setIsbn(isbn);
 this.setTitle(title);
 this.setAuthor(author);
};

Book.prototype = {
 setIsbn: function(isbn){
  this._isbn = isbn;
 },
 getIsbn: function(){
  return this._isbn;
 },
 setTitle: function(title){
  this._title = title;
 },
 getTitle: function(){
  return this._title;
 },
 setAuthor: function(author){
  this._author = author;
 },
 getAuthor: function(){
  return this._author;
 }
};

ログイン後にコピー

最初の類似のメソッドでこのメソッドを使用しますただし、プライベートプロパティの使用を保護するために異なる名前が使用される点が異なります。ただし、実際のアプリケーションの観点からは、まだカプセル化が実装されていません。

3. 関数スコープの使用

var Book = function(newIsbn,newTitle,newAuthor){
 var isbn,title,author;

 this.setIsbn=function(newIsbn){
  isbn = newIsbn;
 };
 this.getIsbn=function(){
  return isbn;
 };
 this.setTitle=function(newTitle){
  title = newTitle;
 };
 this.getTitle=function(){
  return title;
 };
 this.setIsbn=function(newAuthor){
  author = newAuthor;
 };
 this.getIsbn=function(){
  return author;
 };
}

ログイン後にコピー

は JavaScript 関数で宣言されます変数はスコープされます, したがって、このメソッドを使用すると、外部からプライベートプロパティへの直接アクセスが回避されます。基本的にはパッケージ化に必要な内容を実現します。

ここで注目すべきは、this.XXX と var を使用して関数内で変数を宣言できることです。違いは、this.XXX を使用して宣言された変数は外部からアクセスできることです。 var を使用して宣言された変数は関数スコープによって保護され、関数の外部から直接アクセスすることはできません。

4. 関数スコープの変換を使用します。

var Book = (function(){
 // ...其他静态方法

 return function(newIsbn,newTitle,newAuthor){
  var isbn,title,author;

  this.setIsbn=function(newIsbn){
   isbn = newIsbn;
  };
  this.getIsbn=function(){
   return isbn;
  };
  this.setTitle=function(newTitle){
   title = newTitle;
  };
  this.getTitle=function(){
   return title;
  };
  this.setIsbn=function(newAuthor){
   author = newAuthor;
  };
  this.getIsbn=function(){
   return author;
  };
 };
})();

ログイン後にコピー

このメソッドは、次のメソッドを直接返します。コンストラクター。ここでのコンストラクターはインライン関数です。

このメソッドの利点は、「メモリ内にコピーが 1 つだけ存在することです。他の静的メソッドはコンストラクターの外部で宣言されるため、特権メソッドではありません。」

メソッドを判断することです。静的メソッドとして設計するかどうかの原則は、「このメソッドがプライベートプロパティにアクセスするかどうか」です。必要ない場合は、コピーが 1 つだけ作成されるため、静的メソッドとして設計する方が効率的です。

定数
定数を実装するには、「ゲッターのみ、アサイナーなし」アプローチを使用できます。

// 1.
var Book = function(){
 var constants = ["key1": "1","key2": "2","key3": "3"];

 this.getConstant = function(key){
  return constants[key];
 };
};

Book.getConstant("key1");

// 2.
var Book = (function(){
 var constants = ["key1": "1","key2": "2","key3": "3"];

 var con = function(){};
 con.getConstant = function(name){
  return constants[name];
 };

 return con;
})();

Book.getConstant("key1");

ログイン後にコピー

長所と短所

長所

カプセル化により内部データの整合性が保護されます。
カプセル化により、モジュール間の結合が弱まり、オブジェクトの再利用性が向上します。名前空間の競合;
...

2. 欠点は複雑な処理に関連する必要があります。スコープチェーンによりエラーのスケジュールが難しくなります。

過剰なカプセル化が発生しやすくなります。

JavaScript はカプセル化をネイティブにサポートしていないため、JavaScript でのカプセル化の実装には複雑さの問題があります。

上記は次のとおりです。この記事の内容全体が皆さんの学習に役立つことを願っています。

【おすすめ関連チュートリアル】

1. JavaScript ビデオチュートリアル

2. JavaScript オンラインマニュアル

3.ブートストラップチュートリアル