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代码
Mar 01 Javascript
asp.net+js 实现无刷新上传解析csv文件的代码
May 17 Javascript
TextArea设置MaxLength属性最大输入值的js代码
Dec 21 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
May 17 Javascript
轻量级网页遮罩层jQuery插件用法实例
Jul 31 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
Dec 13 Javascript
纯js实现的积木(div层)拖动功能示例
Jul 19 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
Aug 24 Javascript
javascript实现5秒倒计时并跳转功能
Jun 20 Javascript
js 判断当前时间是否处于某个一个时间段内
Sep 19 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
Jan 02 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
Nov 10 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的配置文件php.ini
2006/10/09 PHP
PHP Class&amp;Object -- 解析PHP实现二叉树
2013/06/25 PHP
php里array_work用法实例分析
2015/07/13 PHP
PHP基于单例模式实现的mysql类
2016/01/09 PHP
PHP中的print_r 与 var_dump 输出数组
2016/06/13 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
2018/08/04 PHP
初学Javascript的一些总结
2008/11/03 Javascript
JavaScript单元测试ABC
2012/04/12 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
2015/04/06 Javascript
jQuery短信验证倒计时功能实现方法详解
2016/05/25 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
2016/08/15 Javascript
Bootstrap源码解读排版(1)
2016/12/23 Javascript
Angular的事件和表单详解
2016/12/26 Javascript
jquery.cookie.js的介绍与使用方法
2017/02/09 Javascript
JS中call和apply函数用法实例分析
2018/06/20 Javascript
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
2018/10/18 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
2020/11/18 jQuery
Python MD5文件生成码
2009/01/12 Python
python三元运算符实现方法
2013/12/17 Python
python使用xlrd实现检索excel中某列含有指定字符串记录的方法
2015/05/09 Python
Python应用03 使用PyQT制作视频播放器实例
2016/12/07 Python
python实现学生管理系统
2018/01/11 Python
python自动截取需要区域,进行图像识别的方法
2018/05/17 Python
tensorflow实现加载mnist数据集
2018/09/08 Python
Python实现电视里的5毛特效实例代码详解
2020/05/15 Python
利用css3如何设置没有上下边的列表间隔线
2017/07/03 HTML / CSS
奥地利度假券的专家:we-are.travel
2019/04/10 全球购物
商场中秋节广播稿
2014/01/17 职场文书
超市中秋节促销方案
2014/03/21 职场文书
教师自查自纠材料
2014/10/14 职场文书
2015自愿离婚协议书范本
2015/01/28 职场文书
周一问候语大全
2015/11/10 职场文书
导游词之山西祁县乔家大院
2019/10/14 职场文书
pandas中DataFrame数据合并连接(merge、join、concat)
2021/05/30 Python
flex弹性布局详解
2022/03/20 HTML / CSS