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 相关文章推荐
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
May 30 Javascript
ASP小贴士/ASP Tips javascript tips可以当桌面
Dec 10 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
Oct 20 Javascript
利用JavaScript阻止表单提交的两种方法
Aug 11 Javascript
详解Node.js如何开发命令行工具
Aug 14 Javascript
关于angular js_$watch监控属性和对象详解
Apr 24 Javascript
在vue中通过axios异步使用echarts的方法
Jan 13 Javascript
React router动态加载组件之适配器模式的应用详解
Sep 12 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 Javascript
vue 利用路由守卫判断是否登录的方法
Sep 29 Javascript
layui table 多行删除(id获取)的方法
Sep 12 Javascript
使用preload预加载页面资源时注意事项
Feb 03 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--用万网的接口实现域名查询功能
2012/12/13 PHP
WordPress中登陆后关闭登陆页面及设置用户不可见栏目
2015/12/31 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
javascript匿名函数应用示例介绍
2014/03/07 Javascript
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
如何调试异步加载页面里包含的js文件
2014/10/30 Javascript
Javascript中的方法链(Method Chaining)介绍
2015/03/15 Javascript
jQuery鼠标事件汇总
2015/08/30 Javascript
AngularJS封装指令方法详解
2016/12/12 Javascript
jquery实现的table排序功能示例
2017/03/10 Javascript
实现单层json按照key字母顺序排序的示例
2017/12/06 Javascript
解决Jquery下拉框数据动态获取的问题
2018/01/25 jQuery
微信小程序 扭蛋抽奖机css3动画实现详解
2019/07/19 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
2020/07/15 Javascript
[25:59]Newbee vs TNC 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python编程语言的35个与众不同之处(语言特征和使用技巧)
2014/07/07 Python
python决策树之CART分类回归树详解
2017/12/20 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
Python列表解析操作实例总结
2020/02/26 Python
Python利用matplotlib绘制折线图的新手教程
2020/11/05 Python
基于Python实现天天酷跑功能
2021/01/06 Python
学院领导推荐信
2013/10/30 职场文书
《莫泊桑拜师》教学反思
2014/04/23 职场文书
小学班主任培训方案
2014/06/04 职场文书
学生干部培训方案
2014/06/12 职场文书
松材线虫病防治方案
2014/06/15 职场文书
篮球兴趣小组活动总结
2014/07/07 职场文书
销售人员求职信
2014/07/22 职场文书
高校群众路线教育实践活动剖析材料
2014/10/10 职场文书
党的群众路线教育实践活动个人整改措施落实情况
2014/11/04 职场文书
2015年技术员工作总结
2015/04/10 职场文书
春季运动会加油词
2015/07/18 职场文书
python自动统计zabbix系统监控覆盖率的示例代码
2021/04/03 Python
用python基于appium模块开发一个自动收取能量的小助手
2021/09/25 Python
mysql查询结果实现多列拼接查询
2022/04/03 MySQL
JavaScript中reduce()的用法
2022/05/11 Javascript