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 相关文章推荐
js中的window.open返回object的错误的解决方法
Aug 15 Javascript
js关于精确计算和数值格式化以及直接引js文件
Jan 28 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
Aug 23 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
May 09 Javascript
去除字符串左右两边的空格(实现代码)
May 12 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
May 31 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
Jun 12 Javascript
Javascript json object 与string 相互转换的简单实现
Sep 27 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
Jan 20 Javascript
Vue2.0 v-for filter列表过滤功能的实现
Sep 07 Javascript
微信小程序如何获取用户头像和昵称
Sep 23 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
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变量存储的详解
2013/06/13 PHP
PHP json_encode中文乱码问题的解决办法
2013/09/09 PHP
php读取csv实现csv文件下载功能
2013/12/18 PHP
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
使用PHP similar text计算两个字符串相似度
2015/11/06 PHP
PHP获取访问页面HTTP状态码的实现代码
2016/11/03 PHP
PHP实现多级分类生成树的方法示例
2017/02/07 PHP
php中bind_param()函数用法分析
2017/03/28 PHP
laravel实现简单用户权限的示例代码
2019/05/28 PHP
Javascript模板技术
2007/04/27 Javascript
JSON 编辑器实现代码
2009/12/06 Javascript
js取消单选按钮选中示例代码
2013/11/14 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
2014/03/28 Javascript
vuejs指令详解
2017/02/07 Javascript
React组件生命周期详解
2017/07/03 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
2017/11/03 Javascript
关于HTML5的data-*自定义属性的总结
2018/05/05 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
2020/03/04 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
2020/11/03 Javascript
Python中绑定与未绑定的类方法用法分析
2016/04/29 Python
使用Python进行AES加密和解密的示例代码
2018/02/02 Python
python数字图像处理之骨架提取与分水岭算法
2018/04/27 Python
Python使用post及get方式提交数据的实例
2019/01/24 Python
django多对多表的创建,级联删除及手动创建第三张表
2019/07/25 Python
使用python的turtle函数绘制一个滑稽表情
2020/02/28 Python
基于SQLAlchemy实现操作MySQL并执行原生sql语句
2020/06/10 Python
使用CSS3在触屏上为按钮实现激活效果
2013/09/27 HTML / CSS
html5使用canvas绘制文字特效
2014/12/15 HTML / CSS
移动端html5判断是否滚动到底部并且下拉加载
2019/11/19 HTML / CSS
YesBabyOnline美国:全球性的在线婚纱礼服工厂
2018/05/05 全球购物
固特异美国在线轮胎店:Goodyear Tire
2019/02/23 全球购物
美国购买体育赛事门票网站:TicketCity
2019/03/06 全球购物
大学生就业推荐表自我评价
2015/03/02 职场文书
2015年加油站工作总结
2015/05/13 职场文书
2015秋季开学典礼演讲稿
2015/07/16 职场文书
MySQL深度分页(千万级数据量如何快速分页)
2021/07/25 MySQL