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 装载iframe子页面,自适应高度
Mar 20 Javascript
php gethostbyname获取域名ip地址函数详解
Jan 24 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
Oct 23 Javascript
javascript针对DOM的应用分析(四)
Apr 15 Javascript
js计算德州扑克牌面值的方法
Mar 04 Javascript
window.onload与$(document).ready()的区别分析
May 30 Javascript
js实现获取当前时间是本月第几周的方法
Aug 11 Javascript
JavaScript 七大技巧(二)
Dec 13 Javascript
jQuery常用的一些技巧汇总
Mar 26 Javascript
解决node-sass偶尔安装失败的方法小结
Dec 05 Javascript
javascript面向对象创建对象的方式小结
Jul 29 Javascript
手把手教您实现react异步加载高阶组件
Apr 07 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生成随机密码的几种方法
2011/01/17 PHP
PHP字符串函数系列之nl2br(),在字符串中的每个新行 (\n) 之前插入 HTML 换行符br
2011/11/10 PHP
PHP UTF8中文字符截断函数代码
2012/09/11 PHP
整理的比较全的event对像在ie与firefox浏览器中的区别
2013/11/25 Javascript
javascript拖拽上传类库DropzoneJS使用方法
2013/12/05 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
2014/03/22 Javascript
jQuery内置的AJAX功能和JSON的使用实例
2014/07/27 Javascript
Javascript数组Array基础介绍
2016/03/13 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
2017/07/03 Javascript
vue移动端监听滚动条高度的实现方法
2018/09/03 Javascript
JavaScript偏函数与柯里化实例详解
2019/03/27 Javascript
vue如何截取字符串
2019/05/06 Javascript
[06:10]6.81新信使新套装!给你一个炫酷的DOTA2
2014/05/06 DOTA
Python Property属性的2种用法
2015/06/21 Python
Python中生成Epoch的方法
2017/04/26 Python
numpy中索引和切片详解
2017/12/15 Python
Python多层装饰器用法实例分析
2018/02/09 Python
Python利用pandas计算多个CSV文件数据值的实例
2018/04/19 Python
Flask框架使用DBUtils模块连接数据库操作示例
2018/07/20 Python
python采集百度搜索结果带有特定URL的链接代码实例
2019/08/30 Python
Python 打印自己设计的字体的实例讲解
2021/01/04 Python
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
利用css3如何设置没有上下边的列表间隔线
2017/07/03 HTML / CSS
使用phonegap检测网络状态的方法
2017/03/30 HTML / CSS
极简的HTML5模版
2015/07/09 HTML / CSS
快时尚眼镜品牌,全国连锁眼镜店:LOHO眼镜生活
2018/10/08 全球购物
Huda Beauty官方商店:化妆和美容产品
2020/09/05 全球购物
高三家长寄语
2014/04/03 职场文书
公司请假条范文
2014/04/11 职场文书
横幅标语大全
2014/06/17 职场文书
房地产资料员岗位职责
2014/07/02 职场文书
2014年护士长工作总结
2014/11/11 职场文书
2014年结对帮扶工作总结
2014/12/17 职场文书
技术员岗位职责
2015/02/04 职场文书
给原生html中添加水印遮罩层的实现示例
2021/04/02 Javascript
Win Server2016远程桌面如何允许多用户同时登录
2022/06/10 Servers