博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript学习笔记之constructor,prototype,__proto__解惑
阅读量:6686 次
发布时间:2019-06-25

本文共 1711 字,大约阅读时间需要 5 分钟。

引言

在学习JavaScript时,不可避免的接触到了原型原型链的概念,结果被constructorprototype__proto__这些属性搞得一脸懵逼,这些都是什么鬼!!!通过谷歌浏览器调试时,看对象实例的内部结构,这三个属性也是你中有我,密不可分,完全理不清头绪。最后通过理清概念,不断验证,最终有了一些思路。

概念

要想真正弄清楚constructorprototype__proto__这些属性的之间的区别和联系,首先我们要明确定义:

  • constructor属性始终指向创建当前对象的构造函数
  • prototype属性是每个函数对象都具有的属性,被称为原型对象,因为其本身也是个对象。
  • __proto__属性是每个对象具有的属性。一旦原型对象被赋予属性和方法,那么由相应的构造函数创建的实例对象会继承prototype上的属性和方法。

事例

下表列出了实例对象和函数对象的区别:

constructor prototype __proto__
A ✔︎ ✔︎ ✔︎
a ✔︎ ✔︎

由上表可以看出实例对象是没有prototype属性的,只有函数对象才有(这一点很重要!!!),下面用代码来具体解释下以上三个属性的关系:

复制代码

JavaScript实际上执行的是:

复制代码

其中A.prototype也是个对象,它由constructor__proto__属性组成 (这一点很重要!!!),它的构造过程如下:

A.prototype = new Object();A.prototype.constructor = A;A.prototype.__proto__ = Object.prototype;复制代码

ObjectFunction原型对象

  • JavaScript中的所有对象都来自Object,所有对象从Object.prototype继承方法和属性,尽管它们可能被覆盖。例如,其他构造函数的原型将覆盖constructor属性并提供自己的toString()方法。Object原型对象的更改将传播到所有对象,除非受到这些更改的属性和方法沿原型链进一步覆盖。它的构造过程如下:

    Object.prototype = new Object();Object.prototype.constructor = Object;Object.prototype.__proto__ = null;...Object.__proto__ = Function.prototype;复制代码
  • 全局的Function对象没有自己的属性和方法, 但是, 因为它本身也是函数,所以它也会通过原型链从Function.prototype上继承部分属性和方法。Function实例从Function.prototype 继承了一些属性和方法。 同其他构造函数一样, 你可以改变构造函数的原型从而使得所有的Function实例的属性和方法发生改变。它的构造过程如下:

    Function.prototype = new Function();Function.prototype.constructor = Function;Function.prototype.__proto__ = Object.prototype;...Function.__proto__ = Function.prototype;复制代码

验证

我们通过谷歌浏览器来进行调试,来验证我们的结论,先来看下Object原型对象,如下图:

再来看下Function原型对象,如下图:

最后看下a_a实例对象,如下图:

红框框住的部分就是所谓的原型链,原型链中的方法,实例对象a_a都可以访问,JavaScript也是用原型链来实现继承的。

另外,还有一件有趣的事情,如下图:

可以无限延展下去,是不是很有趣,有兴趣的同学可以试一下,可以加深你对这三个属性的理解,哈哈?。

结语

关于怎么用原型和原型链来实现继承,网上有很多好的博文供大家参考,大家也可以参考以下链接,我在这里就不再废话了。本文如有错误,希望指正,不胜感激!

参考链接

转载地址:http://kyeao.baihongyu.com/

你可能感兴趣的文章
如何修复Kindle频繁自动锁屏和解锁
查看>>
MongoDB在Windows下安装配置
查看>>
CAFFE安装(3):cuDNN v4
查看>>
hdu 1016 Prime Ring Problem
查看>>
Spring+SpringMVC+MyBatis深入学习及搭建(一)——MyBatis的基础知识
查看>>
如何把写好的文件放到提供的地址上提交代码
查看>>
Django 2.0 新特性
查看>>
Tornado Web 服务器
查看>>
精选7款绚丽的HTML5和jQuery图片动画特效
查看>>
【转载】桌面WPF中嵌入Unity3D(Standalone)引擎并实现socket通信
查看>>
Could not resolve archetype org.apache.maven.archetypes:maven-archetype-quickstart
查看>>
Eclipse 项目有红感叹号、小红叉
查看>>
如何使用Dev C++调试(debug)c程序
查看>>
[算法模板]高斯消元
查看>>
BZOJ2242 计算器
查看>>
[javaSE] 集合框架(共性方法)
查看>>
StringBuild,StringFormat," "+" " 三种方法速度测试
查看>>
poj2018 Best Cow Fences
查看>>
SpringBoot之demo
查看>>
弹出窗口:PopupWindow 详解
查看>>