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 相关文章推荐
jQuery操作select的实例代码
Jun 14 Javascript
jQuery插件开发基础简单介绍
Jan 07 Javascript
js 鼠标移动显示图片的简单实例
Dec 25 Javascript
JS学习之表格的排序简单实例
May 16 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
Aug 24 Javascript
vue导出html、word和pdf的实现代码
Jul 31 Javascript
如何让node运行es6模块文件及其原理详解
Dec 11 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
Jan 06 Javascript
vue遍历生成的输入框 绑定及修改值示例
Oct 30 Javascript
jQuery操作元素追加内容示例
Jan 10 jQuery
Javascript中Math.max和Math.max.apply的区别和用法详解
Aug 24 Javascript
浅析vue中的nextTick
Dec 28 Vue.js
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
解决MySQL中文输出变成问号的问题
2008/06/05 PHP
php设计模式 Command(命令模式)
2011/06/26 PHP
PHP中设置一个严格30分钟过期Session面试题的4种答案
2014/07/30 PHP
laravel安装和配置教程
2014/10/29 PHP
简单介绍win7下搭建apache+php+mysql开发环境
2015/08/06 PHP
YII Framework框架教程之国际化实现方法
2016/03/14 PHP
PHP常用函数总结(180多个)
2016/12/25 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
laravel 解决Eloquent ORM的save方法无法插入数据的问题
2019/10/21 PHP
javascript下判断一个元素是否存在的代码
2010/03/05 Javascript
jQuery下的几个你可能没用过的功能
2010/08/29 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
JS实现双击屏幕滚动效果代码
2015/10/28 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
2016/07/25 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
2016/08/16 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
2016/10/13 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
vue如何进行动画的封装
2018/09/26 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
Python基于有道实现英汉字典功能
2015/07/25 Python
Python学习教程之常用的内置函数大全
2017/07/14 Python
NetworkX之Prim算法(实例讲解)
2017/12/22 Python
在Mac下使用python实现简单的目录树展示方法
2018/11/01 Python
Django使用AJAX调用自己写的API接口的方法
2019/03/06 Python
Python数学形态学实例分析
2019/09/06 Python
浅析Python迭代器的高级用法
2020/07/16 Python
python 绘制国旗的示例
2020/09/27 Python
家庭户外服装:Hawkshead
2017/11/02 全球购物
汽车专业毕业生推荐信
2013/11/12 职场文书
会计电算化个人求职信范文
2014/01/24 职场文书
幼儿园校车司机的岗位职责
2014/01/30 职场文书
党员群众路线教育实践活动学习笔记
2014/11/05 职场文书
2015年社区宣传工作总结
2015/05/20 职场文书
2016年“5.12”护士节致辞
2015/07/31 职场文书
2016十一国庆节感言
2015/12/09 职场文书
2016年优秀党务工作者先进事迹材料
2016/02/29 职场文书