淺談javascript的原型及原型鏈

原型與原型鏈是javascript裏面最最核心的內容，若是不能理解它們之間的存在關係的話，那麼咱們是不能理解這門語言的。

在JS中，主要有兩種建立對象的方法, 分別是對象字面量以及調用構造函數

//對象字面量
var obj1 = {}

//調用構造函數
var obj2 = new Object()

其實上述兩種建立對象的方法，本質上是同樣的，都是JS引擎調用對象的構造函數來新建出一個對象。構造函數自己也是一個普通的JS函數

下面咱們來看一個例子

//建立構造函數
function Person(name){
    this.name = name
}

//每一個構造函數JS引擎都會自動添加一個prototype屬性，咱們稱之爲原型，這是一個對象
//每一個由構造函數建立的對象都會共享prototype上面的屬性與方法
console.log(typeof Person.prototype) // 'object'


//咱們爲Person.prototype添加sayName方法
Person.prototype.sayName = function(){
    console.log(this.name)
}

//建立實例
var person1 = new Person('Messi')
var person2 = new Person('Suarez')

person1.sayName() // 'Messi'
person2.sayName() // 'Suarez'

person1.sayName === person2.sayName //true

咱們藉助上面的例子來理解構造函數-原型-實例，三者之間的關係，主要有幾個基本概念

• 構造函數默認會有一個protoype屬性指向它的原型

• 構造函數的原型會有一個consctructor的屬性指向構造函數自己, 即

  Person.prototype.constructor === Person

• 每個new出來的實例都有一個隱式的__proto__屬性，指向它們的構造函數的原型，即

  person1.__proto__ === Person.prototype
  person1.__proto__.constructor === Person

瞭解了這些基本概念以後，咱們再來看看javascript的一些原生構造函數的關係網，看下列的圖

引自stackoverflow

按照咱們上面的理解, Oject自己是一個構造函數，它也是一個對象，那麼

Object.__proto__ === Function.prototype

爲了方便咱們記住上圖，還有幾個須要咱們知道的特殊概念：

• Function的原型屬性與Function的原型指向同一個對象. 即

  Function.__proto__ == Function.prototype

• Object.prototype.__proto__ === null

• typeof Function.prototype === 'function'