淺談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.constructor
  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'

來自：https://segmentfault.com/a/1190000008350004