iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 24
0
Modern Web

30天入門JavaScript系列 第 24

【Day 24】物件(四):原型鍊

  • 分享至 

  • xImage
  •  

發燒第三天,現在只打得出流水帳,等完賽再修/images/emoticon/emoticon46.gif


原型鍊

每個物件都會有個[[prototype]]屬性指向該物件的原型,
當存取物件不存在的屬性或方法時,會往原型去搜尋,還沒找到的話會再往原型的原型去找,
這種由原型將各個物件串起來就叫做原型鍊

Object.prototype

每個原型鍊的最底部為Object.prototype
所以在這邊加入方法的話,所有值都能使用這個方法

Object.prototype

Object.prototype是所有原型鍊的最底端,

如果在這新增方法,所有值都能使用這個方法
舉個例子

Object.prototype.print = function () {
  console.log(this);
};

'a'.print();//印出值為a的string物件

[1, 2, 3].print();//[1,2,3]

constructor

每個函式的原型物件都會有的屬性,會指向建構器函式,
利用原型鍊跟constructor可以知道物件是由哪個建構器函式建立的

function People(name, age) {
  this.name = name;
  this.age = age;
}

var person1 = new People('John', 20);

console.log(person1.constructor === People);//true
//person1自己沒有constructor屬性,會原型鍊往People.prototype去找
//會在People.prototype找到constructor屬性(指向People)

利用原型鍊來繼承

function People(name, age) {
  this.name = name;
  this.age = age;
}

People.prototype.say = function () {
  console.log('你好我叫做' + this.name + ',我今年' + this.age);
};

function Student(name, age, school) {
  People.call(this, name, age);
  this.school = school;
}

Student.prototype = new People();

var student1 = new Student('小明', 22, '社區大學');


上面程式想讓Sudent建立出來的物件也能使用People的方法,
所以手動將Sudent.prototype設為People建立出來的物件,

Sudent建立的student1物件想呼叫say()方法時,會經由原型鍊
student->Student.prototype(新建立的People物件)->People.prototype找到say()方法

要注意的是這樣覆寫prototype會使constructor屬性指向錯誤的地方

console.log(student1.constructor);//People
//本來應該指向Student的

解決方式很簡單 覆寫prototype後把constructor屬性加回去就是了

Object.defineProperty(Student.prototype, 'constructor', {
  enumerable: false, //讓constructor不會被for...in列舉
  value: Student,
});

上一篇
【Day 23】物件(三):prototype跟__proto__
下一篇
【Day 25】物件(五):類別 class
系列文
30天入門JavaScript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言