關於 JavaScript 的 Enumerate

前言

  最近在寫的時候需要用到 Enumerate ，需要瀏覽 Enumerate 的數值，遽然突然間忘記要怎麼瀏覽數值(values)，既然會忘記，就在此做個紀錄。

內容

  直接看範例

var Shape = {
  box : 0,
  circle : 1,
  triangle : 2
};
for(let ele in Shape) 
  console.log( `${ ele }:${ Shape[ele] }` );
//
for(const [key, value] of Object.entries(Shape) ) 
  console.log( `${ key }:${ value}`);

範例有兩個寫法，第一個寫法單純利用 for in 來取出每個 key ，在用 key 取值，雖然作法不優雅，但需要的 JavaScript 版本比較低，第二個寫法需要用到 for of ，整體看起來比較優雅，但要注意柳覽器是否有支援到  for of  語法。

參考資料

[ stackoverflow.com ] How do I enumerate the properties of a JavaScript object?

 關於 JavaScript 的 eval() 的直接喚起與間接喚起

前言

  最近發現 eval() 遽然有分直接喚起與間接喚起，雖然平常我不太用這個函式，但有時不得已還是要使用，所以就來做個學習，在此做個紀錄。

內容

  直接看範例，如下

var x = 'xxx';
function test(){
  var x = 'yyy';
  console.log( eval( 'x' ) );//'yyy'
  var f = eval;
  console.log( f( 'x' ) );//'xxx'
  console.log( ( 0 , eval )( 'x' ) );//'xxx'
  
}
test();

範例第一次和喚起 eval() 會顯示"yyy"，這點跟認知的一樣，也被稱為"直接喚起"，那間接喚起呢?

可以看到事先用一個變數賦值 eval 後，再透過該變數來喚起 eval() ，這樣的結果遽然不一樣!可以看到結果遽然顯示"xxx"，也就是顯示的是 global 變數，而非 local 變數，間接喚起還有一個特殊的寫法，也就是"( 0 , eval )"，這個語法可以在  [ developer.mozilla.org ] eval() 裡找到，和上述利用變數賦值 eval 的結果會一樣，這個語法可以不用再宣告變數，相當方便。請注意，範例的宣告都是用 var 來宣告，如果改成 let 的話就永遠只會顯示 local 變數，也就是如果程式碼已經習慣用 let 來宣告的話，那直接喚起與間接喚起沒差。

參考資料

[ developer.mozilla.org ] eval()

 Javascript 的 class 繼承的注意事項

前言

  在上一次的 完整的 JavaScript 使用 Class 的範例 沒提到繼承相關的語法，由於本身設計的習慣不太愛用繼承的特性，但最近抽空研究一下繼承，法現有的特性跟我想的不一樣，在此做個紀錄。

內容

  先看範例，如下

class BaseClass{
  call(){
    console.log('I am BaseClass' );
  }
}
class ExClass extends BaseClass{
  call(){
    console.log('I am ExClass' );
  }
}
class ExClass1 extends ExClass{
  call(){
    //Follow code will failed!
    //super.super.call();
    //
    super.call();
    console.log('I am ExClass1' );
  }
}
let a = new ExClass1();
a.call();

範例的繼承關係很簡單，BaseClass -> ExClass -> ExClass1 ，單純的喚起 call() ，因為繼承的關係會發生 override ，要喚起父類別可以透過 super ，但如果企圖從 ExClass1 喚起 BaseClass 的話這是不允許的!本以為可以透過 super.super 的方式來達成，但實際實驗卻是會有錯誤，這意思是 JavaScript 無法跨過兩次以上的繼承，雖然實務上應該不太會碰到，但還是要注意一下。

參考資料

[ developer.mozilla.org ] super

相關文章與資料

完整的 JavaScript 使用 Class 的範例

完整的 JavaScript 使用 Class 的範例

前言

  在之前的 Javascript 開始在 Class 裡支援 private method 講述了 private method 的使用，但由於我個人不常用 class 語法，所以就想要留一個範例寫法，在此做個紀錄。

內容

  直接看範例

class MyClass{
  static #staticVariable = 'I am static variable.';
  constructor(){
      this._name = 'I am MyClass';
  }
  //property
  get name(){
    return this._name;
  }
  set name(name){
    this._name = name;
  }
  //public method
  publicMethod(){
    console.log('I am public method.');
  }
  //private method
  #privateMethod(){
    console.log('I am private method.');
  }
  //static method
  static staticMethod(){
    console.log('I am static method.');
  }
}

先看到 static variable 的寫法，這裡有用到 private 的語法，意外的遽然可以用，在 class 裡可以給預設值，再透過 static method 來提取或操作，這是常見的用法，如果不需要唯讀屬性的話可以移除"#"。 getter 與 setter 的語法相當簡單好懂，但不知為什麼並不能搭配 static 來使用，所以static variable 還是要透過 static method 來提取。public method 與 private method 在 Javascript 開始在 Class 裡支援 private method 已經提過了就不再講述。static method 語法簡單，只需加"static "即可。

參考資料

[ developer.mozilla.org ] getter

[ developer.mozilla.org ] setter

相關文章與資料

Javascript 開始在 Class 裡支援 private method

 Javascript 開始在 Class 裡支援 private method 

前言

  最近查找資料時發現 Javascript 開始在 Class 裡支援 private method ，實驗了一下發現 Chrome 與 Firefox 更新到最新的版本都可以支援，之前對 Class 的語法很介意它不支援 private method ，所以就不怎麼愛用，現在這個問題沒了，就順便鎮這個機會做個學習，在此做個紀錄。

內容

  先看以下範例

class MyClass {
  publicMethod() {
    console.log("I am public method.");
  }
  #privateMethod() {
    console.log("I am private method.");
  }
  callAllMethod() {
    this.publicMethod()
    this.#privateMethod();
  }
}

let people = new MyClass();
people.callAllMethod();

private method 的語法異常的簡單，只需在 method 的前面加上"#"來區隔，但要注意的是喚起時也需要"#"來喚起，不能直接打名稱，這樣以後就可以捨棄用閉包的做法來完成 private method 。

參考資料

[ dev.to ] New Features in ECMAScript 2021 (with code examples)