1. 程式人生 > >JS中的原型鏈

JS中的原型鏈

var Person = function(name) {     this.name = name; } var p = new Person(); new操作符的操作是 1.var p = {} 2.p.__proto__ =  Person.prototype 3.Person.call(p) var p={}; 也就是說,初始化一個物件p。 p.__proto__ = Person.prototype; Person.call(p);也就是說構造p,也可以稱之為初始化p。 關鍵在於第二步,我們來證明一下: var Person = function() {} var p = new Person(); alert(p.__proto__ =  Person.prototype) 這段程式碼會返回true。說明我們步驟2的正確。 那麼__proto__是什麼?我們在這裡簡單地說下。
每個物件都會在其內部初始化一個屬性,就是__proto__,當我們訪問一個物件的屬性時,如果這個物件內部不存在這個屬性,那麼他就會去__proto__裡找這個屬性,這個__proto__又會有自己的__proto__,於是就這樣一直找下去,也就是我們平時所說的原型鏈的概念。 按照標準,__proto__是不對外公開的,也就是說是個私有屬性,但是Firefox的引擎將他暴露了出來成為了一個共有的屬性,我們可以對外訪問和設定。 好,概念說清了,讓我們看一下下面這些程式碼: ? var Person = function () { }; Person.prototype.Say = function () {     alert("Person say"); } var p = new Person(); p.Say();  這段程式碼很簡單,相信每個人都這樣寫過,那就讓我們看下為什麼p可以訪問Person的Say。 首先var p=new Person();可以得出p.__proto__=Person.prototype。那麼當我們呼叫p.Say()時,首先p中沒有Say這個屬性,於是,他就需要到他的__proto__中去找,
也就是Person.prototype,而我們在上面定義了Person.prototype.Say=function(){}; 於是,就找到了這個方法。 好,接下來,讓我們看個更復雜的。 var Person = function () { }; Person.prototype.Say = function () {     alert("Person say"); } Person.prototype.Salary = 50000; var Programmer = function () { }; Programmer.prototype = new Person(); Programmer.prototype.WriteCode = function () {     alert("programmer writes code"); }; Programmer.prototype.Salary = 500; var p = new Programmer(); p.Say(); p.WriteCode(); alert(p.Salary);   我們來做這樣的推導: var p=new Programmer()可以得出p.__proto__=Programmer.prototype; 而在上面我們指定了Programmer.prototype=new Person();我們來這樣拆分,var p1=new Person();Programmer.prototype=p1;那麼: p1.__proto__=Person.prototype; Programmer.prototype.__proto__=Person.prototype; 由根據上面得到p.__proto__=Programmer.prototype。可以得到p.__proto__.__proto__=Person.prototype。 好,算清楚了之後我們來看上面的結果,p.Say()。由於p沒有Say這個屬性,於是去p.__proto__,也就是Programmer.prototype,也就是p1中去找,由於p1中也沒有Say,那就去p.__proto__.__proto__,也就是Person.prototype中去找,於是就找到了alert(“Person say”)的方法。 其餘的也都是同樣的道理。 再來一張stackoverflow上的圖: __proto__ <wbr>與prototype的區別,js函式宣告與建立

相關推薦

JS原型的理解

urn app 內部 標準 dir png 組成 itl ted 【轉】JS中原型鏈的理解   在談原型鏈之前,我們首先要了解自定義函數與 Function 之間是什麽關系,而構造函數、原型和實例之間又存在什麽千絲萬縷的關系呢?其實,所有的函數都是 Function

關於JS原型的prototype與_proto_的個人理解與詳細總結

轉載自:https://www.cnblogs.com/az96/p/6014621.html 一直認為原型鏈太過複雜,尤其看過某圖後被繞暈了一整子,今天清理硬碟空間(渣電腦),偶然又看到這圖,勾起了點回憶,於是索性複習一下原型鏈相關的內容,表達能力欠缺邏輯混亂別見怪(為了防止新人__(此處指我)__被在此

闡述JS原型及prototype和__proto__的區別

在開始先給出我在知乎上看到的一張圖,可以幫助理解: 如果現在你還不能很好的理解這副圖的意思,那請繼續往下看。 一、prototype和 _proto_ 的概念 prototype是函式的一個屬性(每個函式都有一個prototype屬性),這個屬性是一

js---16原型

class on() func 原型 code 關聯關系 type -- 原型鏈 var p = {name:"sss"}; var c2 = Object.create(p,{age:32,salar:"eee"});//c2就繼承了p的屬性

關於js原型,__proto__,prototype的理解

ava 對象 構造 script .com 自己的 pan 需要 defined 首先聲明參考博文,感謝 http://blog.sina.com.cn/s/blog_6c62f4330102wq0u.html http://blog.csdn.net/leadn/arti

JavaScript原型的那些事

單鏈表 分享圖片 mage classes 替換 afa 就是 區別 urn 引言 在面向對象的語言中繼承是非常重要的概念,許多面向對象語言都支持兩種繼承方式:接口繼承和實現繼承。接口繼承制只繼承方法簽名,而實現繼承繼承實際的方法。在ECMAScript中函數沒有簽名,所以

js原型以及繼承

1. 先有建構函式,再有的例項物件 2. 建構函式裡面有一個原型物件 3. 原型物件裡面的構造器指向對應的建構函式 4. 例項物件裡面的原型指向建構函式裡面的原型物件 原型鏈:是一種關係,例項物件和原型物件之間的關係,通過__proto __來聯絡的,建構函式本身與例項物件沒什麼聯絡

js增加原型上的方法

對於新人來說,JavaScript的原型是一個很讓人頭疼的事情,一來prototype容易與__proto__混淆,二來它們之間的各種指向實在有些複雜,其實市面上已經有非常多的文章在嘗試說清楚,有一張所謂很經典的圖,上面畫了各種線條,一會連線這個一會連線那個,說實話我自己看得就非常頭暈,更談不上完全

一篇文章理解JS繼承——原型/建構函式/組合/原型式/寄生式/寄生組合/Class extends

說實在話,以前我只需要知道“寄生組合繼承”是最好的,有個祖傳程式碼模版用就行。最近因為一些事情,幾個星期以來一直心心念念想整理出來。本文以《JavaScript高階程式設計》上的內容為骨架,補充了ES6 Class的相關內容,從我認為更容易理解的角度將繼承這件事

JS原型,這個圖你沒見過

想到Objective-C有個isa指標,物件的isa指向類,類的isa指向元類,元類的isa指向自己。正是有了isa指標,才有了強大的runtime功能。 那麼,前端技術js也有自己的指向關係,這裡借用《JavaScript高階程式設計》中的描述: 每個建構函式都有一個

js原型與繼承

js中的原型鏈是比較難理解的一部分知識,而繼承又是依賴於原型鏈,所以原型鏈是我們必須去掌握的。在學習原型鏈之前,我們需要去介紹一下原型。建議這部分重在理解,不推薦死記硬背。 1、原型 js中只有函式物件才有原型,原型也是個物件。例如,我們建立一個save函式,通過typeo

JS高階---原型(一看就懂,但18歲以下請繞道)

    1)小明是小明媽生的,小狗是小狗媽生的。小明和小狗都是物件例項,而小明媽和小狗媽就是原型。原型也是物件,叫原型物件。      2)小明媽和小明爸啪啪啪能生出一堆小明明、小狗媽和小狗爸啪啪啪能生出一堆小狗狗,啪啪啪就是建構函式,俗稱造人或造狗。      3)小明媽

簡談JS原型和作用域

談起js的原型鏈和作用域鏈,我覺得還是和圖結合起來說比較明白,手繪了一些圖片, 原型鏈 建立一個函式及呼叫建構函式建立例項的背後 當我們建立了一個新函式時,都會自動為該函式建立一個prototype屬性,這個prototype屬性是一個指標,指向這個函式的

js原型模式

開發十年,就只剩下這套架構體系了! >>>   

關於JS面向對象原型原型以及他們之間的關系及this的詳解

它的 .proto com js面向對象 text doc 技術分享 回調函數 回調 一:原型和原型對象: 1.函數的原型prototype:函數才有prototype,prototype是一個對象,指向了當前構造函數的引用地址。 2.函數的原型對象__proto__:所有

細說JS原型原型

變量 proto var 概念 函數的原型 prot software 構造函數 eof 我們都知道,在javascript中,萬物皆對象。但是,對象也是有區別的,分為普通對象和函數對象,說明走一波! var o1 = {}; var o2 =new Object();

理解js原型,prototype與__proto__的關系

價值 on() 內部 存在 復雜 ava 個人 就是 初始化 理解js中的原型鏈,prototype與__proto__的關系 說到prototype,就不得不先說下new的過程。 我們先看看這樣一段代碼: 1 <script type="t

什麽是作用域,什麽是原型,它們的區別,在js它們具體指什麽?

function fun 創建 原型鏈 變量 pro pos bject prototype 作用域是針對變量的,比如我們創建了一個函數,函數裏面又包含了一個函數,那麽現在就有三個作用域   全局作用域==>函數1作用域==>函數2作用域 作用域的特點就是,先在

淺談JS原型對象和原型

並且 nbsp 繼承 div prototype strong 存在 除了 函數 我們知道原型是一個對象,其他對象可以用它實現屬性繼承,除了prototype,又有__proto__ 1. prototype和__proto__的區別 prototype是函數才有的屬性

js原型prototype,__proto__的理解

js原型鏈中prototype,__proto__的理解(18年12.25) 今天開始認真重新過一遍js最基礎的東西。話不多說,開始乾貨。 1,每一個建構函式都有一個屬性prototype,它是一個指標,指向原型物件。 2,每一個例項物件都有一個 __oproto__的屬性,同樣,它