JavaScriptでのゲッターとセッターの究極のガイド
ゲッター そして セッター に使用される機能またはメソッドです。 取得する そして セット 変数の値. ゲッターセッターの概念は コンピュータプログラミングに共通：ほとんどすべての高級プログラミング言語には、JavaSciptを含む、ゲッターとセッターを実装するための一連の構文が付属しています。.
この記事では、セッターとは何か、そしてどのようにするのかを見ていきます。 JavaScriptでそれらを作成して使用する.
ゲッターセッターとカプセル化
ゲッターとセッターのアイデアは常に言及されています カプセル化と組み合わせて. カプセル化は 二つの方法で理解.
まず、それはの設定です。 データゲッターセッター そのデータにアクセスして変更するトリオ。この定義は、検証などのいくつかの操作を実行する必要がある場合に役立ちます。 データに対して実行 それを保存または表示する前に - ゲッターとセッターはそれのための完全な家を提供します.
次に、どちらのカプセル化が行われるのかに応じて、より厳密な定義があります。 データを隠す, 他のコードからアクセスできないようにする, ゲッターとセッターを除く. このようにして私達は終わらない 誤って重要なデータを上書きする プログラム内の他のコードと一緒に.
ゲッターとセッターを作成する
1.メソッドとは
ゲッターとセッターは 基本的には機能 値を取得/変更するには、 複数の方法 それらを作成して使用します。最初の方法は、
var obj = foo： 'これはfooの値です'、getFoo：function（）return this.foo; setFoo：function（val）this.foo = val; console.log（obj.getFoo（））; // "これはfooの値です" obj.setFoo（ 'hello'）; console.log（obj.getFoo（））; // "こんにちは"
これは 最も簡単な方法 ゲッターとセッターを作成します。プロパティがあります フー そして2つの方法があります。 getFoo そして setFoo に 値を返して代入する その財産へ.
キーワードで
もっと “公式” ゲッターとセッターを作成するための堅牢な方法は、 取得する そして セット キーワード.
に ゲッターを作成する, 置きます 取得する キーワード getterメソッドとして機能する関数宣言の前に セット キーワード 同じように セッターを作成する. 構文は次のとおりです。
var obj = fooVal： 'これはfooの値です'、get foo（）return this.fooVal; foo（val）this.fooVal = val;を設定します。 console.log（obj.foo）; // "これはfooの値です" obj.foo = 'hello'; console.log（obj.foo）; // "こんにちは"
データは プロパティ名で格納 （fooVal）それは 違う getter-setterメソッドの名前からフー）getter-setterを保持するプロパティ データを保持できません 同様に.
どちらがいいですか?
キーワードを使ってゲッターとセッターを作成することを選択した場合は、 データを設定する代入演算子 そしてその データを取得するためのドット演算子, 通常のプロパティの値にアクセス/設定するのと同じ方法.
ただし、ゲッターとセッターをコーディングする最初の方法を選択した場合は、セッターメソッドとゲッターメソッドを呼び出す必要があります。 関数呼び出し構文を使う それらは典型的な関数だからです。 取得する そして セット キーワード）.
また、あなたが偶然に終わる可能性があります 他の値を代入する これらのgetter-setterメソッドを保持していたプロパティへの それらを完全に失う! 後の方法で心配する必要がないもの.
だから、あなたは私が言った理由を見ることができます 2番目の手法はより堅牢です.
上書き防止
何らかの理由で最初の方法を好む場合は、getter-setterメソッドを保持するプロパティを作成します。 読み取り専用 それらを作成することによって 使う Object.defineProperties. によって作成されたプロパティ Object.defineProperties, Object.defineProperty そして Reflect.defineProperty 自動設定 に 書き込み可能：false つまり 読み取り専用：
/ *上書き防止* / var obj = foo： 'これはfooの値です'; Object.defineProperties（obj、'getFoo'：value：function（）return this.foo;、 'setFoo'：value：function（val）this.foo = val;）; obj.getFoo = 66; // getFooは上書きされません。 console.log（obj.getFoo（））; //「これはfooの値です」
ゲッターとセッター内の操作
ゲッターとセッターを紹介したら、次に進むことができます。 データに対して操作を実行する 変更または返却する前に.
以下のコードでは、getter関数ではデータは 文字列と連結 返される前、およびsetter関数での検証 値が数値かどうか 更新前に実行されます n.
var obj = n：67、get id（）return 'IDは次のとおりです。' + this.n; id（val）if（typeof val === 'number'）this.n = val;を設定します。 console.log（obj.id）; // "IDは：67" obj.id = 893; console.log（obj.id）; // "IDは893です。" obj.id = 'hello'; console.log（obj.id）; //「IDは893です」
ゲッターとセッターでデータを保護する
これまでのところ、カプセル化の最初のコンテキストでのゲッターとセッターの使用について説明しました。 2番目に移動しましょう。 外部コードからデータを隠す ゲッターとセッターの助けを借りて.
保護されていないデータ
ゲッターとセッターの設定は、データがこれらのメソッドによってのみアクセスされ変更されることを意味しません。次の例では、 直接変更 ゲッターメソッドとセッターメソッドには触れずに
var obj = fooVal： 'これはfooの値です'、get foo（）return this.fooVal; foo（val）this.fooVal = val;を設定します。 obj.fooVal = 'hello'; console.log（obj.foo）; // "こんにちは"
セッターは使いませんでしたが データを直接変更したfooVal）. 最初に設定したデータ obj 今なくなっています！これを防ぐために（偶然に）、あなたは 何らかの保護が必要 あなたのデータのために。あなたはそれを追加することができます 範囲を限定する あなたのデータが利用可能な場所の。どちらでもできます ブロックスコープ または 関数スコープ.
1.ブロックスコープ
一つの方法は ブロックスコープを使う その中で、データを使用してデータが定義されます。 させて キーワード その範囲を制限する そのブロックへ.
A ブロックスコープ あなたのコードを配置することによって作成することができます 一対の中括弧の内側. ブロックスコープを作成するときはいつでも コメントを残す その上には、中括弧をそのままにしておくように頼むので、だれもそうしないでください。 中括弧を削除します 誤って、それらがコード内の余分な余分な中括弧であると考えている ラベルを追加する ブロックスコープへ.
/ *ブロック範囲、中括弧はそのままにしてください！ * / let fooVal = 'これはfooの値です'; var obj = get foo（）return fooVal; foo（val）fooVal = val fooVal = 'hello'; // console.log（obj.foo）ブロック内のfooValには影響しません。 //「これはfooの値です」
変更/作成 fooValブロック外 影響しません の fooVal ゲッターセッター内で参照.
2.関数スコープ
スコープを使用してデータを保護するためのより一般的な方法は、 関数内にデータを保持する そして オブジェクトを返す その関数のゲッターとセッターを使って.
function myobj（）var fooVal = 'これはfooの値です'; return get foo（）return fooVal; foo（val）fooVal = val fooVal = 'hello'; //元のfooValには影響しないvar obj = myobj（）; console.log（obj.foo）; //「これはfooの値です」
オブジェクト（ foo（） その中のgetter-setter）によって返されます myobj（） 機能は に保存されました obj, その後 obj に慣れている ゲッターとセッターを呼び出す.
3.スコープ指定なしのデータ保護
データが上書きされないように保護する方法もあります。 その範囲を限定することなく. その背後にある論理は次のようになります。呼び出されたものがわからない場合、どのようにしてデータを変更できますか。?
データに それほど簡単には再現できない変数/プロパティ名, その変数/プロパティ名に何らかの値を代入することによってそれを上書きしようとする者は誰もいません（私たちでさえ）。.
var obj = s89274934764： 'これはfooの値です'、get foo（）return this.s89274934764; foo（val）this.s89274934764 = val;を設定してください。 console.log（obj.foo）; //「これはfooの値です」
なるほど、それが一つの方法です。私が選んだ名前は本当に良いものではありませんが、あなたもすることができます ランダムな値や記号を使う このブログ記事でDerick Baileyによって提案されたとおりにプロパティ名を作成する方法。主な目的は データを隠しておく 他のコードから取得して、getterとsetterのペアにアクセスまたは更新させます。.
いつゲッターとセッターを使うべきか?
今度は大きな問題になります。ゲッターとセッターの割り当てを始めますか。 すべてのデータに 今?
もしあなたが〜なら データを隠す, それなら 他に選択肢はない.
しかし、他のコードから見たデータが問題ないのであれば、それでもゲッターセッターを使用する必要がありますか。 コードとまとめるためだけに それはそれにいくつかの操作を実行しますか？私は言うだろう はい. コード すぐに追加. 独自のgetter-setterを使用して個々のデータのマイクロユニットを作成する 一定の独立性を提供します コードの他の部分に影響を与えずに上記のデータを処理する.
