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 Cookie显示用户上次访问的时间和次数
Dec 08 Javascript
javascript XMLHttpRequest对象全面剖析
Apr 24 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
Nov 09 Javascript
js clearInterval()方法的定义和用法
Nov 11 Javascript
浅谈jquery高级方法描述与应用
Oct 04 Javascript
Vue表单验证插件的制作过程
Apr 01 Javascript
微信小程序日期时间选择器使用方法
Feb 01 Javascript
在node中使用jwt签发与验证token的方法
Apr 03 Javascript
深入解析vue 源码目录及构建过程分析
Apr 24 Javascript
微信小程序实现圆形进度条动画
Nov 18 Javascript
微信小程序中target和currentTarget的区别小结
Nov 06 Javascript
原生JS中应该禁止出现的写法
May 05 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 和 MySQL 时区的一点总结
2008/03/26 PHP
PHP实现显示照片exif信息的方法
2014/07/11 PHP
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
值得分享的php+ajax实时聊天室
2016/07/20 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
php数组指针函数功能及用法示例
2020/02/11 PHP
类之Prototype.js学习
2007/06/13 Javascript
一些mootools的学习资源
2010/02/07 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
2010/08/27 Javascript
js原型链原理看图说明
2012/07/07 Javascript
JavaScript高级程序设计 阅读笔记(二十) js错误处理
2012/08/14 Javascript
jquery实现叠层3D文字特效代码分享
2015/08/21 Javascript
JS获取屏幕高度的简单实现代码
2016/05/24 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
2016/12/08 Javascript
angular $watch 一个变量的变化(实例讲解)
2017/08/02 Javascript
JavaScript数据类型的存储方法详解
2017/08/25 Javascript
解决vue-cli + webpack 新建项目出错的问题
2018/03/20 Javascript
深入理解react 组件类型及使用场景
2019/03/07 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
2019/09/04 Javascript
layui扩展上传组件模拟进度条的方法
2019/09/23 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
2020/07/20 Javascript
Python脚本实现集群检测和管理功能
2015/03/06 Python
python通过ftplib登录到ftp服务器的方法
2015/05/08 Python
python3使用matplotlib绘制散点图
2019/03/19 Python
对python3中的RE(正则表达式)-详细总结
2019/07/23 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
jupyter notebook 增加kernel教程
2020/04/10 Python
Python 必须了解的5种高级特征
2020/09/10 Python
让IE9以下版本的浏览器兼容HTML5的方法
2014/03/12 HTML / CSS
Skip Hop官网:好莱坞宝宝挚爱品牌
2018/06/17 全球购物
水果超市创业计划书
2014/01/27 职场文书
体育专业求职信
2014/07/16 职场文书
小学生自我评价100字(15篇)
2014/09/18 职场文书
营业用房租赁协议书
2014/11/26 职场文书
高中班主任培训心得体会
2016/01/07 职场文书