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 相关文章推荐
二级域名转向类
Nov 09 Javascript
web性能优化之javascript性能调优
Dec 28 Javascript
再次谈论Javascript中的this
Jun 23 Javascript
javascript中mouseenter与mouseover的异同
Jun 06 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
Dec 07 Javascript
vue 对axios get pust put delete封装的实例代码
Jan 05 Javascript
node.js制作一个简单的登录拦截器
Feb 10 Javascript
javascript实现画板功能
Apr 12 Javascript
js实现从右往左匀速显示图片(无缝轮播)
Jun 29 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
vue实现简易的双向数据绑定
Dec 29 Vue.js
JavaScript实现点击自制菜单效果
Feb 02 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
discuz 首页四格:最新话题+最新回复+热门话题+精华文章插件
2007/08/19 PHP
php下检测字符串是否是utf8编码的代码
2008/06/28 PHP
php实现水仙花数示例分享
2014/04/03 PHP
PHP开发Apache服务器配置
2015/07/15 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
PHP随机数函数rand()与mt_rand()的讲解
2019/03/25 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
PHP设计模式概论【概念、分类、原则等】
2020/05/01 PHP
Javascript和Java获取各种form表单信息的简单实例
2014/02/14 Javascript
JQuery记住用户名和密码的具体实现
2014/04/04 Javascript
JavaScript日期类型的一些用法介绍
2015/03/02 Javascript
使用window.prompt()实现弹出用户输入的对话框
2015/04/13 Javascript
javascript实现的右下角弹窗实例
2015/04/24 Javascript
JavaScript实现Flash炫光波动特效
2015/05/14 Javascript
详解百度百科目录导航树小插件
2017/01/08 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
2017/07/14 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
vue生成token并保存到本地存储中
2018/07/17 Javascript
小程序根据手机机型设置自定义底部导航距离
2019/06/04 Javascript
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
基于elementUI竖向表格、和并列的案例
2020/10/26 Javascript
讲解Python中的递归函数
2015/04/27 Python
Python标准库sched模块使用指南
2017/07/06 Python
Python实现的当前时间多加一天、一小时、一分钟操作示例
2018/05/21 Python
python全局变量引用与修改过程解析
2020/01/07 Python
Python实现遗传算法(二进制编码)求函数最优值方式
2020/02/11 Python
pytorch实现seq2seq时对loss进行mask的方式
2020/02/18 Python
基于Python实现2种反转链表方法代码实例
2020/07/06 Python
美国最大的宠物药店:1-800-PetMeds
2016/10/02 全球购物
Chain Reaction Cycles芬兰:世界上最大的在线自行车商店
2017/12/06 全球购物
英国布鲁姆精品店:Bloom Boutique
2018/03/01 全球购物
意大利咖啡、浓缩咖啡和浓缩咖啡机:illy caffe
2019/03/20 全球购物
怎么写好自荐书
2014/03/02 职场文书
社团活动总结范文
2014/04/26 职场文书
开展党的群众路线教育实践活动总结报告
2014/10/31 职场文书
公务员廉洁从政心得体会
2016/01/19 职场文书