prototype和proto直觀區別

MSchumi 發布于2019-08-20 17:16 / 1533人閱讀

摘要：寫一個我最近遇到的例子來直觀的理解文件中的創建新類需要的配置項缺失定義類時繼承的類的配置項缺失此時的對象數據結構見下圖，可以直觀觀察出和的區別小白和老鳥，或者叫孫子和爺爺也可以。

真正的prototype與__proto__的區別，在于prototype原始類設計者，也就是說，原始類設計人員需要對prototype進行一系列操作，而__proto__則是二次開發人員，比如我var app = new Vue(),我想要為Vue實例添加一個方法，就要用app.__proto__，而app.prototype只有尤雨溪才有權限去修改。

顯式原型：prototype

隱式原型：__proto__

可以形象地抽象成2類人：

prototype：小白，個性張揚，飛揚跋扈，大張旗鼓，做事生怕天下人都不知道。

__proto__：老鳥，個性沉穩，深藏功名，暗度陳倉，做事最親近的人都不告訴。
至于為什么，看了下文就能略知一二！

其實從字面意思就可以看出兩者區別。

顯式：明顯的，表現出來的，顯示出來的，當前文件中肉眼可以看見的
隱式：隱藏的，沒有表現出來的，隱藏起來的，當前文件中肉眼看不到的
原型：原型是Javascript繼承中的核心，通過對原型鏈從最上層向最下層進行查找，來實現方法的調用。
寫一個我最近遇到的例子來直觀的理解：

html文件中的script:

        var myProgressOne = new mProgress();
        var myClickCallback = function(params){
            console.log(params);
        }

創建新mProgress類需要的script:

        var mProgress = function(){
        
        };
        mProgress.prototype = $.extend( new MCBASE(), {
                version:"0.0.1",
                template :"" +
        
                        "",
                defaultOption : {
                    "colors":[],
                    "data": [],
                },
              setDom: function( dom ){
                    this.wrap = this._setDom( dom );
                    if( !this.wrap ){
                        console.log("配置項缺失");
                        return false;
                    }
                },
              ...
         }

定義mProgress類時繼承的類的script:

       var MCBASE = function(){
           this.version = "0.0.1";
       };
       
       MCBASE.prototype = {
           _getMod : function( ){
               return this;
           },
           _setDom : function(  dom ){
               if( !dom || !dom.length ){
                   console.log("配置項缺失");
                   return null;
               }
           },
           _formateLargeData : function( largeData, fixed ){
           
           }
           ...
        };

此時的對象數據結構見下圖，可以直觀觀察出prototype和__proto__的區別：
小白和老鳥，或者叫孫子和爺爺也可以。

云服務器 GPU云服務器服務器_云區別 i節點_檢查和修復linux 服務器虛擬化_集群和云 prototype_proto

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

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

總結javascript基礎概念（三）：js對象原型鏈

摘要：執行構造函數的一步說明對象可以通過函數來創建。是最頂級的構造函數，對象里面，就有好幾個其他屬性。構造函數與普通函數并沒有區別，只是調用方式不同。主要問題：1、構造函數和普通函數有區別么？什么區別？2、prototype和__proto__有什么不同？3、instanceof的作用機制，為什么有限制？4、ES6的相關方法，Class繼承原理？三、對象與原型 (一)、數據類型 Js...

yzd 2019-08-26 11:42 評論0 收藏0
淺談 JS 創建對象的 8 種模式

摘要：模式工廠模式構造器模式通過對象實現模式構造器與原型方式的混合模式動態原型模式混合工廠模式模式字面量的表現形式等價于即以對象為一個原型模板新建一個以這個原型模板為原型的對象區別創建一個原型為的對象在里查看各個新建對象的區別可以看出前種模式創建 Objct 模式工廠模式構造器模式通過 Function 對象實現 prototype 模式構造器與原型方式的混合模式動態原型模式混...

caoym 2019-08-21 10:43 評論0 收藏0
深入理解 JavaScript 中的 class

摘要：在規范中，引入了的概念。使用中的聲明一個類，是非常簡單的事。中面向對象實例化的背后原理，實際上就是原型對象。與區別理解上述原理后，還需要注意與屬性的區別。實際上，在中，類繼承的本質依舊是原型對象。在 ES6 規范中，引入了 class 的概念。使得 JS 開發者終于告別了，直接使用原型對象模仿面向對象中的類和類繼承時代。但是JS 中并沒有一個真正的 class 原始類型， clas...

Vicky 2019-08-20 14:16 評論0 收藏0
淺談：快速理解JS的原型與原型鏈

摘要：中有基本類型和復雜類型的區分。原型與原型鏈這里，就引入了兩個新的概念。原型對象就是用來存放聲明對象中共有的那部分屬性。而原型對象自身也是一個對象，它也有自己的原型對象。這樣層層上溯，就形成了一個類似鏈表的結構，這就是原型鏈。 JavaScript中有基本類型和復雜類型的區分。當我們在聲明一個基本類型時： var n1= 1; console.log(n1); //1 這時我們可以用N...

ZoomQuiet 2019-08-23 14:11 評論0 收藏0
如果再被問到原型和原型鏈......

摘要：事后整理當時的思路如下簡約版第一步是對象，對象都有原型也叫原型指針，指向構造函數的原型對象。第二步是構造函數，構造函數也是函數，函數除了有原型對象外，也有原型指針。第四步作為中的內建構造函數，同樣擁有原型指針和原型對象。前段時間求職過程中，經常會被問到關于原型和原型鏈，就問題本身而言并不難，主要是考察對JavaScript基本概念的理解，但如何能夠說明白確實需要認真準備下。我印象比...

muzhuyu 2019-08-22 18:44 評論0 收藏0