图解prototype、proto和constructor的三角关系


Posted in Javascript onJuly 31, 2016

javascript里的关系又多又乱。作用域链是一种单向的链式关系,还算简单清晰;this机制的调用关系,稍微有些复杂;而关于原型,则是prototype、proto和constructor的三角关系。本文先用一张图开宗明义,然后详细解释原型的三角关系

图示图解prototype、proto和constructor的三角关系

概念

上图中的复杂关系,实际上来源就两行代码

function Foo(){};var f1 = new Foo;

【构造函数】

用来初始化新创建的对象的函数是构造函数。在例子中,Foo()函数是构造函数

【实例对象】

通过构造函数的new操作创建的对象是实例对象。可以用一个构造函数,构造多个实例对象

function Foo(){};
var f1 = new Foo;
var f2 = new Foo;
console.log(f1 === f2);//false

【原型对象及prototype】

构造函数有一个prototype属性,指向实例对象的原型对象。通过同一个构造函数实例化的多个对象具有相同的原型对象。经常使用原型对象来实现继承

function Foo(){};
Foo.prototype.a = 1;
var f1 = new Foo;
var f2 = new Foo;console.log(Foo.prototype.a);
//1
console.log(f1.a);//1
console.log(f2.a);//1

【constructor】

原型对象有一个constructor属性,指向该原型对象对应的构造函数

function Foo(){};
console.log(Foo.prototype.constructor === Foo);//true

由于实例对象可以继承原型对象的属性,所以实例对象也拥有constructor属性,同样指向原型对象对应的构造函数

function Foo(){};
var f1 = new Foo;
console.log(f1.constructor === Foo);//true

【proto】

实例对象有一个proto属性,指向该实例对象对应的原型对象

function Foo(){};
var f1 = new Foo;
console.log(f1.__proto__ === Foo.prototype);//true

说明

概念介绍完了,现在对图示的关系进行详细说明

function Foo(){};
var f1 = new Foo;

【第一部分: Foo】

图解prototype、proto和constructor的三角关系

实例对象f1是通过构造函数Foo()的new操作创建的。构造函数Foo()的原型对象是Foo.prototype;实例对象f1通过__proto__属性也指向原型对象Foo.prototype

function Foo(){};
var f1 = new Foo;
console.log(f1.__proto === Foo.prototype);//true

实例对象f1本身并没有constructor属性,但它可以继承原型对象Foo.prototype的constructor属性

function Foo(){};
var f1 = new Foo;console.log(Foo.prototype.constructor === Foo);//true
console.log(f1.constructor === Foo);//true
console.log(f1.hasOwnProperty('constructor'));//false

下图是实例对象f1的控制台效果

图解prototype、proto和constructor的三角关系

【第二部分: Object】

图解prototype、proto和constructor的三角关系

Foo.prototype是f1的原型对象,同时它也是实例对象。实际上,任何对象都可以看做是通过Object()构造函数的new操作实例化的对象

所以,Foo.prototype作为实例对象,它的构造函数是Object(),原型对象是Object.prototype。相应地,构造函数Object()的prototype属性指向原型对象Object;实例对象Foo.prototype的proto属性同样指向原型对象Object

function Foo(){};
var f1 = new Foo;
console.log(Foo.prototype.__proto__ === Object.prototype);//true

实例对象Foo.prototype本身具有constructor属性,所以它会覆盖继承自原型对象Object.prototype的constructor属性

function Foo(){};
var f1 = new Foo;
console.log(Foo.prototype.constructor === Foo);//true
console.log(Object.prototype.constructor === Object);//true
console.log(Foo.prototype.hasOwnProperty('constructor'));//true

下图是实例对象Foo.prototype的控制台效果

图解prototype、proto和constructor的三角关系

如果Object.prototype作为实例对象的话,其原型对象是什么,结果是null。私以为,这可能也是typeof null的结果是'object'的原因之一吧

console.log(Object.prototype.__proto__ === null);//true

【第三部分: Function】

图解prototype、proto和constructor的三角关系

前面已经介绍过,函数也是对象,只不过是具有特殊功能的对象而已。任何函数都可以看做是通过Function()构造函数的new操作实例化的结果

如果把函数Foo当成实例对象的话,其构造函数是Function(),其原型对象是Function.prototype;类似地,函数Object的构造函数也是Function(),其原型对象是Function.prototype

function Foo(){};
var f1 = new Foo;console.log(Foo.__proto__ === Function.prototype);//true
console.log(Object.__proto__ === Function.prototype);//true

原型对象Function.prototype的constructor属性指向构造函数Function();实例对象Object和Foo本身没有constructor属性,需要继承原型对象Function.prototype的constructor属性

function Foo(){};
var f1 = new Foo;
console.log(Function.prototype.constructor === Function);//true
console.log(Foo.constructor === Function);//true
console.log(Foo.hasOwnProperty('constructor'));//false
console.log(Object.constructor === Function);//true
console.log(Object.hasOwnProperty('constructor'));//false

所有的函数都可以看成是构造函数Function()的new操作的实例化对象。那么,Function可以看成是调用其自身的new操作的实例化的结果

所以,如果Function作为实例对象,其构造函数是Function,其原型对象是Function.prototype

console.log(Function.__proto__ === Function.prototype);//true
console.log(Function.prototype.constructor === Function);//true
console.log(Function.prototype === Function);//true

如果Function.prototype作为实例对象的话,其原型对象是什么呢?和前面一样,所有的对象都可以看成是Object()构造函数的new操作的实例化结果。所以,Function.prototype的原型对象是Object.prototype,其原型函数是Object()

console.log(Function.prototype.__proto__ === Object.prototype);//true

第二部分介绍过,Object.prototype的原型对象是null

console.log(Object.prototype.__proto__ === null);//true

总结

【1】函数(Function也是函数)是new Function的结果,所以函数可以作为实例对象,其构造函数是Function(),原型对象是Function.prototype

【2】对象(函数也是对象)是new Object的结果,所以对象可以作为实例对象,其构造函数是Object(),原型对象是Object.prototype

【3】Object.prototype的原型对象是null

Javascript 相关文章推荐
js常用代码段整理
Nov 30 Javascript
基于JQuery 滑动与动画的说明介绍
Apr 18 Javascript
jquery实现控制表格行高亮实例
Jun 05 Javascript
jQuery实现的输入框选择时间插件用法实例
Feb 28 Javascript
JQuery实现动态添加删除评论的方法
May 18 Javascript
JS动态添加选项案例分析
Oct 17 Javascript
AngularJS实现路由实例
Feb 12 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
Aug 11 Javascript
vue父子组件的嵌套的示例代码
Sep 08 Javascript
把vue-router和express项目部署到服务器的方法
Feb 21 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
Jun 13 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
Sep 06 Javascript
JavaScript数据类型转换的注意事项
Jul 31 #Javascript
关于JavaScript 原型链的一点个人理解
Jul 31 #Javascript
jquery实现界面无刷新加载登陆注册
Jul 30 #Javascript
AngularJS ng-change 指令的详解及简单实例
Jul 30 #Javascript
Javascript中级语法快速入手
Jul 30 #Javascript
AngularJS ng-blur 指令详解及简单实例
Jul 30 #Javascript
AngularJS ng-bind-template 指令详解
Jul 30 #Javascript
You might like
php创建基本身份认证站点的方法详解
2013/06/08 PHP
JS异常处理try..catch语句的作用和实例
2014/05/05 PHP
PHP中error_reporting()用法详解
2015/08/31 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
Thinkphp集成抖音SDK的实现方法
2020/04/28 PHP
硬盘浏览程序,保存成网页格式便可使用
2006/12/03 Javascript
微博@符号的用户名提示效果。(想@到谁?)
2010/11/05 Javascript
如何设置一定时间内只能发送一次请求
2014/02/28 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
2014/10/11 Javascript
详细分析JavaScript变量类型
2015/07/08 Javascript
浅析js中substring和substr的方法
2015/11/09 Javascript
JavaScript的函数式编程基础指南
2016/03/19 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
2016/08/29 Javascript
vue-router路由简单案例介绍
2017/02/21 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
js根据json数据中的某一个属性来给数据分组的方法
2018/10/08 Javascript
vue实现的双向数据绑定操作示例
2018/12/04 Javascript
vue 动态表单开发方法案例详解
2019/12/02 Javascript
python封装对象实现时间效果
2020/04/23 Python
Python Paramiko模块的使用实际案例
2018/02/01 Python
Python异常处理操作实例详解
2018/08/28 Python
django删除表重建的实现方法
2019/08/28 Python
python爬虫-模拟微博登录功能
2019/09/12 Python
Django models文件模型变更错误解决
2020/05/11 Python
520使用Python实现“我爱你”表白
2020/05/20 Python
使用Keras实现Tensor的相乘和相加代码
2020/06/18 Python
什么是python的函数体
2020/06/19 Python
PAUL HEWITT手表美国站:德国北部时尚生活配饰品牌,船锚元素
2017/11/18 全球购物
来自圣地亚哥的实惠太阳镜:Knockaround
2018/08/27 全球购物
2014年端午节演讲稿范文
2014/05/23 职场文书
退税申请报告怎么写
2015/05/18 职场文书
《圆的周长》教学反思
2016/02/17 职场文书
Pytorch 如何实现常用正则化
2021/05/27 Python
Python中22个万用公式的小结
2021/07/21 Python
Python NumPy灰度图像的压缩原理讲解
2021/08/04 Python
Vue router配置与使用分析讲解
2022/12/24 Vue.js