圖解原型和原型鏈(一)

前言:其實嚴格說來這篇文章并不是真正介紹原型和原型鏈的,但是卻是原型和原型鏈的基礎(chǔ),是必須,是前提。當(dāng)你把我這幾篇有關(guān)原型和原型鏈的文章看完后,你才發(fā)現(xiàn),本篇原型和原型鏈(一)起了很重要的輔助作用。 畫圖不易,轉(zhuǎn)載請注明出處。謝謝~

關(guān)鍵詞:全局對象Window,全局函數(shù),公用屬性......
正文:
一、全局對象Window

  • window是一個對象,不管在哪個網(wǎng)頁,一定可以訪問一個叫window的對象。
  • 在ECMAScript里面,這個對象叫做global,在瀏覽器里成為window
  • window下面的屬性分為2類,一類為ECMAScript規(guī)定,一類為瀏覽器私有,舉個栗子,如下圖:
    window.png

    二、以Number為例
    問個問題,Number()的作用?
    大部分人會說:Number() 函數(shù)把對象的值轉(zhuǎn)換為數(shù)字,如果對象的值無法轉(zhuǎn)換為數(shù)字,那么 Number() 函數(shù)返回 NaN。
    正確,沒有問題。但是Number還有第二個用法:那就是它可以聲明一個number對象。
    Number() :
  • 用法一:window是一個對象,不管在哪個網(wǎng)頁,一定可以訪問一個叫window的對象。
  • 用法二:在ECMAScript里面,這個對象叫做global,在瀏覽器里成為window
    比如說,var n = new number(1);先不要管new是什么,這個式子,就是我傳進去了一個1,那么,返回了什么呢?答,返回了一個對象,{valueOf:1},那為什么會返回一個對象?下面跟我看內(nèi)存圖吧,(不了解內(nèi)存圖的請觀看我寫的另一篇關(guān)于內(nèi)存圖的文章)上圖解答:
    var n1 = 1;
    var n2 = new Number(1);
    n1和n2有什么區(qū)別?-----內(nèi)存不同
image.png
image.png

image.png

image.png

看到這里,初學(xué)者可能會有疑問,既然,n1.toString() 可以返回“1”,n2.toString()也可以返回,那我為什么要寫那么多new number()呢,這多長呀?
接下來就和歷史有關(guān)了,當(dāng)初,var n = 1,如果想n.tostring()怎么辦?不行呀,n不是對象啊,它沒有toString()這個方法,那怎么辦呢?我們的js作者就想了一個辦法:


temp.png

好,我們現(xiàn)在重新梳理下:
當(dāng) var n = 1;
n.toString();
當(dāng)這個時候,我們的內(nèi)存出現(xiàn)了什么變化?


ex.png

是不是覺得挺簡單的,不是很麻煩呢?那現(xiàn)在考你們一道題,檢驗下上面的你們看懂了沒:
var n = 1
n.xxx = 2
n.xxx=?
心里有沒有答案?我們還是來看內(nèi)存圖:


3.png

所以,答案就是:


image.png

那我們現(xiàn)在再練習(xí)一道:
var f = false;
var f2 = new Boolean(false)
if(f){console.log(1)}
if(f2){console.log(2)}
那么最后到底會打印出1還是2呢?

答案:2
new Boolean(false)返回了一個false對象,false對象不是false嗎?當(dāng)然不是,讓我們回顧一下五個falsy值:
0,NaN,空字符串,null,undefined。只有這些才是false。記得哦,所有對象都是true哦。
再試試:
var o1 ={}
var o2 ={}
o1===o2?
當(dāng)然是錯嘍,用內(nèi)存圖想一想。兩個分別指向了兩個不同的堆地址,怎么可能全等嘛。

有了這些知識,再去了解原型和原型鏈就會容易很多啦。更多精彩請看原型和原型鏈二。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容