JavaScript 之原型和原型鏈

Mike617 發布于2019-08-23 18:25 / 2394人閱讀

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

幾個概念

構造函數：構造函數實際上是一個普通函數，通過new操作符，可以利用構造函數快速創建對象；

prototype：每個構造函數自身上都會有一個prototype屬性，該屬性值為一個對象，這個對象具有一個constructor屬性，constructor指向構造函數自身；

實例：通過構造函數創建的對象，可以看做是該構造函數的實例；

__proto__：通過構造函數創建的每個對象上面，都會有一個__proto__屬性，該屬性指向構造函數的prototype；

什么是原型

在JavaScript中，每個對象會有一個原型對象。對象會從原型對象繼承一些屬性和方法。

什么是原型鏈

在JavaScript中，訪問一個對象的屬性時，JS引擎會首先在該對象自身上線查找該屬性。如果找到了，則直接返回該屬性的值；如果沒有找到，則會去改對象的原型上面繼續查找。如果對象的原型上面也沒有這個屬性，則繼續在原型對象的上原型上面查找，如此一級級繼續往上，直到原型為null，此時JS引擎返回該對象的屬性值為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

一些實例 Object.getPrototype

預測下面幾個表達式的結果

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

答案：

true;

如何創建一個沒有任何原型的對象？

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

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

GPU云服務器云服務器原型原型鏈原型鏈 javascript原型原型鏈繼承

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/105206.html

學習JavaScript之原型鏈

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

Leo_chen 2019-08-22 11:04 評論0 收藏0
進擊JavaScript之（四）原型與原型鏈

摘要：每一個由構造函數創建的對象都會默認的連接到該神秘對象上。在構造方法中也具有類似的功能，因此也稱其為類實例與對象實例一般是指某一個構造函數創建出來的對象，我們稱為構造函數的實例實例就是對象。表示該原型是與什么構造函數聯系起來的。本文您將看到以下內容：傳統構造函數的問題一些相關概念認識原型構造、原型、實例三角結構圖對象的原型鏈函數的構造函數Function 一句話說明什么...

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

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

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

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

lindroid 2019-08-21 10:57 評論0 收藏0
JavaScript基礎之創建對象、原型、原型對象、原型鏈

摘要：在最開始的時候，原型對象的設計主要是為了獲取對象的構造函數。同理數組通過調用函數通過調用原型鏈中描述了原型鏈的概念，并將原型鏈作為實現繼承的主要方法。對象的創建在JavaScript中創建一個對象有三種方式。可以通過對象直接量、關鍵字new和Object.create()函數來創建對象。 1. 對象直接量創建對象最直接的方式就是在JavaScript代碼中使用對象直接量。在ES5...

wangbjun 2019-08-22 15:16 評論0 收藏0
深入學習js之——原型和原型鏈

摘要：我們用一張圖表示構造函數和實例原型之間的關系好了構造函數和實例原型之間的關系我們已經梳理清楚了，那我們怎么表示實例與實例原型，也就是或者和之間的關系呢。開篇：在Brendan Eich大神為JavaScript設計面向對象系統的時候，借鑒了Self 和Smalltalk這兩門基于原型的語言，之所以選擇基于原型的面向對象系統，并不是因為時間匆忙，它設計起來相對簡單，而是因為從一開始B...

FingerLiu 2019-08-23 15:25 評論0 收藏0