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 Array.sort() 跨浏览器下需要考虑的问题
Dec 07 Javascript
用jquery生成二级菜单的实例代码
Jun 24 Javascript
JQuery判断子iframe何时加载完成解决方案
Aug 20 Javascript
js学习阶段总结(必看篇)
Jun 16 Javascript
AngularJS基础 ng-mouseleave 指令详解
Aug 02 Javascript
AngularJs 指令详解及示例代码
Sep 01 Javascript
jQuery实现表格元素动态创建功能
Jan 09 Javascript
浅析javaScript中的浅拷贝和深拷贝
Feb 15 Javascript
JavaScript常用数学函数用法示例
May 14 Javascript
vue this.reload 方法 配置
Sep 12 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
Sep 19 Javascript
JSON.stringify()方法讲解
Jan 31 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
php5.3以后的版本连接sqlserver2000的方法
2014/07/28 PHP
php图像处理类实例
2015/07/28 PHP
PHP实现PDO操作mysql存储过程示例
2019/02/13 PHP
Jquery创建层显示标题和内容且随鼠标移动而移动
2014/01/26 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
2014/12/15 Javascript
jQuery使用之设置元素样式用法实例
2015/01/19 Javascript
jQuery往textarea中光标所在位置插入文本的方法
2015/06/26 Javascript
windows下安装nodejs及框架express
2015/08/07 NodeJs
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
2016/08/31 Javascript
JS简单去除数组中重复项的方法
2016/09/13 Javascript
JavaScript仿微博输入框效果(案例分析)
2016/12/06 Javascript
Vue2.x中的父组件传递数据至子组件的方法
2017/05/01 Javascript
Layui 设置select下拉框自动选中某项的方法
2018/08/14 Javascript
详解如何理解vue的key属性
2019/04/14 Javascript
react native 仿微信聊天室实例代码
2019/09/17 Javascript
vue使用一些外部插件及样式的配置代码
2019/11/18 Javascript
微信小程序实现多图上传
2020/06/19 Javascript
使用Python脚本对Linux服务器进行监控的教程
2015/04/02 Python
在Mac OS上搭建Python的开发环境
2015/12/24 Python
对Python中type打开文件的方式介绍
2018/04/28 Python
python版本五子棋的实现代码
2018/12/11 Python
Python Numpy 自然数填充数组的实现
2019/11/28 Python
Python模块/包/库安装的六种方法及区别
2020/02/24 Python
Python类的绑定方法和非绑定方法实例解析
2020/03/04 Python
Python偏函数实现原理及应用
2020/11/20 Python
华丽的手绘陶瓷:MacKenzie-Childs
2017/02/04 全球购物
发现世界上最好的珠宝设计师:JewelStreet
2017/12/17 全球购物
爱他美官方海外旗舰店:Aptamil奶粉
2017/12/22 全球购物
重新定义牛仔布,100美元以下:Warp + Weft
2018/07/25 全球购物
类和结构的区别
2012/08/15 面试题
vue实现倒计时功能
2021/03/24 Vue.js
妇产科护士自我鉴定
2013/10/15 职场文书
毕业班工作总结
2015/08/10 职场文书
python tkinter实现定时关机
2021/04/21 Python
JavaScript使用canvas绘制坐标和线
2021/04/28 Javascript