简单解析JavaScript中的__proto__属性


Posted in Javascript onMay 10, 2016

JavaScript是一个面向对象语音,即一切皆对象。

那么怎么生成对象?在Java的世界里,对象是由类(Class)实例出来的,通俗地说,就是将事物抽象成一个模具,用这个模具(类)生产出一个个具体的实物(对象)。

可是JS中没有类这个概念,有的是“原型”,对象是由原型衍生出来的。通俗地说,在JS的世界里,“原型”并不是一个模具,而是一个具体的实物(对象)。所有对象都是由另一个对象衍生出来的,而这个被衍生的对象就是所谓的“原型对象”。

在javascript中有三类对象,1用户创建的对象,2构造函数的对象,3原型对象

  • 用户创建的对象,一般意义上使用new语句显式构造的方法。
  • 构造函数的对象,普通的构造函数,即通过new调用生成普通对象的函数
  • 原型对象,构造函数prototype属性指向的对象。

这三个对象中每一个类都有一个属性-__proto__属性,它们指向该对象的原型,从任何对象沿用它开始遍历都可以追溯到Object.prototype。

构造函数都有prototype对象,它指向一个原型对象,通过该构造函数创建对象的时候,被创建的对象的__proto__属性将指向构造函数的prototype属性。

原型对象有一个constructor属性,该属性指向它对应的构造函数。

Talk is cheap, show me the code! 咱们来看看代码:

var obj = {};
console.log(obj);

简单解析JavaScript中的__proto__属性

咱们将__proto__展开看看:是一些默认方法。

简单解析JavaScript中的__proto__属性

你一定会发生这个__proto__对象中也有一个__proto__对象,正如我们刚才说的,每个对象都有一个__proto__属性指向它的原型对象。我们打印一下这个__proto__中的__proto__:

console.log(obj.__proto__.__proto__); //--> null

结果是null,说明已经到了顶层原型对象。obj是用大括号{}定义的,obj的原型对象自然是JS的顶层对象。

咱们再看一端代码,加强下理解:

var parent = {
  name : "parent"
};
var child = {
  name : "child",
  __proto__ : parent
};
var subChild = {
  name : "subChild",
  __proto__ : child
}
console.log(subChild);

简单解析JavaScript中的__proto__属性

  • subChild.__proto__ --> child
  • child.__proto__ --> parent
  • parent.__proto__ --> 顶层原型对象
Javascript 相关文章推荐
用javascript获得地址栏参数的两种方法
Nov 08 Javascript
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
Sep 28 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
Mar 02 Javascript
详解JavaScript正则表达式中的global属性的使用
Jun 16 Javascript
javaScript如何跳出多重循环break、continue
Sep 01 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
Oct 20 Javascript
详解Vue CLI3 多页应用实践和源码设计
Aug 30 Javascript
Vue源码探究之虚拟节点的实现
Apr 17 Javascript
vue视图不更新情况详解
May 16 Javascript
VUE实现移动端列表筛选功能
Aug 23 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
Nov 07 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
Jul 22 Javascript
Web Uploader文件上传插件使用详解
May 10 #Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
May 10 #Javascript
JS上传组件FileUpload自定义模板的使用方法
May 10 #Javascript
使用jQuery处理AJAX请求的基础学习教程
May 10 #Javascript
javascript关于继承解析
May 10 #Javascript
JavaScript继承学习笔记【新手必看】
May 10 #Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
May 10 #Javascript
You might like
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
PHP Token(令牌)设计
2008/03/15 PHP
php include和require的区别深入解析
2013/06/17 PHP
php结合md5的加密解密算法实例
2016/09/30 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
2007/08/08 Javascript
Jquery Change与bind事件代码
2011/09/29 Javascript
在jQuery ajax中按钮button和submit的区别分析
2012/10/07 Javascript
JS 删除字符串最后一个字符的实现代码
2014/02/20 Javascript
动态添加删除表格行的js实现代码
2014/02/28 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
2015/06/24 Javascript
Js制作点击输入框时默认文字消失的效果
2015/09/05 Javascript
Vue项目中引入外部文件的方法(css、js、less)
2017/07/24 Javascript
使用mint-ui开发项目的一些心得(分享)
2017/09/07 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
2017/09/16 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
2017/09/18 Javascript
AngularJS中的路由使用及实现代码
2017/10/09 Javascript
Vue.js实现可配置的登录表单代码详解
2018/03/29 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
2019/04/04 Javascript
微信小程序实现渐入渐出动画效果
2019/06/13 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
2020/04/04 jQuery
antd form表单数据回显操作
2020/11/02 Javascript
python快速排序代码实例
2013/11/21 Python
python k-近邻算法实例分享
2014/06/11 Python
跟老齐学Python之网站的结构
2014/10/24 Python
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
详解Python中的Numpy、SciPy、MatPlotLib安装与配置
2017/11/17 Python
http请求 request失败自动重新尝试代码示例
2018/01/25 Python
Python操作SQLite/MySQL/LMDB数据库的方法
2019/11/07 Python
结构和类有什么异同
2012/07/16 面试题
理财投资建议书
2014/03/12 职场文书
情况说明书格式范文
2014/05/06 职场文书
2014年档案室工作总结
2014/12/01 职场文书
财务人员个人工作总结
2015/02/27 职场文书
oracle表分区的概念及操作
2021/04/24 Oracle
深入理解mysql事务隔离级别和存储引擎
2022/04/12 MySQL