理解 class 用法和 get set 的使用

說明

• 瞭解 es6+ 的 class 的使用
• 瞭解其中 set 和 get 的使用狀況
• 適用：es6+ 初學者

class es7 類的使用

一 class extends super

• class 聲明建立一個基於原型繼承的具備給定名稱的新類。 你也能夠使用類表達式定義類。可是不一樣於類表達式，類聲明不容許再次聲明已經存在的類，不然將會拋出一個類型錯誤。

• 申明一個類，Polygon, 而後 Square 來繼承 Polygon，只能在構造函數中使用 super()。而且必須在使用 this 關鍵字前調用。

使用 extends 建立子類/ super 關鍵字用於調用對象的父對象上的函數。

class Cat { 
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

class Lion extends Cat {
  speak() {
    super.speak();
    console.log(this.name + ' roars.');
  }
}
複製代碼

static 靜態方法

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    static distance(a, b) {
        const dx = a.x - b.x;
        const dy = a.y - b.y;

        return Math.hypot(dx, dy);
    }
}

const p1 = new Point(5, 5);
const p2 = new Point(10, 10);

console.log(Point.distance(p1, p2));
複製代碼

二 get 的使用

• get語法將對象屬性綁定到查詢該屬性時將被調用的函數。

var obj = {
  log: ['a', 'b', 'c'],
  get latest() {
    if (this.log.length == 0) {
      return undefined;
    }
    return this.log[this.log.length - 1];
  }
}

console.log(obj.latest);
// expected output: "c"
console.log(obj)
// {
// latest: "c"
// log: ["a", "b", "c"]
// }
複製代碼

• 從👆能夠看到 latest 在初始化的時候已經被運行了，latest 做爲 obj 的一個屬性來計算後展現，找到了 log 數組的最後一個值

• 使用狀況(在每次登錄的時候自動的去檢測是否登錄)

class login {
    //token存儲的鍵值
    static TOKEN_KEY = 'geqwrgfboiadsad';
    
    // 在每次使用這個 class security 的時候 會調用 hasLogin() 來判斷是否登陸 
    get hasLogin() {
        return this.currentUser !== null;
    }
    
    async signup(params) {
        return await http.post(API.signup(), params, {
            noToken: true
        });
        //！！！step1註冊只返回邀請碼，添加登陸後需再localStorage存儲用戶信息
    }
}
複製代碼

get 的使用狀況，get 能夠在類初始化的使用直接運行，而後做爲類的一個屬性來使用

三 set 的使用

• 當嘗試設置屬性時，set語法將對象屬性綁定到要調用的函數。

var language = {
  set current(name) {
    this.log.push(name);
  },
  log: []
}

language.current = 'EN';
language.current = 'FA';

console.log(language.log);
// expected output: Array ["EN", "FA"]
複製代碼

• set能夠自動的更改自身屬性

delete 操做符

delete obj.lastest
// 這樣能夠刪除 getter
複製代碼

defineProperty 在現有對象定義 getter 和 setter

var o = { a:0 }

Object.defineProperty(o, "b", { get: function () { return this.a + 1; } });

console.log(o.b) // Runs the getter, which yields a + 1 (which is 1)

// get
// ------------
// set

var o = { a:0 };

Object.defineProperty(o, "b", { set: function (x) { this.a = x / 2; } });

o.b = 10; // Runs the setter, which assigns 10 / 2 (5) to the 'a' property
console.log(o.a) // 5
複製代碼