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实现简单的购物车有图有代码
May 26 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 Javascript
javascript制作照片墙及制作过程中出现的问题
Apr 04 Javascript
javascript简易画板开发
Apr 12 Javascript
jQuery常用选择器详解
Jul 17 jQuery
VUE 配置vue-devtools调试工具及安装方法
Sep 30 Javascript
JavaScript将数组转换为链表的方法
Feb 16 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
Mar 09 Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
Vue-cli 移动端布局和动画使用详解
Aug 10 Javascript
JavaScript中交换值的10种方法总结
Aug 18 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面向对象的进阶学习(抽像类、接口、final、类常量)
2012/05/07 PHP
php清空(删除)指定目录下的文件,不删除目录文件夹的实现代码
2014/09/04 PHP
thinkphp中session和cookie无效的解决方法
2014/12/19 PHP
php专用数组排序类ArraySortUtil用法实例
2015/04/03 PHP
利用php获得flv视频长度的实例代码
2017/10/26 PHP
Firefox和IE浏览器兼容JS脚本写法小结
2008/07/07 Javascript
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2009/02/04 Javascript
jquery tab标签页的制作
2010/05/10 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
2012/12/23 Javascript
JS命令模式例子之菜单程序
2016/10/10 Javascript
Nodejs中Express 常用中间件 body-parser 实现解析
2017/05/22 NodeJs
JavaScript实现提交模式窗口后刷新父窗口数据的方法
2017/06/16 Javascript
如何利用vue实现波谱拟合详解
2020/11/05 Javascript
简明 Python 基础学习教程
2007/02/08 Python
跟老齐学Python之玩转字符串(3)
2014/09/14 Python
Python实现获取操作系统版本信息方法
2015/04/08 Python
Python黑帽编程 3.4 跨越VLAN详解
2016/09/28 Python
Python 通过URL打开图片实例详解
2017/06/01 Python
matplotlib中legend位置调整解析
2017/12/19 Python
Python操作mysql数据库实现增删查改功能的方法
2018/01/15 Python
Python爬虫设置代理IP的方法(爬虫技巧)
2018/03/04 Python
Python处理命令行参数模块optpars用法实例分析
2018/05/31 Python
对python中数组的del,remove,pop区别详解
2018/11/07 Python
Python数据分析库pandas高级接口dt的使用详解
2020/12/11 Python
澳大利亚女装精品店:Alannah Hill
2020/07/29 全球购物
游戏商店:Eneba
2020/04/25 全球购物
地理科学专业毕业生求职信
2013/10/15 职场文书
揠苗助长教学反思
2014/02/04 职场文书
自荐信如何制作?
2014/02/21 职场文书
2014年村党支部工作总结
2014/12/04 职场文书
培训班通知
2015/04/25 职场文书
《狼王梦》读后感:可怜天下父母心
2019/11/01 职场文书
经典人生语录分享:不畏将来,不念过去,笑对当下
2019/12/12 职场文书
python 中的jieba分词库
2021/11/23 Python
python 使用tkinter与messagebox写界面和弹窗
2022/03/20 Python
tree shaking对打包体积优化及作用
2022/07/07 Java/Android