JavaScript对象原型链原理详解


Posted in Javascript onFebruary 05, 2020

这篇文章主要介绍了JavaScript对象原型链原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

一个js对象,除了自己设置的属性外,还会自动生成proto、class、extensible属性,其中,proto属性指向对象的原型。

对象的属性也有writable、enumerable、configurable、value和get/set的配置方法。

JavaScript对象原型链原理详解

对象的创建方式有三种:

一、使用字面量直接创建。

二、基于原型链创建。

JavaScript对象原型链原理详解

分析上图,要点如下:

1.可以new运算符新建对象,foo为自定义函数,即是对象。

2.可以设置foo.prototype上的属性。

3.变量z在原型链上,为foo.prototype的属性,并非obj的自有属性。

4.原型链为obj->foo.prototype->Object.prototype->null。

JavaScript对象原型链原理详解

分析上图,要点如下:

1.若定义与原型链上同名的变量,则不会覆盖原型链上的变量,而是在对象本身新增副本。

2.delete运算符不会影响原型链上已有的变量,只会删除对象自身的属性。

三、使用Object.create创建。

JavaScript对象原型链原理详解

分析上图,要点如下:

1.Object.create是基于传入的参数产生新的对象,并且入参会成为其原型链上的一部分。

2.Object.create(null)创建的对象直接指向null。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于JQUERY的两个ListBox子项互相调整的实现代码
May 07 Javascript
使用jQuery将多条数据插入模态框的实现代码
Oct 08 Javascript
JS简单操作select和dropdownlist实例
Nov 26 Javascript
jQuery中[attribute^=value]选择器用法实例
Dec 31 Javascript
jQuery实现Tab选项卡切换效果简单演示
Nov 23 Javascript
预防网页挂马的方法总结
Nov 03 Javascript
Angular多选、全选、批量选择操作实例代码
Mar 10 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
Apr 13 Javascript
vue 2.0项目中如何引入element-ui详解
Sep 06 Javascript
微信小程序简单实现form表单获取输入数据功能示例
Nov 30 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
Feb 02 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
Aug 10 Javascript
基于Vue的侧边目录组件的实现
Feb 05 #Javascript
Js视频播放器插件Video.js使用方法详解
Feb 04 #Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 #jQuery
JS代码优化的8点建议
Feb 04 #Javascript
9种方法优化jQuery代码详解
Feb 04 #jQuery
JS代码检查工具ESLint介绍与使用方法
Feb 04 #Javascript
使用typescript改造koa开发框架的实现
Feb 04 #Javascript
You might like
PHP的一个完整SMTP类(解决邮件服务器需要验证时的问题)
2006/10/09 PHP
PHPMailer使用教程(PHPMailer发送邮件实例分析)
2012/12/06 PHP
PHP编程函数安全篇
2013/01/08 PHP
Laravel访问出错提示:`Warning: require(/vendor/autoload.php): failed to open stream: No such file or di解决方法
2019/04/02 PHP
JavaScript中的History历史对象
2008/01/16 Javascript
Firefox中autocomplete="off" 设置不起作用Bug的解决方法
2011/03/25 Javascript
extjs_02_grid显示本地数据、显示跨域数据
2014/06/23 Javascript
基于jquery实现省市联动特效
2015/12/17 Javascript
AngularJS 让人爱不释手的八种功能
2016/03/23 Javascript
JS实现图片预加载之无序预加载功能代码
2017/05/12 Javascript
JavaScript表单验证实现代码
2017/05/22 Javascript
vue2.0 和 animate.css的结合使用
2017/12/12 Javascript
JavaScript实现获取select下拉框中第一个值的方法
2018/02/06 Javascript
从零开始搭建webpack+react开发环境的详细步骤
2018/05/18 Javascript
element上传组件循环引用及简单时间倒计时的实现
2018/10/01 Javascript
JS实现放烟花效果
2020/03/10 Javascript
vue单应用在ios系统中实现微信分享功能操作
2020/09/07 Javascript
[00:13]天涯墨客二技能展示
2018/08/25 DOTA
Python 随机生成中文验证码的实例代码
2013/03/20 Python
python基于phantomjs实现导入图片
2016/05/13 Python
Python使用django框架实现多人在线匿名聊天的小程序
2017/11/29 Python
python合并同类型excel表格的方法
2018/04/01 Python
python库lxml在linux和WIN系统下的安装
2018/06/24 Python
使用python批量化音乐文件格式转换的实例
2019/01/09 Python
Python实现一个优先级队列的方法
2020/07/31 Python
python爬虫爬取网页数据并解析数据
2020/09/18 Python
HTML5新特性 多线程(Worker SharedWorker)
2017/04/24 HTML / CSS
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
2018/08/28 HTML / CSS
Sunglasses Shop德国站:欧洲排名第一的太阳镜网站
2017/08/01 全球购物
美国基督教约会网站:ChristianCafe.com
2020/02/04 全球购物
联强国际笔试题面试题
2013/07/10 面试题
毕业生的自我评价分享
2013/12/18 职场文书
五好关工委申报材料
2014/05/31 职场文书
工作年限证明模板
2014/11/01 职场文书
js之ajax文件上传
2021/05/13 Javascript
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript