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 相关文章推荐
12款经典的白富美型—jquery图片轮播插件—前端开发必备
Jan 08 Javascript
jquery ajax修改全局变量示例代码
Nov 08 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
Apr 26 Javascript
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
javaScript实现滚动条事件详解
Mar 24 Javascript
vue实现图片加载完成前的loading组件方法
Feb 05 Javascript
Vue实现左右菜单联动实现代码
Aug 12 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
Aug 20 Javascript
微信小程序实现星星评价效果
Nov 02 Javascript
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
微信小程序实现点击导航条切换页面
Nov 19 Javascript
使用js获取身份证年龄的示例代码
Dec 11 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安装攻略:常见问题解答(一)
2006/10/09 PHP
javascript 设置某DIV区域内的checkbox复选框
2009/11/30 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
一个轻量级的javascript库 pj介绍
2010/12/19 Javascript
jquery弹出框的用法示例(2)
2013/08/26 Javascript
对于this和$(this)的个人理解
2013/09/08 Javascript
基于jQuery实现自动轮播旋转木马特效
2015/11/02 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
2016/01/05 Javascript
AngularJS基础 ng-copy 指令实例代码
2016/08/01 Javascript
vue动态绑定class选中当前列表变色的方法示例
2018/12/19 Javascript
NodeJS模块与ES6模块系统语法及注意点详解
2019/01/04 NodeJs
NodeJS http模块用法示例【创建web服务器/客户端】
2019/11/05 NodeJs
在vue项目中利用popstate处理页面返回的操作介绍
2020/08/06 Javascript
基于JavaScript实现随机点名器
2021/02/25 Javascript
python机器学习之神经网络(一)
2017/12/20 Python
python的re正则表达式实例代码
2018/01/24 Python
python SMTP实现发送带附件电子邮件
2018/05/22 Python
python中update的基本使用方法详解
2019/07/17 Python
Django在admin后台集成TinyMCE富文本编辑器的例子
2019/08/09 Python
pandas factorize实现将字符串特征转化为数字特征
2019/12/19 Python
python+selenium 脚本实现每天自动登记的思路详解
2020/03/11 Python
python中openpyxl和xlsxwriter对Excel的操作方法
2021/03/01 Python
3D动画《斗罗大陆》上线当日播放过亿
2021/03/16 国漫
HTMl5的存储方式sessionStorage和localStorage详解
2014/03/18 HTML / CSS
.NET面试10题
2014/02/24 面试题
董事长秘书职责
2014/01/31 职场文书
公司端午节活动方案
2014/02/04 职场文书
公司员工检讨书
2014/02/08 职场文书
房地产公司见习自我鉴定
2014/04/28 职场文书
安康杯竞赛活动总结
2014/05/05 职场文书
2015新员工工作总结范文
2015/10/15 职场文书
2016十一国庆节感言
2015/12/09 职场文书
五年级数学教学反思
2016/02/16 职场文书
2019同学聚会主持词
2019/05/06 职场文书
Django drf请求模块源码解析
2021/06/08 Python
MySQL数据库优化之通过索引解决SQL性能问题
2022/04/10 MySQL