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编程起步(第二课)
Jan 10 Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
Oct 01 Javascript
jQuery的DOM操作之删除节点示例
Jan 03 Javascript
Linux下使用jq友好的打印JSON技巧分享
Nov 18 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
Aug 10 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
Aug 21 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
Sep 17 Javascript
Vue基于NUXT的SSR详解
Oct 24 Javascript
微信小程序实现运动步数排行功能(可删除)
Jul 05 Javascript
微信小程序中weui用法解析
Oct 21 Javascript
JavaScript链式调用原理与实现方法详解
May 16 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
Nov 06 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
Cannot modify header information错误解决方法
2008/10/08 PHP
一步一步学习PHP(1) php开发环境配置
2010/02/15 PHP
DISCUZ在win2003环境下 Unable to access ./include/common.inc.php in... 的问题终极解决方案
2011/11/21 PHP
php smarty truncate UTF8乱码问题解决办法
2014/06/13 PHP
Laravel最佳分割路由文件(routes.php)的方式
2016/08/04 PHP
javascript引用对象的方法代码
2007/08/13 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
2011/12/12 Javascript
JS与C#编码解码
2013/12/03 Javascript
15个常用的jquery代码片段
2015/12/19 Javascript
JS+CSS3模拟溢出滚动效果
2016/08/12 Javascript
Angular的MVC和作用域
2016/12/26 Javascript
js实现带简单弹性运动的导航条
2017/02/22 Javascript
详解vue模拟加载更多功能(数据追加)
2017/06/23 Javascript
详谈innerHTML innerText的使用和区别
2017/08/18 Javascript
JavaScript+CSS相册特效实例代码
2017/09/07 Javascript
Vue.js组件间通信方式总结【推荐】
2018/11/23 Javascript
JSON基本语法及与JavaScript的异同实例分析
2019/01/04 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
vue $set 给数据赋值的实例
2019/11/09 Javascript
老生常谈Python进阶之装饰器
2017/05/11 Python
在vscode中配置python环境过程解析
2019/09/28 Python
Python中无限循环需要什么条件
2020/05/27 Python
Python Excel vlookup函数实现过程解析
2020/06/22 Python
详解如何在pyqt中通过OpenCV实现对窗口的透视变换
2020/09/20 Python
Python修改DBF文件指定列
2020/12/19 Python
HTML5本地存储和本地数据库实例详解
2017/09/05 HTML / CSS
StringBuilder和String的区别
2015/05/18 面试题
职称自我鉴定
2013/10/15 职场文书
出纳的岗位职责
2013/11/09 职场文书
初中生个人学习的自我评价
2013/12/04 职场文书
质检员岗位职责
2013/12/17 职场文书
电钳专业个人求职信
2014/01/04 职场文书
《草虫的村落》教学反思
2014/02/16 职场文书
单位委托书怎么写
2014/08/02 职场文书
公司证明怎么写
2014/09/22 职场文书
计划生育工作汇报
2014/10/28 职场文书