JavaScript中构造函数与原型链之间的关系详解


Posted in Javascript onFebruary 25, 2019

在Javascript中不存在class的概念,它的class概念是通过构造函数(constructor)与原型链(prototype)来实现。

1.构造函数(constructor):创建对象时的初始化对象,总是与new 关键是一同出现。

构造函数存在以下特点:

  • 1、构造函数内的this 指向当前实例对象。
  • 2、使用new 关键字实例化当前对象。
  • 3、构造函数首字母大写,区分普通函数。
  • 4、实例对象都可以继承构造函数中的属性和方法。但是,同一个对象实例之间,无法共享属性。

2.原型(prototype):是一个对象,实现对象的属性继承。javascript 中的对象通过 proto 来指向原型对象,可以通过Object.__proto__ 来访问

3.构造函数与与原型的联系:

<script>
  function Demo(){
       
   }
   var demo = new Demo()
   var data= demo.prototype = function(){
 
   }
   
   console.log(demo.__proto__)
   console.log(data.constructor )
   console.log(data.prototype.__proto__)
   console.log(demo.constructor.prototype)
   console.log(demo.constructor)
  输出:
  {constructor: ƒ}constructor: ƒ Demo()__proto__: Object
  ƒ Function() { [native code] }
  {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}
  {constructor: ƒ}
  ƒ Demo(){  }
</script>

从以上输出结果可以看出:

构造函数的 __proto__ 指向原型对象;
原型的constructor 指向构造函数Function;
原型的 prototype.__proto__ 等于 Object.__proto__;
实例 的 constructor.prototype 指向原型;
实例的constructor 指向构造函数

引用图例:

![1460000018155881][1]

Javascript 相关文章推荐
div模拟滚动条效果示例代码
Oct 16 Javascript
node.js入门教程
Jun 01 Javascript
jQuery的:parent选择器定义和用法
Jul 01 Javascript
让JavaScript和其它资源并发下载的方法
Oct 16 Javascript
jQuery中live()方法用法实例
Jan 19 Javascript
JavaScript实现梯形乘法表的方法
Apr 25 Javascript
详解JavaScript的变量和数据类型
Nov 27 Javascript
jQuery自定义组件(导入组件)
Nov 08 Javascript
基于JS实现翻书效果的页面切换样式
Feb 16 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
Mar 08 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
Oct 23 Javascript
JavaScript中的事件与异常捕获详析
Feb 24 #Javascript
Vue 组件注册实例详解
Feb 23 #Javascript
Vue Prop属性功能与用法实例详解
Feb 23 #Javascript
Vue自定义属性实例分析
Feb 23 #Javascript
Vue动态组件与异步组件实例详解
Feb 23 #Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 #Javascript
详解关于Vuex的action传入多个参数的问题
Feb 22 #Javascript
You might like
php 无限级 SelectTree 类
2009/05/19 PHP
解析thinkphp基本配置 convention.php
2013/06/18 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
Yii框架多语言站点配置方法分析【中文/英文切换站点】
2020/04/07 PHP
利用JS实现浏览器的title闪烁
2013/07/08 Javascript
JavaScript中setAttribute用法介绍
2013/07/20 Javascript
深入探讨javascript中的数据类型
2015/03/04 Javascript
Bootstrap和Java分页实例第一篇
2016/12/23 Javascript
Node.js学习入门
2017/01/03 Javascript
React Native之TextInput组件解析示例
2017/08/22 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
layui原生表单验证的实例
2019/09/09 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
2019/09/17 Javascript
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
常见python正则用法的简单实例
2016/06/21 Python
python3.5 + PyQt5 +Eric6 实现的一个计算器代码
2017/03/11 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
python 自动批量打开网页的示例
2019/02/21 Python
Python 操作 ElasticSearch的完整代码
2019/08/04 Python
Python 异常处理Ⅳ过程图解
2019/10/18 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
基于python图像处理API的使用示例
2020/04/03 Python
python图片指定区域替换img.paste函数的使用
2020/04/09 Python
pytorch 限制GPU使用效率详解(计算效率)
2020/06/27 Python
python 获取字典键值对的实现
2020/11/12 Python
python 通过 pybind11 使用Eigen加速代码的步骤
2020/12/07 Python
python 利用openpyxl读取Excel表格中指定的行或列教程
2021/02/06 Python
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
英文自荐信
2013/12/19 职场文书
关心下一代工作先进事迹
2014/08/15 职场文书
反四风个人对照检查材料
2014/09/26 职场文书
机票销售员态度不好检讨书
2014/09/27 职场文书
收款委托书
2014/10/14 职场文书
TensorFlow中tf.batch_matmul()的用法
2021/06/02 Python
win10壁纸在哪个文件夹 win10桌面背景图片文件位置分享
2022/08/05 数码科技