浅谈JS的原型和原型链


Posted in Javascript onJune 04, 2021

1.原型prototype

javascript中所有函数都具有这个属性,所有具有prototype属性的对象都是一个函数。prototype的作用是向对象添加一个方法/属性。

function persion(){}
persion.prototype.name = "xiaoming"
console.log(persion.prototype)//{name: "xiaoming", constructor: ƒ}

2.原型指针:__proto__

如果将上面persion函数生成一个实例对象Persion1,用prototype为他添加一个属性写法如下:

function persion(){}
persion.prototype.name = "xiaoming"
let Persion1 = new persion();
console.log(Persion1) //控制台结果如下

打印实例Persion1的结果如下:

浅谈JS的原型和原型链

从上面打印的结果来看,Persion1.__proto__.name = persion.prototype.name,也就是实例对象的__proto__属性等于其构造函数的prototype。

理解了上面之后,原型链就很好理解了,我们可以通过Persion1.__proto__.__proto__直接查找到Object的方法。这么说可能不太直观,上代码:

function persion(){}
persion.prototype.name = "xiaoming"
let Persion1 = new persion();
console.log(Persion1.__proto__.__proto__.toString) //通过原型链查找到的Object的toString方法
console.log(Object.prototype.toString)//Object上的toString方法

控制台打印结果如下,这样就印证原型链逐级查找的特性。

浅谈JS的原型和原型链

总结

任何对象都可以通过原型链,也就是__proto__属性,逐级查找,最终的重点都是Object,必经之路是function。他们的关系像是用一条链子串起来一样,我们把这种关系叫做原型链。

浅谈JS的原型和原型链

以上就是浅谈JS的原型和原型链的详细内容,更多关于JS的原型和原型链的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
Jquery Change与bind事件代码
Sep 29 Javascript
JavaScript 匿名函数和闭包介绍
Apr 13 Javascript
bootstrap选项卡扩展功能详解
Jun 14 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
Oct 09 Javascript
vue打包后显示空白正确处理方法
Nov 01 Javascript
Angular4集成ng2-file-upload的上传组件
Mar 14 Javascript
Angular 封装并发布组件的方法示例
Apr 19 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 Javascript
解决layui轮播图有数据不显示的情况
Sep 16 Javascript
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
微信小程序开发(一):服务器获取数据列表渲染操作示例
Jun 01 Javascript
javascript实现评分功能
Jun 24 Javascript
vue响应式原理与双向数据的深入解析
代码解析React中setState同步和异步问题
Jun 03 #Javascript
React配置子路由的实现
手把手教你从零开始react+antd搭建项目
react antd实现动态增减表单
react 项目中引入图片的几种方式
Jun 02 #Javascript
小程序wx.getUserProfile接口的具体使用
You might like
图解上海144收音机
2021/03/02 无线电
做一个有下拉功能的留言版
2006/10/09 PHP
php模拟ping命令(php exec函数的使用方法)
2013/10/25 PHP
使用 PHPStorm 开发 Laravel
2015/03/24 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
Laravel 数据库加密及数据库表前缀配置方法
2019/10/10 PHP
php装饰者模式简单应用案例分析
2019/10/23 PHP
JQuery autocomplete 使用手册
2010/04/01 Javascript
jquery图形密码实现方法
2015/03/11 Javascript
直接拿来用的15个jQuery代码片段
2015/09/23 Javascript
Node.js的环境安装配置(使用nvm方式)
2016/10/11 Javascript
jQuery实现二维码扫描功能
2017/01/09 Javascript
js实现百度搜索提示框
2017/02/05 Javascript
js实现九宫格拼图小游戏
2017/02/13 Javascript
ES6学习之变量的两种命名方法示例
2017/07/18 Javascript
React从react-router路由上做登陆验证控制的方法
2018/05/10 Javascript
浅谈JS for循环中使用break和continue的区别
2020/07/21 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
2020/08/04 Javascript
js实现轮播图效果 纯js实现图片自动切换
2020/08/09 Javascript
OpenLayer学习之自定义测量控件
2020/09/28 Javascript
简单的抓取淘宝图片的Python爬虫
2014/12/25 Python
Python在Console下显示文本进度条的方法
2016/02/14 Python
在Python 中实现图片加框和加字的方法
2019/01/26 Python
python中selenium操作下拉滚动条的几种方法汇总
2019/07/14 Python
Python数据可视化:顶级绘图库plotly详解
2019/12/07 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
python 实现图像快速替换某种颜色
2020/06/04 Python
python 求两个向量的顺时针夹角操作
2021/03/04 Python
css3 矩阵的使用详解
2018/03/20 HTML / CSS
西班牙第一的网上药房:PromoFarma.com
2017/04/17 全球购物
Derek Rose官网:英国高档睡衣、家居服和内衣品牌
2020/01/18 全球购物
房地产销售员的自我评价分享
2013/12/04 职场文书
迎新春趣味活动方案
2014/08/24 职场文书
支部书记四风问题自我剖析材料
2014/09/29 职场文书
介绍信样本
2015/01/31 职场文书
SQL Server表分区删除详情
2021/10/16 SQL Server