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 相关文章推荐
对象的类型:本地对象(1)
Dec 29 Javascript
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
Jan 16 Javascript
深入理解JavaScript定时机制
Oct 29 Javascript
javascript实现的猜数小游戏完整实例代码
May 10 Javascript
JavaScript数组去重的6个方法
Jan 21 Javascript
微信小程序中实现手指缩放图片的示例代码
Mar 13 Javascript
通过vue-cli3构建一个SSR应用程序的方法
Sep 13 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
Apr 16 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
vue 动态表单开发方法案例详解
Dec 02 Javascript
jQuery实现简易QQ聊天框
Feb 10 jQuery
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
Jan 29 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随机生成福彩双色球号码的2种方法
2013/02/04 PHP
PHP JS Ip地址及域名格式检测代码
2013/09/27 PHP
PHP实现自动对图片进行滚动显示的方法
2015/03/12 PHP
最准确的php截取字符串长度函数
2015/10/29 PHP
PHP处理Ajax请求与Ajax跨域问题
2017/02/13 PHP
php实现微信发红包功能
2018/07/13 PHP
扩展String功能方法
2006/09/22 Javascript
js tab效果的实现代码
2009/12/26 Javascript
jQuery ul标签下拉菜单演示代码
2010/12/11 Javascript
基于jQuery的投票系统显示结果插件
2011/08/12 Javascript
JavaScript基础知识之数据类型
2012/08/06 Javascript
php与js的区别是什么
2013/08/05 Javascript
asp.net刷新本页面的六种方法总结
2014/01/07 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
2016/06/21 Javascript
详解Vue.js动态绑定class
2016/12/20 Javascript
RequireJS 依赖关系的实例(推荐)
2017/01/21 Javascript
JS实现的随机排序功能算法示例
2017/06/09 Javascript
vue项目中引入noVNC远程桌面的方法
2018/03/05 Javascript
iview table render集成switch开关的实例
2018/03/14 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
2019/05/07 Javascript
在Vue中使用HOC模式的实现
2020/08/23 Javascript
[08:44]DOTA2发布会群星聚首 我们都是刀塔人
2014/03/21 DOTA
[15:57]教你分分钟做大人:斧王
2014/10/30 DOTA
跟老齐学Python之赋值,简单也不简单
2014/09/24 Python
python+Django+apache的配置方法详解
2016/06/01 Python
python3+PyQt5使用数据库窗口视图
2018/04/24 Python
python批量读取文件名并写入txt文件中
2020/09/05 Python
python ctypes库2_指定参数类型和返回类型详解
2019/11/19 Python
CSS类名支持中文命名的示例
2014/04/04 HTML / CSS
Revolution Beauty美国官网:英国知名化妆品网站
2018/07/23 全球购物
法国发饰品牌:Alexandre De Paris
2018/12/04 全球购物
如何将字串String转换成整数int
2015/02/21 面试题
电气专业应届生求职信
2013/11/01 职场文书
计算机毕业大学生推荐信
2013/12/01 职场文书
中学生获奖感言
2014/02/04 职场文书
资料员岗位职责范本
2015/04/13 职场文书