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 相关文章推荐
用js实现计算代码行数的简单方法附代码
Aug 13 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
Jan 08 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
Jan 13 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
Dec 23 Javascript
在JavaScript中模拟类(class)及类的继承关系
May 20 Javascript
JS实现倒计时(天数、时、分、秒)
Nov 16 Javascript
IntersectionObserver API 详解篇
Dec 11 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
Jul 13 Javascript
iview Upload组件多个文件上传的示例代码
Sep 30 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
Oct 23 Javascript
JavaScript canvas仿代码流瀑布
Feb 10 Javascript
JavaScript this关键字指向常用情况解析
Sep 02 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 模板高级篇总结
2006/12/21 PHP
PHP has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
php检测文件编码的方法示例
2014/04/25 PHP
php用户注册信息验证正则表达式
2015/11/12 PHP
php高清晰度无损图片压缩功能的实现代码
2018/12/09 PHP
laravel 解决Validator使用中出现的问题
2019/10/25 PHP
js 处理URL实用技巧
2010/11/23 Javascript
2014 年最热门的21款JavaScript框架推荐
2014/12/25 Javascript
js验证上传图片的方法
2015/05/12 Javascript
JS中常用的正则表达式
2016/09/29 Javascript
JavaScript对象创建模式实例汇总
2016/10/03 Javascript
AngularJS控制器之间的通信方式详解
2016/11/03 Javascript
jquery validation验证表单插件
2017/01/07 Javascript
小程序关于请求同步的总结
2019/05/05 Javascript
vue router总结 $router和$route及router与 router与route区别
2019/07/05 Javascript
[01:00:35]2018DOTA2亚洲邀请赛3月30日B组 EffcetVSMineski
2018/03/31 DOTA
Python中的yield浅析
2014/06/16 Python
删除python pandas.DataFrame 的多重index实例
2018/06/08 Python
对python中字典keys,values,items的使用详解
2019/02/03 Python
Python 中包/模块的 `import` 操作代码
2019/04/22 Python
通过python实现随机交换礼物程序详解
2019/07/10 Python
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
canvas与html5实现视频截图功能示例
2016/12/15 HTML / CSS
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
这段代码难道不该打印出56吗
2013/02/27 面试题
在Ajax应用中信息是如何在浏览器和服务器之间传递的
2016/05/31 面试题
如何拷贝一整个Java对象,包括它的状态
2013/12/27 面试题
跟单文员岗位职责
2014/01/03 职场文书
党员自我批评与反省材料
2014/02/10 职场文书
经贸日语专业个人求职信范文
2014/04/29 职场文书
关于读书的演讲稿
2014/05/07 职场文书
党员个人对照检查材料
2014/10/01 职场文书
司机个人年终总结
2015/03/03 职场文书
行政处罚决定书
2015/06/24 职场文书
如何利用Python实现一个论文降重工具
2021/07/09 Python
Mysql 文件配置解析介绍
2022/05/06 MySQL