简单解析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 相关文章推荐
jQuery的强大选择器小结
Dec 27 Javascript
编写高性能的JavaScript 脚本的加载与执行
Apr 19 Javascript
用js来解决ajax读取页面乱码
Nov 28 Javascript
JavaScript基础语法之js表达式
Jun 07 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
Feb 28 Javascript
如何理解jQuery中的ajaxSubmit方法
Mar 13 Javascript
webpack搭建vue 项目的步骤
Dec 27 Javascript
深入理解 webpack 文件打包机制(小结)
Jan 08 Javascript
Vue封装的组件全局注册并引用
Jul 24 Javascript
JavaScript类的继承多种实现方法
May 30 Javascript
全面解析JavaScript Module模式
Jul 24 Javascript
JS访问对象两种方式区别解析
Aug 29 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
Zend Framework教程之分发器Zend_Controller_Dispatcher用法详解
2016/03/07 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
PHP的静态方法与普通方法用法实例分析
2019/09/26 PHP
javascript 写类方式之七
2009/07/05 Javascript
php 中序列化和json使用介绍
2013/07/08 Javascript
JavaScript设置body高度为浏览器高度的方法
2015/02/09 Javascript
JavaScript中对JSON对象的基本操作示例
2016/05/21 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
2016/07/12 Javascript
ionic隐藏tabs的方法
2016/08/29 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
2017/05/04 jQuery
Bootstrap实现的标签页内容切换显示效果示例
2017/05/25 Javascript
json前后端数据交互相关代码
2018/09/19 Javascript
layui lay-verify form表单自定义验证规则详解
2019/09/18 Javascript
Vue项目移动端滚动穿透问题的实现
2020/05/19 Javascript
基于javascript原生判断DOM是否加载完毕
2020/10/14 Javascript
在antd Table中插入可编辑的单元格实例
2020/10/28 Javascript
Python实现求数列和的方法示例
2018/01/12 Python
Python解决两个整数相除只得到整数部分的实例
2018/11/10 Python
解决pyinstaller打包pyqt5的问题
2019/01/08 Python
Python实现基于socket的udp传输与接收功能详解
2019/11/15 Python
python json.dumps中文乱码问题解决
2020/04/01 Python
python元组拆包实现方法
2021/02/28 Python
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
英国电子产品购物网站:Tech in the basket
2019/11/08 全球购物
俄罗斯购买剧院和演唱会门票网站:Parter.ru
2019/11/09 全球购物
程序员机试试题汇总
2012/03/07 面试题
C# .NET面试题
2015/11/28 面试题
服务生自我鉴定
2014/01/22 职场文书
本科毕业自我鉴定
2014/03/20 职场文书
陈胜吴广起义口号
2014/06/20 职场文书
法人授权委托书公证范本
2014/09/14 职场文书
护士旷工检讨书
2015/08/15 职场文书
MySQL数据迁移相关总结
2021/04/29 MySQL
使用Redis实现秒杀功能的简单方法
2021/05/08 Redis
Android在Sqlite3中的应用及多线程使用数据库的建议
2022/04/24 Java/Android
winserver2019安装软件一直卡在应用程序正在为首次使用做准备
2022/06/10 Servers