五句话帮你轻松搞定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读取xml
Nov 04 Javascript
扩展javascript的Date方法实现代码(prototype)
Nov 20 Javascript
利用JavaScript检测CPU使用率自己写的
Mar 22 Javascript
jQuery手动点击实现图片轮播特效
Apr 20 Javascript
如何高效率去掉js数组中的重复项
Apr 12 Javascript
node.js插件nodeclipse安装图文教程
Oct 19 Javascript
jQuery插件dataTables添加序号列的方法
Jul 06 Javascript
ES6深入理解之“let”能替代”var“吗?
Jun 28 Javascript
js中对象和面向对象与Json介绍
Jan 21 Javascript
vue 获取视频时长的实例代码
Aug 20 Javascript
vue-next/runtime-core 源码阅读指南详解
Oct 25 Javascript
js实现点击上传图片并设为模糊背景
Aug 02 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
上海牌131型七灯四波段四喇叭一级收音机
2021/03/02 无线电
PHP中对数据库操作的封装
2006/10/09 PHP
下载文件的点击数回填
2006/10/09 PHP
mysql,mysqli,PDO的各自不同介绍
2012/09/19 PHP
php读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
PHP使用DOMDocument类生成HTML实例(包含常见标签元素)
2014/06/25 PHP
php常用正则函数实例小结
2016/12/29 PHP
轻松实现php文件上传功能
2017/02/17 PHP
阿里对象存储OSS在laravel框架中的使用方法
2019/10/13 PHP
jquery each()源代码
2011/02/14 Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
2012/02/07 Javascript
关于jQuery object and DOM element
2013/04/15 Javascript
jQuery输入城市查看地图使用介绍
2013/05/08 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
2016/07/27 Javascript
JavaScript实现DOM对象选择器
2016/09/24 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
2017/08/17 jQuery
vue-star评星组件开发实例
2018/03/01 Javascript
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
解决vue打包后vendor.js文件过大问题
2019/07/03 Javascript
Windows下安装 node 的版本控制工具 nvm
2020/02/06 Javascript
vue项目开启Gzip压缩和性能优化操作
2020/10/26 Javascript
详解vue实现坐标拾取器功能示例
2020/11/18 Vue.js
python批量修改文件后缀示例代码分享
2013/12/24 Python
Python中Iterator迭代器的使用杂谈
2016/06/20 Python
基于Python __dict__与dir()的区别详解
2017/10/30 Python
PyCharm代码整体缩进,反向缩进的方法
2018/06/25 Python
在python中利用最小二乘拟合二次抛物线函数的方法
2018/12/29 Python
TensorFlow 输出checkpoint 中的变量名与变量值方式
2020/02/11 Python
使用Django搭建网站实现商品分页功能
2020/05/22 Python
django haystack实现全文检索的示例代码
2020/06/24 Python
如何用 Python 制作 GitHub 消息助手
2021/02/20 Python
外贸业务员求职自荐信分享
2013/09/21 职场文书
实习生个人的自我评价
2013/12/08 职场文书
kfc实习自我鉴定
2013/12/14 职场文书
四下基层实施方案
2014/03/28 职场文书
mysql数据库实现设置字段长度
2022/06/10 MySQL