前端面試之理解原型/建構函式/例項(JavaScript篇)

圖解

概念

建構函式

建構函式：用來初始化新建立的物件的函式是建構函式。

function Foo () {
    ...
}
複製程式碼

每一個建構函式都有一個原型物件即prototype(指標)指向的物件。 而原型物件也有一個屬性constructor(構造器)指向建構函式。

例項物件

通過建構函式的new操作建立的物件是例項物件。可以用一個建構函式，構造多個例項物件。

const f1 = new Foo()
const f2 = new Foo()
複製程式碼

例項物件也有有一個__proto__(非標準順序)屬性。該屬性指向例項物件的原型物件。

原型

建構函式通過 new 操作符來建立一個例項 ， 例項又可以通過內部指標 proto 指向原型物件。 proto 連線的這一條原型物件就構成了原型鏈。

function A () {
}

function B () {

}
function C () {

}

B.prototype = new A()
C.prototype = new B()

const c = new C()

console.log(
  c.__proto__ ===  C.prototype,  //  true
  C.prototype.__proto__ === B.prototype,  // true
  B.prototype.__proto__ === A.prototype,  // true
  A.prototype.__proto__ === Object.prototype, // true
  Object.prototype.__proto__ === null // true
)


複製程式碼

原型鏈最頂端就是Object.prototype。 而Object.prototype的原型物件是null。