摘要:執(zhí)行行代碼,我們可以看到控制臺打印出來的結(jié)果如下結(jié)果印證了我們上面講的內(nèi)容指向的構(gòu)造函數(shù)指向的原型對象原型對象中指向構(gòu)造函數(shù)。
在javascript中原型和原型鏈機制是最難懂的部分(沒有之一),同時也是最重要的部分,在學習的過程中你可能認認真真的看了一遍但還是完全不懂書上說的什么,的確是這樣的,我在學習的時候可是反復看了4、5遍才初步理解了。 下面我把我的理解總結(jié)了一下希望對你們有一點幫助。
對象講原型和原型鏈之前我們先講基礎(chǔ)知識——js對象。什么是對象呢? 這里引用別人的一句話“js中一切皆對象”,先不用完全明白,因為我也不明白,在后面的學習中慢慢理解。
首先在js中對象分為函數(shù)對象和普通對象兩種,看下面的例子:
function fun1(){}; var fun2 = function(){}; var fun3 = new Function(); var obj1 = new fun1(); var obj2 = {}; var obj3 =new Object(); console.log(typeof Object); // function console.log(typeof Function); // function console.log(typeof obj1); // object console.log(typeof obj2); // object console.log(typeof obj3); // object console.log(typeof fun1); // function console.log(typeof fun2); // function console.log(typeof fun3); // function
上面代碼中fun1、fun2、fun3是函數(shù)對象,obj1、obj2、obj3是普通對象,那么怎么區(qū)分呢? 很簡單,凡是通過 new Function() 創(chuàng)建的對象都是函數(shù)對象,其他的都是普通對象,fun1、fun2歸根結(jié)底還是通過 new Function() 創(chuàng)建的,因此也是函數(shù)對象。
普通對象首先我們來講普通對象,我們通過一張圖來看看普通對象在創(chuàng)建時都做了些什么。
1 var foo = { 2 x: 10, 2 y: 20 3 } 4 console.log(foo.__proto === Object.prototype) // true
上面的代碼中我們創(chuàng)建了一個普通對象foo,并初始化了兩個屬性(自身屬性)x、y,同時在對象內(nèi)部還自動創(chuàng)建了一個屬性__proto__,這個__proto__屬性實際上是個指針,指向構(gòu)造foo的構(gòu)造函數(shù)的原型,這里foo對象實際是通過 new Object 創(chuàng)建的,因此第4行代碼結(jié)果為true. 這里講到了Object.prototype就涉及到函數(shù)對象了,因為只有函數(shù)對象才有prototype屬性,所以接下來我們講函數(shù)對象。
函數(shù)對象用與上面類似的代碼來解釋:
1 function foo() { 2 this.x = 10 3 } 4 foo.prototype.y = 20; 5 console.log(foo.__proto__); 6 console.log(foo.prototype);
當我們創(chuàng)建foo函數(shù)時,初始化了一個自身屬性x = 10,同時函數(shù)對象中自動創(chuàng)建了一個prototype屬性和__proto__屬性,還為foo創(chuàng)建了一個原型對象foo.prototype。其中__proto__屬性我們上面已經(jīng)講過了,而prototype屬性則指向foo新創(chuàng)建的prototype原型對象,這個原型對象中自動創(chuàng)建了一個constructor屬性,指向構(gòu)造函數(shù)foo。
(注:原型對象prototype也是一個普通對象,因此會自動創(chuàng)建__proto__屬性,為避免文章變得晦澀難懂,此處省略,后面再深入講解)
執(zhí)行第4行代碼,為新創(chuàng)建的prototype原型對象添加了一個原型屬性y = 20。
執(zhí)行5、6行代碼,我們可以看到控制臺打印出來的結(jié)果如下:
結(jié)果印證了我們上面講的內(nèi)容:1.__proto__指向foo的構(gòu)造函數(shù)function 2.prototype指向foo的原型對象prototype 3.原型對象中constructor指向構(gòu)造函數(shù)foo。
下一節(jié)內(nèi)容:javaScript原型及原型鏈詳解(二)文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/83050.html
摘要:當然這還沒完,因為我們還有重要的一步?jīng)]完成,沒錯就是上面的第行代碼,如果沒有這行代碼實例中的指針是指向構(gòu)造函數(shù)的,這樣顯然是不對的,因為正常情況下應(yīng)該指向它的構(gòu)造函數(shù),因此我們需要手動更改使重新指向?qū)ο蟆? 第一節(jié)內(nèi)容:javaScript原型及原型鏈詳解(二) 第一節(jié)中我們介紹了javascript中的原型和原型鏈,這一節(jié)我們來講利用原型和原型鏈我們可以做些什么。 普通對象的繼承 ...
摘要:在創(chuàng)建對象不論是普通對象還是函數(shù)對象的時候,都有一個叫做的內(nèi)置屬性,用于指向創(chuàng)建它的構(gòu)造函數(shù)的原型對象,也就是。因為一個普通對象的構(gòu)造函數(shù)所以原型鏈原型鏈的形成是真正是靠而非。參考文章最詳盡的原型與原型鏈終極詳解,沒有可能是。 【前端芝士樹】Javascript的原型、原型鏈以及繼承機制 前端的面試中經(jīng)常會遇到這個問題,自己也是一直似懂非懂,趁這個機會整理一下 0. 為什么會出現(xiàn)原型和...
摘要:原型對象內(nèi)部也有一個指針屬性指向構(gòu)造函數(shù)實例可以訪問原型對象上定義的屬性和方法。在創(chuàng)建子類型的實例時,不能向超類型的構(gòu)造函數(shù)中傳遞參數(shù)。 贊助我以寫出更好的文章,give me a cup of coffee? 2017最新最全前端面試題 私有變量和函數(shù) 在函數(shù)內(nèi)部定義的變量和函數(shù),如果不對外提供接口,外部是無法訪問到的,也就是該函數(shù)的私有的變量和函數(shù)。 function ...
摘要:原文地址詳解的類博主博客地址的個人博客從當初的一個彈窗語言,一步步發(fā)展成為現(xiàn)在前后端通吃的龐然大物。那么,的類又該怎么定義呢在面向?qū)ο缶幊讨?,類是對象的模板,定義了同一組對象又稱實例共有的屬性和方法。這個等同于的屬性現(xiàn)已棄用。。 前言 生活有度,人生添壽。 原文地址:詳解javascript的類 博主博客地址:Damonare的個人博客 ??Javascript從當初的一個彈窗語言,一...
閱讀 3067·2021-11-25 09:43
閱讀 1042·2021-11-24 10:22
閱讀 1372·2021-09-22 15:26
閱讀 697·2019-08-30 15:44
閱讀 2475·2019-08-29 16:33
閱讀 3714·2019-08-26 18:42
閱讀 929·2019-08-23 18:07
閱讀 1845·2019-08-23 17:55