Programming

為什麼要知道JavaScript Prototype?

我好久以前只知道JavaScript有prototype這東西，但完全不知道為什麼要用它建立物件？今天終於知道，原來prototype可以用來「避免讓物件的method被重複建立」。可以想像嗎？我們不斷用new operator建立物件，做了上百個instances出來，結果裡面的method全都是複製出來的，佔了一堆記憶體。我有reuse code啊？每個instances的method都是由constructor function建立出來的，沒有重寫，也沒有複製貼上啊？問題到底出在哪呢？舉例來說，我們先來看看下面這段code：

Read More

Programming

How JavaScript Functions Created?

原來我以前也不知道，JavaScript engine下載完JavaScript文件，還要先掃一次，再run一次？Function有兩種建立方式？其實，function declaration跟function expression是很有用的！弄懂它們背後如何運作，應該可以為寫code生活帶來不少便利性。Function的兩種定義方式到底長什麼樣子呢？先直接來看看下面兩段程式碼：

Read More

Programming

JavaScript的New Operator背後做了些什麼？

以前都不知道，原來我們用new operator來呼叫constructor function，JavaScript engine會做下面幾件事：

  1. 先建立一個空物件，這個空物件會存在記憶體裡
  2. 然後把this指派給這個空物件。this其實是指向這個空物件，讓constructor function body可以用的東西，通常會被用來新增物件的屬性，例如：
    1
    2
    3
    4
    5
    function Dog(name, age, weight) {
      this.name = name; // Uses this keyword to initialize object property "name"
      this.age = age;
      this.weight = weight;
    }
  3. 接著，JavaScript engine會呼叫constructor function，把參數指派進去
  4. 執行constructor function body，讓程式碼來擴充物件的屬性
  5. 最後讓執行完的constructor function回傳this出來，讓JavaScript programmer決定要怎麼使用它。例如把它放到變數裡存起來：
    1
    let jack = new Dog("Jack", 5, 7);

學到這些感覺很新鮮，以後看到new operator時就知道，它背後是如何運行了。