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 相关文章推荐
List Installed Hot Fixes
Jun 12 Javascript
Javascript入门学习资料收集整理篇
Jul 06 Javascript
jquery在IE、FF浏览器的差别详细探讨
Apr 28 Javascript
在JavaScript的正则表达式中使用exec()方法
Jun 16 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
Aug 30 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
Apr 08 Javascript
详解vue中移动端自适应方案
May 05 Javascript
Vue的生命周期操作示例
Sep 17 Javascript
jQuery实现倒计时功能完整示例
Jun 01 jQuery
Vue+axios封装请求实现前后端分离
Oct 23 Javascript
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
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默认安装产生系统漏洞
2006/10/09 PHP
PHP编程最快明白(第一讲 软件环境和准备工作)
2010/10/25 PHP
ThinkPHP 3.2 数据分页代码分享
2014/10/14 PHP
php中base_convert()进制数字转换函数实例
2014/11/20 PHP
PHP使用gmdate实现将一个UNIX 时间格式化成GMT文本的方法
2015/03/19 PHP
PHP版QQ互联OAuth示例代码分享
2015/07/05 PHP
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
php flush无效,IIS7下php实时输出的方法
2016/08/25 PHP
Cookie跨域问题解决方案代码示例
2020/11/24 PHP
延时重复执行函数 lLoopRun.js
2007/05/08 Javascript
js获取html文件的思路及示例
2013/09/17 Javascript
JS实现网页Div层Clone拖拽效果
2015/09/26 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
2016/08/02 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
2017/08/15 Javascript
react-native-video实现视频全屏播放的方法
2018/03/19 Javascript
利用Blob进行文件上传的完整步骤
2018/08/02 Javascript
详解vue文件中使用echarts.js的两种方式
2018/10/18 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
2019/05/10 Javascript
详解vue父子组件状态同步的最佳方式
2020/09/10 Javascript
vue中实现弹出层动画效果的示例代码
2020/09/25 Javascript
[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20
2020/11/20 DOTA
python中pygame模块用法实例
2014/10/09 Python
使用Pyrex来扩展和加速Python程序的教程
2015/04/13 Python
python常见数制转换实例分析
2015/05/09 Python
Python 判断图像是否读取成功的方法
2019/01/26 Python
python中的 zip函数详解及用法举例
2020/02/16 Python
django2.2 和 PyMySQL版本兼容问题
2020/02/17 Python
纯CSS3打造属于自己的“小黄人”
2016/03/14 HTML / CSS
阿里巴巴的Oracle DBA笔试题答案-SQL tuning类
2016/04/03 面试题
防灾减灾活动总结
2014/08/30 职场文书
竞聘报告优秀范文
2014/11/06 职场文书
社区党风廉政建设调研报告
2015/01/01 职场文书
客户答谢会致辞
2015/01/20 职场文书
高中班主任工作总结(范文)
2019/08/20 职场文书
导游词之茶卡盐湖
2019/11/26 职场文书