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

使用构造函数初始化对象的过程
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…

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…

前端学习(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…

前端学习(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…

前端学习(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…

前端学习(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…

OpenGL学习之路(二)

1 引子 在上一篇读书笔记中,我们对书本中给出的例子进行详细的分析。首先是搭出一个框架;然后填充初始化函数,在初始化函数中向OpenGL提供顶点信息(缓冲区对象)和顶点属性信息(顶点数组对象)&a…

前端学习(1881)vue之电商管理系统电商系统之双层for循环渲染数据

目录结构 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…

iOS之本地推送通知使用介绍

推送通知作用:可以让不在前台运行的app,告知用户app内部发生了什么事情 如何发送本地通知: 发送本地通知步骤: 1.创建本地通知对象 2.设置本地通知内容 3.调度本地通知 具体实现代码: 注意:iOS7通过上述代码可以完成发…

前端学习(1882)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…

前端学习(1883)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…

第一次冲刺阶段(三)

今天下午我们团队进行了第三次站立会议,总结了昨天的进展状况,的的确确出现很多问题,进展微乎其微,我们对安卓开发知识不熟悉,导致我们举步维艰,很考验耐性与团队的协作能力,我们必须坚持下去&a…

前端学习(1884)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…

前端学习(1885)vue之电商管理系统电商系统之首页路由的重定向

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vue import Welcome from ./components/Welcome.vue Vue.use(Router)const router new Router({routes: [{path: /,re…

前端学习(1886)vue之电商管理系统电商系统之首页路由的重定向主页侧边栏路由链接的改造

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vue import Welcome from ./components/Welcome.vue Vue.use(Router)const router new Router({routes: [{path: /,re…

Android adb logcat使用技巧

前言 新买的笔记本E431装了最新版的Eclipse,搞定了Android开发环境,可是logcat里查看东西居然仅仅显示level,没有错误的具体信息。我本身也不是一个愿意折腾图形界面,更喜欢纯命令行的操作,因此今天在明昊师兄的建议下…