深入理解构造函数和原型链

使用构造函数初始化对象的过程
function Base(){} //函数声明
var base=new Base() //对象初始化
  • 执行Base()的过程:
    • 创建一个名为Base的function对象:
      • 执行function Base(){函数体}本质上相当于var Base=new Function("函数体");
      • 所以Base对象的构造函数的是Function();
    • 为Base对象添加属性:
      • 添加_proto_属性,其属性值Function.prototype,也就说Base对象的原型是其构造函数的prototype属性;
        • 在任意类似var x=new X()的过程中,都会设置x._proto_=X.prptotype;
      • 添加prototype属性:先用new Object()创建新对象,并为新对象创建constructor属性,属性值设置为Base;最后将该对象赋值给prototype属性;
        • 因为Base.prototype=new Object()所以Base.prototype._proto_==Object.prototype;
      • 为Base对象添加其他属性,如call,construct,scope,length等属性;
  • 执行var base=new Base()
    • 调用Base的construct属性引用的函数, 创建一个新object, 假设为x;
    • 将Base.prototype赋值给x._proto_属性;
      • 如果Base.prototype不是object,将Object.prototype赋值x._proto_;
    • 调用Base.call(x),对x进行初始化;
    • 返回x,x就是base;
    • 如果Base()使用return返回其他对象,base就是其他对象;
原型链
  • 因为base._proto_==Base.prototype,且Base.prototype._proto_==Object.prototype;
所以base._proto_._proto_==Object.prtotype; //原型链
    • 即base继承自Base.prototype,Base.prototype继承自Object.prototype;
  • 原型继承
    • 以上原型继承是通过将Base.prototype设置为由Obejct()创建的对象实现的;
    • 可以通过将任意的构造函数的prototype属性指定为一个对象,实现继承;
function Case(){};
Case.prototype=base;
var case=new Case();
    • case.的原型链是Case.prototype(base),Base.prototype,Object.prototype;
对象的constructor属性
  • 由自定义构造函数创建的对象默认没有自己的constructor属性的,只有由Object()创建的对象真正拥有constructor属性;
  • 所以base对象的constructor属性继承自Base.prototype,指向Base();
  • 同样case对象的constructor属性也继承自Base.prototype,指向Base();
红色
  • 对象f的原型是构造函数的prototype属性:F.prototype;
    • F.prototype的constructor属性指向f的构造函数F;
  • F.prototype作为对象其原型是Object.prototype;
青色
  • 构造函数F作为一个对象,其原型是Function.prototype;
    • Function.prototype的constructor属性指向F的构造函数Function;
蓝色
  • Function作为对象其原型是Function.prototype;
黄色
  • Function.prototype的原型是Object.prototype;
    • Object.prototype的constructor属性指向Function.prototype对象的构造函数Object;
紫色
  • Object作为一个函数,其原型是Function.prototype;
橙色
  • Object.prototype的原型是null

转载于:https://www.cnblogs.com/qinghe/p/5391558.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/418662.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端学习(1874)vue之电商管理系统电商系统之处理项目中eslint语法报错

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vueVue.use(Router)const router new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login},{pat…

eclipse 安装git

eclipse 安装git:https://blog.csdn.net/u012604299/article/details/82390468 windows安装gitlab客户端:https://www.cnblogs.com/xwgcxk/p/9209237.html GitLab添加ssh-key,操作无需每次输入账号密码:https://blog.csdn.net/qq_40861368/…

Android一个自定义的进度环:ProgressChart

源代码及可执行文件下载地址:http://files.cnblogs.com/rainboy2010/ProgressChart.zip 因项目需要,自己尝试定义了一个进度环,用于显示进度,实现效果如下: 主要代码如下: public class ProgressChart extends View {private Context context;//圆环背景画笔private Paint pain…

前端学习(1876)vue之电商管理系统电商系统之整体布局

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vueVue.use(Router)const router new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login},{pat…

0414-复利计算再升级

目录 项目简介更新内容设计概要估算工作量任务分配github地址演示总结一、项目简介 项目名复利计算5.1版本号5.1开发语言java开发工具eclipse、IDEA、mysql更新内容功能完善开发人员颜文生、林集团二、更新内容 界面美化 改善交互 三、概要设计 加载图片美化界面,利…

前端学习(1874)vue之电商管理系统电商系统之修改element-ui组件的按需导入

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vueVue.use(Router)const router new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login},{pat…

java 8 删选集合 和取集合中的字段重组成集合的使用

Overridepublic GoodsBaseInfoEpcVO selectEpcGoodsBaseInfo(CarConfig carconfig, String realCarDKText, String realCarAgeText) {// 查询变速箱油信息GoodsBaseInfoEpcVO vo new GoodsBaseInfoEpcVO();if (carconfig null) {return new GoodsBaseInfoEpcVO();}List<St…

1.名字忘了

1.h5文档类型和字符集是&#xff1f;<!DOCTYPE html><meta charset"utf-8" /> 2.请描述h5的canvascanvas是HTML5中的新元素&#xff0c;你可以使用javascript用它来绘制图形、图标、以及其它任何视觉性图像。它也可用于创建图片特效和动画。canvas 元素本…

前端学习(1877)vue之电商管理系统电商系统之头部布局

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vueVue.use(Router)const router new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login},{pat…

springMVC 后端代码 如何用 @requestParam() 接收前台传过来的数组

https://blog.csdn.net/bigtree_3721/article/details/71479667 https://www.jb51.net/article/130922.htm https://blog.csdn.net/gao454917848/article/details/46355877 第二种 &#xff1a; serviceWorkOrderList.search function () {var queryData {};queryData[wo…

.net 任务(Task)

1. Task &#xff08;任务&#xff09;&#xff1a; 很容易调用 ThreadPool.QueueUserWorkItem 实现异步操作&#xff0c;但是这个技术有许多 .net 引入Task类型来使用任务。 如下几种方式都是实现异步的方法&#xff1a; public static void Method(){ThreadPool.QueueUserWor…

前端学习(1878)vue之电商管理系统电商系统之左侧菜单布局

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vueVue.use(Router)const router new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login},{pat…

Activiti工作流6.0表结构介绍

https://blog.csdn.net/qq_38011415/article/details/101127222

Ubuntu 16.04 搭建Android开发环境

1、Installing Java sudo add-apt-repository ppa:webupd8team/java sudo apt-get update sudo apt-get install oracle-java8-installer After that sudo apt-get install oracle-java8-set-default 2、Installing Android Studio (1) Download Android Studio from here or h…

前端学习(1879)vue之电商管理系统电商系统之通过axios拦截器添加token认证

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vueVue.use(Router)const router new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login},{pat…

activiti5.22 springboot 流程引擎 实战全过程

https://blog.csdn.net/ssyujay/article/details/83896809

前端学习(1880)vue之电商管理系统电商系统之获取左侧菜单数据

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vueVue.use(Router)const router new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login},{pat…