真正的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__的区别:
小白和老鸟,或者叫孙子和爷爷也可以。
期待和大家交流,共同进步,欢迎大家加入我创建的与前端开发密切相关的技术讨论小组:
- SegmentFault技术圈:ES新规范语法糖
- SegmentFault专栏:趁你还年轻,做个优秀的前端工程师
- 知乎专栏:趁你还年轻,做个优秀的前端工程师
- Github博客: 趁你还年轻233的个人博客
- 前端开发QQ群:660634678
- 微信公众号: 人兽鬼 / excellent_developers
努力成为优秀前端工程师!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。