Function Constructor example

var Person = function(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
}

var sui = new Person('sui', 19, 'student')

Inheritance example

// add function calculateRetire in Person
var Person = function(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.calculateRetire = function(){
        console.log(65 - this.age)
    }
}

var sui = new Person('sui', 19, 'student')

// call function calculateRetire by object sui
sui.calculateRetire();

// output: 46

Inheritance in prototype example

// remove function calculateRetire from constructor
var Person = function(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
}

// set function calculateRetire
Person.prototype.calculateRetire = 
    function(){
    console.log(65 - this.age)
}

var sui = new Person('sui', 19, 'student')

sui.calculateRetire();

// output: 46

以上兩個寫法都能夠透過 Person new 出來的新物件都能繼承 calculateRetire，
但透過 class 創建的 function 不能被重用，但如果是透過 prototype 進行繼承，就能夠被共用，
也就是說如果將 prototype 拉出來寫，並定義新的類 Animal，Animal也能透過 prototype 進行繼承

prototype -> calculateRetire
constructor -> Person、Animal (prototype 指向 calculateRetire)
instance -> new Person、new Animal (prototype 指向 calculateRetire)

透過 Object.create 實踐 prototype 共用

// create prototype
var personPototype = {
    calculateRetire: function(){
        console.log(65 - this.age);
    }
}

// create object and inheritance
var sui = Object.create(personPototype);
sui.name = 'sui';
sui.age = 22;
sui.job = 'student';

var jay = Object.create(personPototype,
{
    name: { value : 'jay' },
    age: { value : 28 },
    job: { value : 'teacher' },
    
});

// call the function 
sui.calculateRetire();
jay.calculateRetire();

// output: 43
// output: 37

// 
var Person = function(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
}

// inheritance by Function Constructor
Person.prototype = Object.create(personPototype);

var ken = new Person('ken', 22, 'police')
ken.calculateRetire();

目前自己整理結論大致如下，

• 如果是直接將 function 宣告在建構子 (this)
  -> 只有透過 new 出來得能夠繼承、也就是只有 new 出來得能夠共用

• 寫法 (Inheritance in prototype example)
  -> 只有透過 new 出來得能夠繼承、也就是只有 new 出來得能夠共用

• 透過 var 宣告 prototype (透過 Object.create 實踐 prototype 共用)
  -> 達到真正的共用
  -> 可以直接讓物件進行繼承
  -> 可以讓 Function Object 繼承

新手練功中，如有錯誤觀念，歡迎指正! 明天進入實作~不知道會不會有趣點
課程 : https://www.udemy.com/course/the-complete-javascript-course/
來源 : https://medium.com/%E6%89%8B%E5%AF%AB%E7%AD%86%E8%A8%98/javascript-prototype-vs-es6-class-syntactic-sugar-414ac1459a5e
https://www.oxxostudio.tw/articles/201603/javascript-prototype.html