JavaScript 之原型和原型鏈

Mike617 發(fā)布于2019-08-23 18:25 / 2416人閱讀

摘要：對(duì)象會(huì)從原型對(duì)象繼承一些屬性和方法。如果對(duì)象的原型上面也沒有這個(gè)屬性，則繼續(xù)在原型對(duì)象的上原型上面查找，如此一級(jí)級(jí)繼續(xù)往上，直到原型為，此時(shí)引擎返回該對(duì)象的屬性值為。

幾個(gè)概念

構(gòu)造函數(shù)：構(gòu)造函數(shù)實(shí)際上是一個(gè)普通函數(shù)，通過new操作符，可以利用構(gòu)造函數(shù)快速創(chuàng)建對(duì)象；

prototype：每個(gè)構(gòu)造函數(shù)自身上都會(huì)有一個(gè)prototype屬性，該屬性值為一個(gè)對(duì)象，這個(gè)對(duì)象具有一個(gè)constructor屬性，constructor指向構(gòu)造函數(shù)自身；

實(shí)例：通過構(gòu)造函數(shù)創(chuàng)建的對(duì)象，可以看做是該構(gòu)造函數(shù)的實(shí)例；

__proto__：通過構(gòu)造函數(shù)創(chuàng)建的每個(gè)對(duì)象上面，都會(huì)有一個(gè)__proto__屬性，該屬性指向構(gòu)造函數(shù)的prototype；

什么是原型

在JavaScript中，每個(gè)對(duì)象會(huì)有一個(gè)原型對(duì)象。對(duì)象會(huì)從原型對(duì)象繼承一些屬性和方法。

什么是原型鏈

在JavaScript中，訪問一個(gè)對(duì)象的屬性時(shí)，JS引擎會(huì)首先在該對(duì)象自身上線查找該屬性。如果找到了，則直接返回該屬性的值；如果沒有找到，則會(huì)去改對(duì)象的原型上面繼續(xù)查找。如果對(duì)象的原型上面也沒有這個(gè)屬性，則繼續(xù)在原型對(duì)象的上原型上面查找，如此一級(jí)級(jí)繼續(xù)往上，直到原型為null，此時(shí)JS引擎返回該對(duì)象的屬性值為undefined。

繼承

        /**
         * two methods to implement inheritance;
        */

        function Base(type){ 
            this.type = type;
        }
        Base.prototype.base=function(){
            console.log(`${this.type} is in base func`);
        }
        // method one
        function Sub(type){
            this.type = type;
        }
        Sub.prototype = Object.create(new Base("base"));
        Sub.prototype.sub=function(){
            console.log(`${this.type} is in sub func`);
        }

        // method two
        function Foo(type){
            this.type = type;
        }
        Object.setPrototypeOf( Foo.prototype, new Sub("sub"));
        Foo.prototype.foo=function(){
            console.log(`${this.type} is in foo func`);
        }

        let sub = new Sub("sub1");
        sub.base();
        sub.sub();
        sub instanceof Sub; // true
        sub instanceof Base; // true

        let foo = new Foo("foo1");
        foo.base();
        foo.sub();
        foo.foo();
        foo instanceof Foo; // true
        foo instanceof Sub; // true
        foo instanceof Base; // true

一些實(shí)例 Object.getPrototype

預(yù)測下面幾個(gè)表達(dá)式的結(jié)果

Object.getPrototypeOf(function(){}).constructor === Function;
Object.getPrototypeOf(Function).constructor === Function;
Object.getPrototypeOf(Object.getPrototypeOf(Function)).constructor === Object;

答案：

true;

如何創(chuàng)建一個(gè)沒有任何原型的對(duì)象？

let obj = Object.create(null);
console.log(obj);

這篇medium上獲得8.6K贊的文章Prototypes in JavaScript講得很清楚了。

云服務(wù)器 GPU云服務(wù)器原型原型鏈原型鏈 javascript原型原型鏈繼承

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/105206.html

相關(guān)文章

學(xué)習(xí)JavaScript之原型鏈

原型鏈之前一直都不是很理解，這兩天把《你不知道的JavaScript》和《JavaScript高級(jí)程序設(shè)計(jì)》的原型鏈那章看完后有所理解，在這里先記下來，加深印象。什么是原型對(duì)象要講清楚什么是原型鏈需要從原型對(duì)象開始談，那么什么是原型對(duì)象呢？《JavaScript高級(jí)程序設(shè)計(jì)》中是這樣講的：無論什么時(shí)候，只要?jiǎng)?chuàng)建了一個(gè)新函數(shù)，就會(huì)根據(jù)一組特定的規(guī)則為該函數(shù)創(chuàng)建一個(gè)prototype屬性，這個(gè)屬...

Leo_chen 2019-08-22 11:04 評(píng)論0 收藏0
進(jìn)擊JavaScript之（四）原型與原型鏈

摘要：每一個(gè)由構(gòu)造函數(shù)創(chuàng)建的對(duì)象都會(huì)默認(rèn)的連接到該神秘對(duì)象上。在構(gòu)造方法中也具有類似的功能，因此也稱其為類實(shí)例與對(duì)象實(shí)例一般是指某一個(gè)構(gòu)造函數(shù)創(chuàng)建出來的對(duì)象，我們稱為構(gòu)造函數(shù)的實(shí)例實(shí)例就是對(duì)象。表示該原型是與什么構(gòu)造函數(shù)聯(lián)系起來的。本文您將看到以下內(nèi)容：傳統(tǒng)構(gòu)造函數(shù)的問題一些相關(guān)概念認(rèn)識(shí)原型構(gòu)造、原型、實(shí)例三角結(jié)構(gòu)圖對(duì)象的原型鏈函數(shù)的構(gòu)造函數(shù)Function 一句話說明什么...

XBaron 2019-08-20 10:45 評(píng)論0 收藏0
JavaScript深入之從原型到原型鏈

摘要：深入系列的第一篇，從原型與原型鏈開始講起，如果你想知道構(gòu)造函數(shù)的實(shí)例的原型，原型的原型，原型的原型的原型是什么，就來看看這篇文章吧。讓我們用一張圖表示構(gòu)造函數(shù)和實(shí)例原型之間的關(guān)系在這張圖中我們用表示實(shí)例原型。 JavaScript深入系列的第一篇，從原型與原型鏈開始講起，如果你想知道構(gòu)造函數(shù)的實(shí)例的原型，原型的原型，原型的原型的原型是什么，就來看看這篇文章吧。構(gòu)造函數(shù)創(chuàng)建對(duì)象我們先...

Songlcy 2019-08-21 15:32 評(píng)論0 收藏0
Javascript重溫OOP之原型與原型鏈

摘要：在構(gòu)造函數(shù)中的中定義的屬性和方法，會(huì)被創(chuàng)建的對(duì)象所繼承下來。從上面的輸出結(jié)果看出，指向了其構(gòu)造函數(shù)的，而本身也是一個(gè)對(duì)象，其內(nèi)部也有屬性，其指向的是直到最后指向，這條原型鏈才結(jié)束。和都指向，說明原型鏈到終止。 prototype原型對(duì)象每個(gè)函數(shù)都有一個(gè)默認(rèn)的prototype屬性，其實(shí)際上還是一個(gè)對(duì)象，如果被用在繼承中，姑且叫做原型對(duì)象。在構(gòu)造函數(shù)中的prototype中定義的屬性...

lindroid 2019-08-21 10:57 評(píng)論0 收藏0
JavaScript基礎(chǔ)之創(chuàng)建對(duì)象、原型、原型對(duì)象、原型鏈

摘要：在最開始的時(shí)候，原型對(duì)象的設(shè)計(jì)主要是為了獲取對(duì)象的構(gòu)造函數(shù)。同理數(shù)組通過調(diào)用函數(shù)通過調(diào)用原型鏈中描述了原型鏈的概念，并將原型鏈作為實(shí)現(xiàn)繼承的主要方法。對(duì)象的創(chuàng)建在JavaScript中創(chuàng)建一個(gè)對(duì)象有三種方式?？梢酝ㄟ^對(duì)象直接量、關(guān)鍵字new和Object.create()函數(shù)來創(chuàng)建對(duì)象。 1. 對(duì)象直接量創(chuàng)建對(duì)象最直接的方式就是在JavaScript代碼中使用對(duì)象直接量。在ES5...

wangbjun 2019-08-22 15:16 評(píng)論0 收藏0
深入學(xué)習(xí)js之——原型和原型鏈

摘要：我們用一張圖表示構(gòu)造函數(shù)和實(shí)例原型之間的關(guān)系好了構(gòu)造函數(shù)和實(shí)例原型之間的關(guān)系我們已經(jīng)梳理清楚了，那我們怎么表示實(shí)例與實(shí)例原型，也就是或者和之間的關(guān)系呢。開篇：在Brendan Eich大神為JavaScript設(shè)計(jì)面向?qū)ο笙到y(tǒng)的時(shí)候，借鑒了Self 和Smalltalk這兩門基于原型的語言，之所以選擇基于原型的面向?qū)ο笙到y(tǒng)，并不是因?yàn)闀r(shí)間匆忙，它設(shè)計(jì)起來相對(duì)簡單，而是因?yàn)閺囊婚_始B...

FingerLiu 2019-08-23 15:25 評(píng)論0 收藏0