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的IE和火狐的兼容性注意事项
Mar 17 Javascript
js substr、substring和slice使用说明小记
Sep 15 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
May 19 Javascript
JavaScript作用域链示例分享
May 27 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
May 11 Javascript
js仿京东轮播效果 选项卡套选项卡使用
Jan 12 Javascript
bootstrap table插件的分页与checkbox使用详解
Jul 23 Javascript
原生JS实现日历组件的示例代码
Sep 22 Javascript
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
Sep 23 Javascript
Vue 实现把表单form数据 转化成json格式的数据
Oct 29 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
Oct 30 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+javascript液晶时钟
2006/10/09 PHP
PHP 危险函数全解析
2009/09/09 PHP
php生成xml简单实例代码
2009/12/16 PHP
php 地区分类排序算法
2013/07/01 PHP
PHP中你应该知道的require()文件包含的正确用法
2015/06/12 PHP
php自动更新版权信息显示的方法
2015/06/19 PHP
老司机传授Ubuntu下Apache+PHP+MySQL环境搭建攻略
2016/03/20 PHP
laravel ORM 只开启created_at的几种方法总结
2018/01/29 PHP
如何解决PHP获取不到SESSION信息之一般情况
2019/10/10 PHP
jquery实现可拖动DIV自定义保存到数据的实例
2013/11/20 Javascript
nodejs教程之异步I/O
2014/11/21 NodeJs
jquery使用on绑定a标签无效 只能用live解决
2016/06/02 Javascript
javascript三种代码注释方法
2016/06/02 Javascript
jQuery实现每隔几条元素增加1条线的方法
2016/06/27 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
2016/08/25 Javascript
js阻止移动端页面滚动的两种方法
2017/01/25 Javascript
@ResponseBody 和 @RequestBody 注解的区别
2017/03/08 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
2017/04/25 jQuery
基于LayUI分页和LayUI laypage分页的使用示例
2017/08/02 Javascript
详解Chai.js断言库API中文文档
2018/01/31 Javascript
浅析Visual Studio Code断点调试Vue
2018/02/27 Javascript
layui实现动态和静态分页
2018/04/28 Javascript
搭建一个nodejs脚手架的方法步骤
2019/06/28 NodeJs
解决vue动态路由异步加载import组件,加载不到module的问题
2020/07/26 Javascript
微信小程序实现电子签名功能
2020/07/29 Javascript
[50:02]完美世界DOTA2联赛PWL S2 Magma vs FTD 第三场 11.29
2020/12/03 DOTA
python通过BF算法实现关键词匹配的方法
2015/03/13 Python
python3解析库pyquery的深入讲解
2018/06/26 Python
python随机数分布random测试
2018/08/27 Python
Python拼接字符串的7种方法总结
2018/11/01 Python
Schecker荷兰:狗狗用品和配件
2019/06/06 全球购物
美国床垫连锁店:Mattress Firm
2021/02/13 全球购物
公司清洁工岗位职责
2013/12/14 职场文书
国际贸易专业自荐信
2014/06/10 职场文书
工作收入住址证明
2014/10/28 职场文书
上课睡觉万能检讨书
2015/02/17 职场文书