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 相关文章推荐
javascript form 验证函数 弹出对话框形式
Jun 23 Javascript
层序遍历在ExtJs的TreePanel中的应用
Oct 16 Javascript
基于jquery的气泡提示效果
May 31 Javascript
js实现快速分享功能(你的文章分享工具)
Jun 25 Javascript
css+js实现部分区域高亮可编辑遮罩层
Mar 04 Javascript
js 动态修改css文件的方法
Aug 05 Javascript
浅谈node.js中async异步编程
Oct 22 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
Nov 09 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 Javascript
Vue学习笔记进阶篇之单元素过度
Jul 19 Javascript
react+ant design实现Table的增、删、改的示例代码
Dec 27 Javascript
Vue 中使用 typescript的方法详解
Feb 17 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
Yii不依赖Model的表单生成器用法实例
2014/12/04 PHP
ThinkPHP提示错误Fatal error: Allowed memory size的解决方法
2015/02/12 PHP
PDO::getAttribute讲解
2019/01/28 PHP
PHP商品秒杀问题解决方案实例详解【mysql与redis】
2019/07/22 PHP
FileUpload上传图片(图片不变形)
2010/08/05 Javascript
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
javascript运行机制之this详细介绍
2014/02/07 Javascript
javascript中parseInt()函数的定义和用法分析
2014/12/20 Javascript
jQuery过滤选择器经典应用
2016/08/18 Javascript
使用JQuery中的trim()方法去掉前后空格
2016/09/16 Javascript
vue实现可增删查改的成绩单
2016/10/27 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
2017/05/25 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
2018/11/28 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
2019/02/18 Javascript
jQuery选择器之层次选择器用法实例分析
2019/02/19 jQuery
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
2019/08/16 Javascript
KnockoutJS数组比较算法实例详解
2019/11/25 Javascript
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
Python scikit-learn 做线性回归的示例代码
2017/11/01 Python
深入理解Python中的super()方法
2017/11/20 Python
python数据批量写入ScrolledText的优化方法
2018/10/11 Python
python对列进行平移变换的方法(shift)
2019/01/10 Python
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
Django+uni-app实现数据通信中的请求跨域的示例代码
2019/10/12 Python
python数据分析:关键字提取方式
2020/02/24 Python
可以随进度显示不同颜色的css3进度条分享
2014/04/11 HTML / CSS
印尼穆斯林时尚购物网站:Hijabenka
2016/12/10 全球购物
经典大学生求职信范文
2014/01/06 职场文书
高三语文教学反思
2014/01/15 职场文书
目标管理责任书
2014/04/15 职场文书
需求分析说明书
2014/05/09 职场文书
我的中国梦演讲稿400字
2014/08/19 职场文书
英文道歉信
2015/01/20 职场文书
gtx1650怎么样 gtx1650显卡相当于什么级别
2022/04/08 数码科技
Python使用Web框架Flask开发项目
2022/06/01 Python