JavaScript对象原型链原理解析


Posted in Javascript onJanuary 22, 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 相关文章推荐
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
Apr 12 Javascript
js小技巧--自动隐藏红叉叉
Aug 13 Javascript
jquery 之 $().hover(func1, funct2)使用方法
Jun 14 Javascript
jQuery之选择组件的深入解析
Jun 19 Javascript
JS获取地址栏参数的小例子
Aug 23 Javascript
js控制网页前进和后退的方法
Jun 08 Javascript
BootStrap glyphicons 字体图标实现方法
May 01 Javascript
提高Web性能的前端优化技巧总结
Feb 27 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
Mar 10 Javascript
JS实现的加减乘除四则运算计算器示例
Aug 09 Javascript
three.js中文文档学习之如何本地运行详解
Nov 20 Javascript
Vue props中Object和Array设置默认值操作
Jul 30 Javascript
Node.js学习之内置模块fs用法示例
Jan 22 #Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
Jan 22 #Javascript
ES6学习笔记之let与const用法实例分析
Jan 22 #Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
Jan 22 #Javascript
Vue设置长时间未操作登录自动到期返回登录页
Jan 22 #Javascript
JavaScript设计模型Iterator实例解析
Jan 22 #Javascript
Vue开发环境跨域访问问题
Jan 22 #Javascript
You might like
YB217、YB235、YB400浅听
2021/03/02 无线电
最令PHP初学者们头痛的十四个问题
2007/01/15 PHP
PHP入门速成教程
2007/03/19 PHP
php中判断文件存在是用file_exists还是is_file的整理
2012/09/12 PHP
PHP数组循环操作详细介绍 附实例代码
2013/02/03 PHP
面向对象的javascript(笔记)
2009/10/06 Javascript
Javascript实现的类似Google的Div拖动效果代码
2011/08/09 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
2013/04/26 Javascript
js为空或不是对象问题的快速解决方法
2013/12/11 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
jQuery添加和删除指定标签的方法
2015/12/16 Javascript
学习JavaScript设计模式之代理模式
2016/01/12 Javascript
javascript 删除数组元素和清空数组的简单方法
2017/02/24 Javascript
详解webpack异步加载业务模块
2017/06/23 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
微信小程序wx.getImageInfo()如何获取图片信息
2018/01/26 Javascript
浅析Vue中method与computed的区别
2018/03/06 Javascript
Vue实现6位数密码效果
2018/08/18 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
2018/09/18 Javascript
vue2中引用及使用 better-scroll的方法详解
2018/11/15 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
2018/11/25 Javascript
Bootstrap Paginator+PageHelper实现分页效果
2018/12/29 Javascript
浅谈在Vue.js中如何实现时间转换指令
2019/01/06 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
Python 实现随机数详解及实例代码
2017/04/15 Python
Python实现找出数组中第2大数字的方法示例
2018/03/26 Python
python 把列表转化为字符串的方法
2018/10/23 Python
Python实现爬取马云的微博功能示例
2019/02/16 Python
html5 css3网站菜单实现代码
2013/12/23 HTML / CSS
法国女性内衣购物网站:Glamuse
2019/05/13 全球购物
什么是动态端口(Dynamic Ports)?动态端口的范围是多少?
2014/12/12 面试题
生物科学专业个人求职信范文
2013/12/07 职场文书
教师师德承诺书
2014/03/26 职场文书
校长竞聘演讲稿
2014/05/16 职场文书
运动会标语
2014/06/21 职场文书
导游词之镜泊湖
2019/12/09 职场文书