iT邦幫忙

2023 iThome 鐵人賽

DAY 4
0
Modern Web

菜鳥前端系列 第 4

JS原型繼承與原型鏈

  • 分享至 

  • xImage
  •  

為了讓一個物件取得另一個物件的屬性與方法

原型繼承是什麼?透過以下例子來了解:

function Car(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
this.getDetails = function(){
  return `${year} ${make} ${model}`;
}
const car1 = new Car("BMW", "X5", 2022);
console.log(car1);
}

第一階段:
印出函式的 prototype,是一个原型物件,constructor 為該函式 :
在 JS 中,每個函數都有一個prototype屬性,是一個對象,可以用來添加共享的方法和屬性,這些方法和屬性可以被該函數創建的對象時力共享。
接著來看函式的constructor是function物件,function物件的constructor就是function物件它自己
且function物件也和第一點函式的規律一樣,function物件的prototype為一個原型物件,而那個原型物件的constructor為function物件
第二階段:
function原型物件的__proto__就等於Object原型物件
將Object.prototype.__proto__印出會發現是null
函式的原型物件也是物件的原型物件
透過函式產生的物件其__proto__為函式的原型物件,建構子為該函式
總結:

每個物件都有一個__proto__屬性,指向它繼承而來的prototype物件,而且每個物件也會有建構子constructor

函式、function物件、object物件中的prototype屬性,會指向該物件的原型物件,而那個原型物件的constructor為又會指回該物件


上一篇
條件與循環
系列文
菜鳥前端4
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言