真正的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 :'<div class="pg-group">' +
        
                        '</div>',
                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__的区别:
小白和老鸟,或者叫孙子和爷爷也可以。

clipboard.png

期待和大家交流,共同进步,欢迎大家加入我创建的与前端开发密切相关的技术讨论小组:

努力成为优秀前端工程师!


趁你还年轻
4.1k 声望4.1k 粉丝