[CleanCode JS]オブジェクト&データ構造

10367 ワード
cleancode JavaScript テキストリンク

オブジェクトとデータ構造


getterとsetterの使用
  • オブジェクト属性以外のコンテンツを取得したい場合は、すべてのアクセス者をコードで検索して置き換える必要はありません.
  • setの場合、検証ロジックを追加してコードを簡単にします.
  • 内部APIをカプセル化可能
  • getting科settingの場合、彼を見つけたり、エラー処理をしたりしやすい.
  • サーバからオブジェクト属性を取得した場合、ロードを遅らせることができます.
    • // bad
function makeBankAccount() {
  // ...

  return {
    // ...
    balance: 0
  };
}

const account = makeBankAccount();
account.balance = 100;

// good
function makeBankAccount() {
  // private으로 선언된 변수
  let balance = 0;

  // 아래 return을 통해 public으로 선언된 "getter"
  function getBalance() {
    return balance;
  }

  // 아래 return을 통해 public으로 선언된 "setter"
  function setBalance(amount) {
    // ... balance를 업데이트하기 전 검증로직
    balance = amount;
  }

  return {
    // ...
    getBalance,
    setBalance
  };
}

const account = makeBankAccount();
account.setBalance(100);

    1.オブジェクトのプライベートメンバーを作成します。


    :エンクロージャを使用可能
    // bad
const Employee = function(name) {
  this.name = name;
};

Employee.prototype.getName = function getName() {
  return this.name;
};

const employee = new Employee('John Doe');
console.log(`Employee name: ${employee.getName()}`); // Employee name: John Doe
delete employee.name;
console.log(`Employee name: ${employee.getName()}`); // Employee name: undefined

// good
function makeEmployee(name) {
  return {
    getName() {
      return name;
    },
  };
}

const employee = makeEmployee('John Doe');
console.log(`Employee name: ${employee.getName()}`); // Employee name: John Doe
delete employee.name;
console.log(`Employee name: ${employee.getName()}`); // Employee name: John Doe
    注意:Githubのリンク
    vimrcバックアップ
    210413