iT邦幫忙

2023 iThome 鐵人賽

DAY 24
0
自我挑戰組

轉職仔與JavaScript的初次相遇系列 第 24

JavaScript的Constructor prototype inheritance(構造函式的原型繼承-上) - Day24

  • 分享至 

  • xImage
  •  

前言

今天我們將講解JavaScript的Constructor prototype inheritance(構造函式的原型繼承),解釋其優點以及如何作用

說明

首先先看以下例子
https://ithelp.ithome.com.tw/upload/images/20231003/20162465o6v9ZtkhXJ.png
在Human裡頭,有著Eat(), Drink(), Sleep()等methods
而在Male以及Son則分別多了Husband()以及Study()

假如在定義Male()和Son()時,分別繼承Human的Prototype再分別增加Husband()以及Study()
這樣是否方便許多?

Constructor A繼承另一個Constructor B的prototype物件

兩項設定完成繼承

  1. Constructor function A內部執行call method,設定參數值給A使用
  2. 設定A.prototype = Object.create(B.prototype),讓A.prototype可使用B.prototype內部的屬性和方法
function Person(name, age){
  this.name = name;
  this.age = age;
}

Person.prototype.sayHi = function(){
  console.log(this.name + '說您好');
};

function Student(name, age, major, grade){
  this.major = major;
  this.grade = grade;
  Person.call(this, name, age);
}

Student.prototype = Object.create(Person.prototype)
let jeremy = new Student('Jeremy Hung', 27, "Engineering", 3.7);
jeremy.sayHi() // Jeremy Hung說您好

上一篇
JavaScript的Function methods(函式方法) - Day23
下一篇
JavaScript的Constructor prototype inheritance(構造函式的原型繼承-下) - Day25
系列文
轉職仔與JavaScript的初次相遇30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言