好好學習-JS基礎-原型/原型鏈

function Foo () {
    this.name = "name"
    this.age = 18
}
Foo.prototype.sayHi = function () {
    console.log('hello')
}
var foo = new Foo()

foo.name  // name
foo.age   // 18
foo.sayHi() // hello

prototype

每一個構造函數都有一個prototype屬性,這個屬性指向原型對象,使用構造函數建立實例對象後,這個prototype指向的原型對象就是實例的原型對象.
prototype 是函數纔會有的屬性

proto

除了 null 以外,每一個對象都擁有一個隱藏的__proto__屬性,指向實例的原型對象.能夠用 foo.__proto__ 或者 Object.getPrototypeOf(foo) 來訪問.

實際上構造函數的prototype屬性與實例對象的__proto__屬性指向的是同一個原型對象.

foo.__proto__ === Foo.prototype   // true

constructor

每一個原型對象都有一個constructor屬性指向關聯的構造函數

Foo.prototype.constructor === Foo  // true

每一個對象都會從原型繼承屬性

根據所述可繪製:

實例與原型

function Foo () {}
Foo.prototype.name = "Ann"
var foo = new Foo()
foo.name = "ken"
console.log(foo.name)  // Ken
delete foo.name
console.log(foo.name)  // Ann

當讀取實例對象的屬性時,先在實例對象中查找,若是找不到,就會到實例關聯的原型對象中去找,若是原型對象中找不到,就到原型的原型對象中找,一直到最頂層爲止.

原型的原型

原型也是一個對象,那麼就能夠使用最原始的方法建立:

var obj = new Object()
obj.name = "Ann"
console.log(obj.name)  // Ann

原型對象就是經過 Object 構造函數建立出來的,那麼原型對象就能夠經過__proto__屬性訪問到:

原型鏈

Object.prototype 的原型是什麼呢? 答案是 null,null 表示沒有對象,此處不該該有值

console.log(Object.prototype.__proto__ )  // null

那是什麼建立了 Object()這個構造函數呢?

• 一切對象最終繼承自 Object 對象
• 一切函數對象(包括 Object 對象)最終繼承自 Function對象
• Object對象直接繼承自Function對象
• Function對象繼承自本身,最終繼承自Object對象

看圖:

原型鏈就是圖中的藍色關聯

參考文章連接

• https://github.com/mqyqingfen...
• https://juejin.im/post/5a94c0...
• https://juejin.im/post/5b3dd2...
• https://blog.csdn.net/Liu_yun...