五句话帮你轻松搞定js原型链


Posted in Javascript onDecember 09, 2020

原型链是一种机制,指的是JavaScript每个对象包括原型对象都有一个内置的[[proto]]属性指向创建它的函数对象的原型对象,即prototype属性。 作用:原型链的存在,主要是为了实现对象的继承。

一、 记住以下5句话,轻松搞定js原型链

  • Function 和 Object 都是构造函数
  • 所有的构造函数都是Function new出来的(Function自己new了自己);所有的原型对象都是Object new出来的(Object new了自己的原型对象)
  • 每一个构造函数都有一个prototype属性指向其原型对象;每一个实例对象都有一个_ _ proto _ _ 属性;实例对象的_ _ proto _ _ 等于其构造函数的prototype
  • 每一个原型对象都有一个天生属性constructor,指向其对应的构造函数
  • 底层规定Object.prototype._ _ proto _ _ 等于null

二、下边我们结合一小段代码来详细说明原型链的画图过程

function Game(brand,name,price) {
  this.price= price;
  this.brand = brand;
  this.name = name;
 }
 var g1 = new Game('EA','彩虹六号','200rmb');

1.根据上边的代码我们先定义了一个构造函数叫做Game,假设Game在堆内存中的地址为0x100;并通过它new出了一个实例对象g1,g1在堆内存中的地址为0x200。构造函数Game有天生属性prototype,并指向其原型对象(在堆内存中的地址为0x300)),实例对象g1具有天生属性_ _ proto _ _ ,并指向其构造函数的原型对象;原型对象具有天生属性constructor指向其对应的构造函数。然后我们得到如下图:

五句话帮你轻松搞定js原型链

2.由于所有的原型对象都是Object(0x400) new 出来的,所以0x300这个原型对象同时也是Object的一个实例对象,既然是实例对象就具有天生属性_ _ proto _ _ ,并指向其构造函数的原型对象(0x500);因为Object自身也是一个构造函数,所以其也有天生属性prototype,并指向其原型对象(0x500);又因为所有的原型对象都是Object(0x400) new 出来的,所以0x500这个原型对象也是Object new出来的,因为0x500是Object的原型对象,所以0x500的天生属性constructor指向Object;由于底层规定Object.prototype._ _ proto _ _ 等于null,然后我们得到如下图:

五句话帮你轻松搞定js原型链3.

我们再来看构造函数,由于所有的构造函数都是Function new出来的,所以Function(0x600) new出了自己、Object、Game这三个构造函数,那么这三个构造函数都是Function的实例对象,它们的_ _ proto _ _ 都指向Function的prototype(0x700),0x700的天生属性constructor又指向0x600;由于0x700是Object new 出来的,所以0x700的_ _ proto _ _ 指向Object 的原型对象0x500,最终我们得到如下终极原型链图:

五句话帮你轻松搞定js原型链

到此这篇关于js原型链的文章就介绍到这了,更多相关js原型链内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
利用javascript查看html源文件
Nov 08 Javascript
jquery+css+ul模拟列表菜单具体实现思路
Apr 15 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
May 25 Javascript
node.js中 stream使用教程
Aug 28 Javascript
JS两种类型的表单提交方法实例分析
Nov 28 Javascript
微信小程序 wx.request方法的异步封装实例详解
May 18 Javascript
极简主义法编写JavaScript类
Nov 02 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
Jan 22 Javascript
js实现图片放大并跟随鼠标移动特效
Jan 18 Javascript
微信小程序下拉框搜索功能的实现方法
Jul 31 Javascript
JavaScript函数IIFE使用详解
Oct 21 Javascript
微信小程序去除左上角返回键的实现方法
Mar 06 Javascript
JS常用跨域方法实现原理解析
Dec 09 #Javascript
video.js添加自定义组件的方法
Dec 09 #Javascript
手把手教你如何编译打包video.js
Dec 09 #Javascript
ES6 十大特性简介
Dec 09 #Javascript
Js实现粘贴上传图片的原理及示例
Dec 09 #Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
Dec 09 #Javascript
使用typescript快速开发一个cli的实现示例
Dec 09 #Javascript
You might like
使用sockets:从新闻组中获取文章(三)
2006/10/09 PHP
PHP正则表达式替换站点关键字链接后空白的解决方法
2014/09/16 PHP
PHP7 echo和print语句实例用法
2019/02/15 PHP
关于laravel模板中生成URL的几种模式总结
2019/10/18 PHP
innerText和innerHTML 一些问题分析
2009/05/18 Javascript
javascript类继承机制的原理分析
2009/09/12 Javascript
通过隐藏option实现select的联动效果
2009/11/10 Javascript
一款js和css代码压缩工具[附JAVA环境配置方法]
2010/04/16 Javascript
使用javascript实现json数据以csv格式下载
2015/01/09 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
2015/05/11 Javascript
浅析Javascript匿名函数与自执行函数
2016/02/06 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
2016/06/12 Javascript
vue.js+Echarts开发图表放大缩小功能实例
2017/06/09 Javascript
python+ffmpeg视频并发直播压力测试
2018/03/06 Python
python matplotlib实现双Y轴的实例
2019/02/12 Python
Django重置migrations文件的方法步骤
2019/05/01 Python
python 基于TCP协议的套接字编程详解
2019/06/29 Python
pandas删除行删除列增加行增加列的实现
2019/07/06 Python
python文字和unicode/ascll相互转换函数及简单加密解密实现代码
2019/08/12 Python
使用Python完成15位18位身份证的互转功能
2019/11/06 Python
Python魔法方法 容器部方法详解
2020/01/02 Python
HTML5 Canvas入门学习教程
2016/03/17 HTML / CSS
芬兰攀岩、山地运动和户外活动用品购物网站:Bergfreunde
2016/10/06 全球购物
植物选择:Botanic Choice
2017/02/15 全球购物
SmartBuyGlasses意大利:购买太阳镜、眼镜和隐形眼镜
2018/11/20 全球购物
新西兰Bookabach:查找全球度假屋
2020/12/03 全球购物
定义一结构体数组表示分数,并求两个分数相加之和
2013/06/11 面试题
高校毕业生自我鉴定
2013/10/27 职场文书
英语商务邀请函范文
2014/01/16 职场文书
房产公证书范本
2014/04/10 职场文书
班级体育活动总结
2014/07/05 职场文书
批评与自我批评总结
2014/10/17 职场文书
面试感谢信范文
2015/01/22 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
2016年党员公开承诺书格式范文
2016/03/24 职场文书
golang 实现菜单树的生成方式
2021/04/28 Golang