JS原型prototype和__proto__用法实例分析


Posted in Javascript onMarch 14, 2020

本文实例讲述了JS原型prototype和__proto__用法。分享给大家供大家参考,具体如下:

先来看一个实例

function Foo() {
}
var foo = new Foo();
console.log(foo.prototype);// undefined
console.log(foo.__proto__ === Foo.prototype);// true
console.log(Foo.__proto__);  [Function]

Foo.__proto__结果如下:

JS原型prototype和__proto__用法实例分析

console.log(Foo.prototype);// [object Object]

Foo.prototype结果如下:

JS原型prototype和__proto__用法实例分析

console.log(Foo.prototype.prototype);// undefined

实例说明了:

1、 foo 是 Foo 的一个实例,不是一个函数,所以没有prototype;

Foo是Function的一个实例,而Function是一个函数,他的实例Foo也是一个函数,所以他们都有prototype。此外Object Array RegExp等也是函数。Math就仅仅是一个new Object() ,不是函数。

2、构造函数的prototype,默认情况下就是一个new Object()还额外添加了一个constructor属性。所以说默认是没有prototype只有__proto__的。

除了Object.prototype这个对象,其他所有的对象都会有__proto__属性,之后函数才会有prototype属性。

在创建对象的时候会自动创建一个__proto__属性,指向它构造函数的prototype,当访问这个对象的属性的时候会顺带访问__proto__中对应的属性,也就是构造函数prototype这样实现了继承。

只有创建函数的时候才会创建一个prototype属性,目的就是为了完成上面的继承方式。

总结:

<1>不管是普通对象还是函数对象,它们都有一个隐含属性”__proto__ “,而这属性就是我们通常说的原型(属性),它其实就是一个Object类型的对象。

<2>对于函数对象,它们还会多一个prototype的属性,它和以它为构造函数创建的普通对象的”__proto__ “属性等同,即"new XXXt().__proto__ ===XXX.prototype"为true,即对象XXX中都有__proto__属性就是一个指针,指向XXX构造函数中的prototype属性。

摘录网上

一个图(橙色箭头是初始的关系,绿色是执行 var Fish = new Fu... 创建,蓝色是执行f1= new Fish()创建。)

JS原型prototype和__proto__用法实例分析

这样f1 就可以通过__proto__ 访问 Fish.prototype中的属性(当然这是程序执行的时候自动查找的)。Fish就可以访问 Function.prototype定义的属性。所有对象都可以访问Object.prototype 中的属性。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript 学习笔记(onchange等)
Nov 14 Javascript
jQuery的选择器中的通配符使用介绍
Mar 20 Javascript
Jquery焦点与失去焦点示例应用
Jun 10 Javascript
IE8中动态创建script标签onload无效的解决方法
Dec 22 Javascript
在javascript中创建对象的各种模式解析
May 16 Javascript
javascript中this关键字详解
Dec 12 Javascript
基于javascript的Form表单验证
Dec 29 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
Oct 31 Javascript
Vue实现web分页组件详解
Nov 28 Javascript
vue计算属性无法监听到数组内部变化的解决方案
Nov 06 Javascript
Ajax实现异步加载数据
Nov 17 Javascript
一文了解JavaScript用Element Traversal新属性遍历子元素
Nov 27 Javascript
JS数组的高级使用方法示例小结
Mar 14 #Javascript
vue-resource post数据时碰到Django csrf问题的解决
Mar 13 #Javascript
js函数和this用法实例分析
Mar 13 #Javascript
js对象简介与基本用法示例
Mar 13 #Javascript
JS自定义滚动条效果
Mar 13 #Javascript
js Math数学简单使用操作示例
Mar 13 #Javascript
Vue实现仿iPhone悬浮球的示例代码
Mar 13 #Javascript
You might like
PHP用SAX解析XML的实现代码与问题分析
2011/08/22 PHP
PHP中读取照片exif信息的方法
2014/08/20 PHP
PHP实现简单的计算器
2020/08/28 PHP
jquery键盘事件介绍
2011/01/31 Javascript
图片轮换效果实现代码(点击按钮停止执行)
2013/04/12 Javascript
JQuery对表单元素的基本操作使用总结
2014/07/18 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
2016/05/05 Javascript
Angularjs中的ui-bootstrap的使用教程
2017/02/19 Javascript
Jquery EasyUI $.Parser
2017/06/02 jQuery
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
JS+php后台实现文件上传功能详解
2019/03/02 Javascript
vue 详情跳转至列表页实现列表页缓存
2019/03/27 Javascript
JavaScript canvas实现跟随鼠标事件
2020/02/10 Javascript
vue中实现弹出层动画效果的示例代码
2020/09/25 Javascript
Vue仿百度搜索功能
2020/12/28 Vue.js
Python下载懒人图库JavaScript特效
2015/05/28 Python
Python随机生成数据后插入到PostgreSQL
2016/07/28 Python
朴素贝叶斯Python实例及解析
2018/11/19 Python
创建Django项目图文实例详解
2019/06/06 Python
Python实现FM算法解析
2019/06/18 Python
PyTorch的深度学习入门之PyTorch安装和配置
2019/06/27 Python
Python3简单爬虫抓取网页图片代码实例
2019/08/26 Python
Python 自由定制表格的实现示例
2020/03/20 Python
在python下实现word2vec词向量训练与加载实例
2020/06/09 Python
Python接口自动化测试框架运行原理及流程
2020/11/30 Python
CSS Grid布局教程之什么是网格布局
2014/12/30 HTML / CSS
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
2020/11/16 HTML / CSS
MATCHESFASHION.COM法国官网:英国奢侈品零售商
2018/01/04 全球购物
最新党员的自我评价分享
2013/11/04 职场文书
个人求职信范文
2014/05/24 职场文书
供应商食品安全承诺书
2015/04/29 职场文书
新闻稿标题
2015/07/18 职场文书
Python-OpenCV实现图像缺陷检测的实例
2021/06/11 Python
quickjs 封装 JavaScript 沙箱详情
2021/11/02 Javascript
Vue3中toRef与toRefs的区别
2022/03/24 Vue.js