js原型與原型鏈

定義函式的時候都建立了乙個函式物件，裡面有個prototype屬性指向了乙個object空物件，這個物件就是函式的原型物件。

原型物件中有個constructor屬性，指向函式物件

通過new建立的物件，有個__proto__屬性（左右都是兩個下劃線），它等於對應建構函式的的prototype的值，如上圖。

function dog(){}	
var dd = new dog();
//dd.__proto__ === dog.prototype 是true

顯示原型與隱式原型指的是同乙個原型物件。

對於函式而言（dog.prototype)，他叫顯示原型

對於函式的例項而言(dd .__proto__)，他叫隱式原型

我們可以輸出一下dog.prototype，來看一看這個原型物件，發現它除了constructor之外還有乙個__proto__，它指向內建的object函式的原型物件。

object的原型物件不是空物件，tostring()，tolocalstring() 等物件方法都是定義在object原型上的。

我們定義的函式的原型物件的__proto__屬性都是指向object的原型物件的。

object的原型物件也有乙個__proto__，它指向哪呢？

如果你瀏覽器開發者控制台輸入object.prototype.__proto__發現是null

我們的例項物件都是由tostring方法的，這個方法就是通過原型鏈獲取到的。

剛剛定義了乙個dd的dog例項，它也能呼叫tostring，這個例項本身並沒有tostring方法，它為什麼可以使用呢？

當訪問屬性或者方法時候，先在例項(dd)中找，找不到就去(dd.__proto__)中找，再找不到就去(dd.__proto__.__proto__)中找，一直到object的原型物件（因為它的__proto__是nul），object的原型物件就是原型鏈的終點。通過__proto__形成的這個『鏈路』就是原型鏈。

屬性查詢的時候是沿著原型鏈找

屬性新增的時候，載入例項上(注意"點操作符"，當物件沒有這個屬性時，點操作符會新增屬性）

function dog(){}
var dd = new dog()
dd.name //undefined
dd.name = "小白" //直接新增在了dd這個例項上

問題：

function fun(){}
fun.prototype.arr = 『***'
var f1 = new fun()
console.log(f1.arr) //***
var f2 = new fun()
f2.arr = 'yyy'
console.log(f1.arr,f2.arr) // *** yyy

function fun(){}
fun.prototype.arr = 
var f1 = new fun()
f1.arr.push(1)
var f2 = new fun()
f2.arr.push(2)
console.log(f2.arr) // [1, 2]

所有函式都是function例項，包括function本身上面定義的函式dog就是function的乙個例項，dog函式物件也有乙個__proto__上面圖中標出來了。根據例項的隱式原型等於對應建構函式的顯示原型，得到dog.__proto__ = function.prototypefunction本身也是函式，所以function.__proto__ = function.prototype，所以function是特殊的。

那麼內建的object也是函式啊（我們通過new object()建立過物件，這裡它是建構函式），所以object.__proto__ = function.prototype

instanceof 是如何判斷的？

a instanceof b

如果b的顯示原型物件在a的原型鏈上，就返回true，否則返回false

這也就解釋了為什麼

function instanceof object   === true
object instanceof function === true

/* 題目1 */
function a(){}
a.prototype.n = 1
var b = new a()
a.prototype = 
var c = new a()
console.log(b.n,b.m,c.n,c.m) //1 undefined 2 3

/* 題目2 */
var f = function(){}
object.prototype.a = function()
function.prototype.b = function()
var f = new f()
f.a() //a()
f.b() //報錯
f.a() //a()
f.b() //b()

js原型與原型鏈

js 原型與原型鏈

JS原型與原型鏈

js 高階原型與原型鏈

js原型與原型鏈

js 原型與原型鏈

JS原型與原型鏈

js 高階 原型與原型鏈

相關推薦

js 高階原型與原型鏈