prototype和proto直观区别

MSchumi 发布于2019-08-20 17:16 / 1515人阅读

摘要：写一个我最近遇到的例子来直观的理解文件中的创建新类需要的配置项缺失定义类时继承的类的配置项缺失此时的对象数据结构见下图，可以直观观察出和的区别小白和老鸟，或者叫孙子和爷爷也可以。

真正的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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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