iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 23
0
自我挑戰組

前端我來了 - 30天 JavaScript 從無到有 系列 第 23

[30天 JavaScript 從無到有 Day 23] Prototype

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


上一篇
[30天 JavaScript 從無到有 Day 22] Everything is an object
下一篇
[30天 JavaScript 從無到有 Day 24] Object and Function
系列文
前端我來了 - 30天 JavaScript 從無到有 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言