なぜgettersとsetters関数を使うのか

ゲッターとセッター機能は、総称してアクセッサ機能として知られています.前の2つの記事で、私はどのように作成したかについて話しました mix なぜなら、getterとsetter関数を使いたかったからです.
しかし、なぜゲッターとセッターも最初に使うのですか?

理由は二つある.

構文上の理由

カプセル化

構文上の理由

配列の長さを取得しようとすると、array.length . このlength プロパティは、getter関数のように動作します.それはリアルタイムであなたに値を返します.
If length 単純なプロパティです.length 配列に何個の項目を追加しても、残ります.以来length 配列の長さに応じて値を変更するlength 単純なプロパティではありません.
どうかわかりませんlength がgetter関数です.それはどこにも文書化されていなかったが、私はそれを疑う.
使用しているのでarray.length (ゲッター関数のように動作する)値を取得するには、値を取得するために他のgetter関数を使用しないでください.我々はすでにこの構文に精通しています.
たとえば、カルーセルを持っていると言うと、現在のスライドを取得します.次の2つのオプションがあります.

通常の関数を作成する

getter関数を作成する

以下にコードがどのようになるかを示します.

const carousel = {
  // Option 1: Normal function
  getCurrentSlide () {/* ... */},

  // Option 2: Getter function
  get currentSlide () {/* ...*/}
}

まず、getter関数を定義する余分な仕事がないことがわかります.では、なぜ1を作成しないのですか?
第二に、getter関数を使用する場合は、プロパティを呼び出して使用します.通常の関数を使用する場合は、括弧を書くことでメソッドを呼び出す必要があります.

// Normal function
const currentSlide = carousel.getCurrentSlide()

// Getter function
const currentSlide = carousel.currentSlide

私はゲッター機能のバージョンは、初心者、ターサー、理解しやすいと思います.それは、私により意味をなします.
フリップ側では、通常の関数の代わりにsetter関数を使用することもできます.

// Normal function
carousel.setCurrentSlide(4)

// Setter function
carousel.currentSlide = 4 // Uses a Setter function

繰り返しますが、セッター機能バージョンは私にぴったりです.私は既にこの構文に慣れています= .
さて、キーはコードの意図を伝えるために使用getterとsetter関数です.

ゲットゲッター

セッター

方法は残りを行う

このセットの設定を取得すると、getterとsetter関数で書かれたコードが解析されやすくなります.
値を取得し、値を設定し、プロセスを実行する例を示します.

const value = object.getValue() // Gets value
object.setValue(5) // Sets value
object.method() // Runs a process

そして、ゲッターとセッター機能で同じバージョンは、ここにあります.

const value = object.value // Getter
object.value = 5 // Setter 
object.method() // Runs a method

どれがあなたにより明確ですか?私にとって、ゲッターとセッターバージョンはそうです.
ゲッターセットとセッターを使用すると、そのコード行が値を取得しているかどうか、値を変更するか、プロセスを実行するかどうかを確認しやすくなります.あなたも、あなたが書いたものの詳細に注意を払う必要はありません.
はい、それは小さいことです.しかし、小さいものは増します.それが追加すると、それは主要な頭脳を節約できます.

カプセル化

つ目の理由は、安全なコードを作成する能力です.
あなたが車を持っているとしましょう.車に燃料がある.車が工場から出るとき、それは50リットルの燃料を持っています.

function Car () {
  const fuel = 50
}

車は、彼らが残っているどのくらいの燃料を知る必要があります.つの方法は、燃料プロパティ全体を公開することです.

function Car () {
  const fuel = 50
  return {
    fuel
  }
}

const car = Car() 
console.log(car.fuel) // 50

しかし、あなたが露出するときfuel プロパティこの方法では、ユーザーが変更を行うことができますfuel 制限なしで.
車の燃料の容量が100であるとしましょう.彼らは任意の量を追加することができますし、車を破る.

car.fuel = 3000
console.log(car.fuel) // 3000

あなたがゲッター機能を使用するならば、彼らはこれを変えることができませんfuel プロパティ.

function Car () {
  const fuel = 50
  return {
    get fuel () { return fuel } 
  }
}

const car = Car() 
car.fuel = 3000
console.log(car.fuel) // 50

これをさらに押しましょう.
あなたがセッター機能を使用するならばfuel , 可能な制限の保護ガードを作成できます.ここでは車の燃料が100を超えないことを確認します.

function Car () {
  let fuel = 50
  return {
    get fuel () { return fuel } 
    set fuel (value) {
      fuel = value
      if (value > 100) fuel = 100
    }
  }
}

const car = Car()
car.fuel = 3000
console.log(car.fuel) // 100

つまり、二つの理由からゲッターセッター関数が好きです.

構文上の理由アクセサ関数で作成されたコードを読みやすくし、高速化する

カプセル化.アクセサー関数でより安全なコードを作成できます.

それだ!
読書ありがとう.この記事はもともと投稿されたmy blog . サインアップするmy newsletter あなたがより良いフロントエンド開発者になるために、より多くの記事が欲しいならば.