原型、原型鏈、原型繼承

簡介

原型是 JavaScript 中實現物件間繼承和方法共享的基礎機制
允許物件訪問並使用不屬於它們自身，而是定義在它們原型上的屬性和方法
每個物件有一個內部隱藏屬性：[[Prototype]]，無法直接訪問
訪問原型的方法：
- __proto__
- Object.getPrototypeOf()

note-img

原型鏈（Prototype Chain）

在物件實例和類別中設定連結（原型鏈）
如果訪問某個屬性，但在物件中沒有時，會在原型(prototype)中尋找
若沒有找到，會再從原型中的原型繼續找
直到找到，或是找到最上層的終點(null)為止
這條連續的路徑，被稱為原型鏈

class Phone {
  call() {
    console.log('call me maybe')
  }
}
const myPhone = new Phone()
// 從原型鏈中，找到call方法
myPhone.call() // call me maybe

// 找到myPhone的原型Phone => 原型Object => Object的原型(終點是null)
console.log(myPhone.__proto__.__proto__.__proto__) // null

查看物件的原型

Object.getPrototypeOf

class Phone {
  call() {
    console.log('call me maybe')
  }
}
const myPhone = new Phone()

console.log(Object.getPrototypeOf(myPhone)) ⬇️

note-img

檢查某個屬性是否是該物件自己本身的，而非原型內的

hasOwnProperty

class Person {
  constructor(name) {
    this.name = name
  }
}

Person.prototype.age = 30

const jude = new Person('Jude')

console.log(jude.hasOwnProperty('name')) // true，因為 'name' 是 jude 物件自身的屬性
console.log(jude.hasOwnProperty('age')) // false，因為 'age' 是通過原型繼承的屬性

原型繼承（Prototype Inheritance）

如果在不同物件中，都用到相同的方法
最簡單的方式是在每個物件都寫一次一樣的函式
但缺點是，要修改或擴充時，非常不方便
如果有 100 個物件都有相同的walk，就佔了 100 個記憶體空間，造成效能浪費

範例

const me = {
  walk() {
    return 'walking'
  }
}

const he = {
  walk() {
    return 'walking'
  }
}

改善方式

可以創建一個Person的 class
基於Person建立其他物件，共享Person的屬性或方法
當要變更時，只要去修改Person的 prototype，就可以一併修改實例所繼承的方法

class Person {
  walk() {
    return 'walking'
  }
}

const me = new Person()
const he = new Person()
console.log(me.walk()) // walking
console.log(he.walk()) // walking

Person.prototype.walk = function () {
  console.log('new walking')
}
console.log(me.walk()) // new walking
console.log(he.walk()) // new walking

常用內建構造函式

創建以下類型時，因為原型繼承，可以使用該種類的方法

Object
Array
String
Number
Date

const myArray = [1, 2, 3]

// 使用 Array 的原型方法
// push 方法是從 Array.prototype 繼承而來的
myArray.push(4)
console.log(myArray) // [1, 2, 3, 4]

const myString = 'Hello'

// 使用 String 的原型方法
// toUpperCase 方法是從 String.prototype 繼承而來的
const uppercaseString = myString.toUpperCase()

console.log(uppercaseString) // HELLO

參考資料

# JavaScript # Prototype

目錄