資訊專欄INFORMATION COLUMN
摘要：探索是如何判斷的表達(dá)式如果函數(shù)的顯式原型對象在對象的隱式原型鏈上，返回，否則返回是通過自己產(chǎn)生的實例案例案例重要注意的顯示原型和隱式原型是一樣的。面試題測試題測試題報錯對照下圖理解
原型與原型鏈深入理解（圖解） 原型（prototype）
函數(shù)的 prototype 屬性（圖）
每個函數(shù)都有一個prototype屬性，它默認(rèn)指向一個Object空對象（即稱為：原型對象）
原型對象中有一個屬性constructor，它指向函數(shù)對象
給原型對象添加屬性（一般都是添加方法）
作用：函數(shù)的所有實例對象自動擁有原型中的屬性（方法）
顯式原型與隱式原型每個函數(shù) function 都有一個prototype屬性，即 顯式原型
每個實例對象都有一個__proto__，可稱為隱式原型
實例對象的隱式原型的值 === 其對應(yīng)構(gòu)造函數(shù)的顯示原型的值
內(nèi)存結(jié)構(gòu)（圖）
總結(jié)：
函數(shù)的 prototype 屬性：在定義函數(shù)時自動添加的，默認(rèn)值是一個空的Object對象
對象的__proto__屬性：創(chuàng)建對象時自動添加的，默認(rèn)值為構(gòu)造函數(shù)的prototype屬性值
程序員能直接操作顯示原型，但不能直接操作隱式原型（ES6之前）
原型鏈 原型鏈（圖解）
訪問一個對象的屬性時，
先在自身屬性中查找，找到返回
如果自身屬性中沒有，再沿著__proto__這條鏈向上查找，找到返回
如果最終沒有找到，返回undefined
原型鏈的別名：隱式原型連
原型鏈的作用：查找對象的屬性（方法）
構(gòu)造函數(shù)/原型/實例對象的關(guān)系（圖解）var o1 = new Object()
var o2 = {}
下面這個圖需要仔細(xì)理解。
構(gòu)造函數(shù)的實例對象自動擁有構(gòu)造函數(shù)原型對象的屬性（方法）
利用的就是原型鏈
原型鏈——屬性問題讀取對象的屬性值時：會自動到原型鏈中查找
設(shè)置對象的屬性值時：不會查找原型鏈，如果當(dāng)前對象中沒有此屬性，直接添加此屬性并設(shè)置其值
方法一般定義在原型中，屬性一般通過構(gòu)造函數(shù)定義在對象本身上。
探索 instanceof instanceof是如何判斷的？表達(dá)式：A instanceof B
如果B函數(shù)的顯式原型對象在A對象的(隱式)原型鏈上，返回true，否則返回false
Function是通過new自己產(chǎn)生的實例 案例1function Foo() { }
var f1 = new Foo();
console.log(f1 instanceof Foo); // true
console.log(f1 instanceof Object); // true
案例2(重要)
console.log(Object instanceof Function); // true
console.log(Object instanceof Object); // true
console.log(Function instanceof Function); // true
console.log(Function instanceof Object); // true
function Foo() {}
console.log(Object instanceof Foo); // false
注意：Function的顯示原型和隱式原型是一樣的。
var A = function() { }
A.prototype.n = 1
var b = new A()
A.prototype = {
n: 2,
m: 3
}
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(){
console.log("a()")
};
Function.prototype.b = function(){
console.log("b()")
};
var f = new F();
f.a() // a()
f.b() // 報錯 f.b is not a function
F.a() // a()
F.b() // b()
對照下圖理解：
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/104121.html
摘要：不理解沒關(guān)系，下面會結(jié)合圖例分析上一篇高級程序設(shè)計筆記創(chuàng)建對象下一篇高級程序設(shè)計筆記繼承參考之原型鏈的解讀三張圖搞懂的原型對象與原型鏈繼承與原型鏈 文章直接從原型圖解開始的，如果對一些概念不太清除，可以結(jié)合后面幾節(jié)查看 1. 圖解原型鏈 1.1 鐵三角關(guān)系（重點） function Person() {}; var p = new Person(); showImg(https://s...
摘要：深入之繼承的多種方式和優(yōu)缺點深入系列第十五篇，講解各種繼承方式和優(yōu)缺點。對于解釋型語言例如來說，通過詞法分析語法分析語法樹，就可以開始解釋執(zhí)行了。 JavaScript深入之繼承的多種方式和優(yōu)缺點 JavaScript深入系列第十五篇，講解JavaScript各種繼承方式和優(yōu)缺點。 寫在前面 本文講解JavaScript各種繼承方式和優(yōu)缺點。 但是注意： 這篇文章更像是筆記，哎，再讓我...
摘要：本期推薦文章從作用域鏈談閉包，由于微信不能訪問外鏈，點擊閱讀原文就可以啦。推薦理由這是一篇譯文，深入淺出圖解作用域鏈，一步步深入介紹閉包。作用域鏈的頂端是全局對象，在全局環(huán)境中定義的變量就會綁定到全局對象中。 （關(guān)注福利，關(guān)注本公眾號回復(fù)[資料]領(lǐng)取優(yōu)質(zhì)前端視頻，包括Vue、React、Node源碼和實戰(zhàn)、面試指導(dǎo)） 本周開始前端進(jìn)階的第二期，本周的主題是作用域閉包，今天是第6天。 本...
摘要：使用上一篇文章的例子來說明下自由變量進(jìn)階期深入淺出圖解作用域鏈和閉包訪問外部的今天是今天是其中既不是參數(shù)，也不是局部變量，所以是自由變量。 （關(guān)注福利，關(guān)注本公眾號回復(fù)[資料]領(lǐng)取優(yōu)質(zhì)前端視頻，包括Vue、React、Node源碼和實戰(zhàn)、面試指導(dǎo)） 本周正式開始前端進(jìn)階的第二期，本周的主題是作用域閉包，今天是第7天。 本計劃一共28期，每期重點攻克一個面試重難點，如果你還不了解本進(jìn)階計...
摘要：上一篇你不知道的筆記寫在前面這是年第一篇博客，回顧去年年初列的學(xué)習(xí)清單，發(fā)現(xiàn)僅有部分完成了。當(dāng)然，這并不影響年是向上的一年在新的城市穩(wěn)定連續(xù)堅持健身三個月早睡早起游戲時間大大縮減，學(xué)會生活。 上一篇：《你不知道的javascript》筆記_this 寫在前面 這是2019年第一篇博客，回顧去年年初列的學(xué)習(xí)清單，發(fā)現(xiàn)僅有部分完成了。當(dāng)然，這并不影響2018年是向上的一年：在新的城市穩(wěn)定、...
閱讀 1806·2021-11-24 10:21
閱讀 1216·2021-09-22 15:25
閱讀 3176·2019-08-30 15:55
閱讀 716·2019-08-30 15:54
閱讀 3467·2019-08-30 14:20
閱讀 1665·2019-08-30 14:06
閱讀 646·2019-08-30 13:11
閱讀 3153·2019-08-29 16:43
