简单解析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与Ajax常用代码实现对比
Oct 03 Javascript
js中的值类型和引用类型小结 文字说明与实例
Dec 12 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
Aug 08 Javascript
open 动态修改img的onclick事件示例代码
Nov 13 Javascript
浅析jquery与checkbox的checked属性的问题
Apr 27 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
Jul 23 Javascript
详解使用webpack打包编写一个vue-toast插件
Nov 08 Javascript
vue+node实现图片上传及预览的示例方法
Nov 22 Javascript
Echart折线图手柄触发事件示例详解
Dec 16 Javascript
javascript中的with语句学习笔记及用法
Feb 17 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
Jul 20 Javascript
vue相同路由跳转强制刷新该路由组件操作
Aug 05 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
php使用fsockopen函数发送post,get请求获取网页内容的方法
2014/11/15 PHP
Javascript中的变量使用说明
2010/05/18 Javascript
jQuery中绑定事件的命名空间详解
2011/04/05 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
2012/12/25 Javascript
document.forms[].submit()使用介绍
2014/02/19 Javascript
JS日期加减,日期运算代码
2015/11/05 Javascript
功能强大的jquery.validate表单验证插件
2016/11/07 Javascript
js 作用域和变量详解
2017/02/16 Javascript
JavaScript中常见的八个陷阱总结
2017/06/28 Javascript
Node.Js中实现端口重用原理详解
2018/05/03 Javascript
详解在React中跨组件分发状态的三种方法
2018/08/09 Javascript
通过5个知识点轻松搞定Python的作用域
2016/09/09 Python
python模块之re正则表达式详解
2017/02/03 Python
python访问抓取网页常用命令总结
2017/04/11 Python
python 读取Linux服务器上的文件方法
2018/12/27 Python
OpenCV+Python识别车牌和字符分割的实现
2019/01/31 Python
对python文件读写的缓冲行为详解
2019/02/13 Python
Django 路由层URLconf的实现
2019/12/30 Python
利用jupyter网页版本进行python函数查询方式
2020/04/14 Python
Python列表如何更新值
2020/05/27 Python
基于Python下载网络图片方法汇总代码实例
2020/06/24 Python
基于python实现删除指定文件类型
2020/07/21 Python
HTML5 CSS3打造相册效果附源码下载
2014/06/16 HTML / CSS
基于HTML5代码实现折叠菜单附源码下载
2015/11/27 HTML / CSS
世界上最具创新性的增强型知名运动品牌:Proviz
2018/04/03 全球购物
char型变量中能不能存贮一个中文汉字
2015/07/08 面试题
请编写一个 C 函数,该函数在给定的内存区域搜索给定的字符,并返回该字符所在位置索引值
2014/09/15 面试题
服务员岗位责任制
2014/02/11 职场文书
2014新年元旦活动策划方案
2014/02/18 职场文书
员工薪酬激励方案
2014/06/13 职场文书
联片教研活动总结
2014/07/01 职场文书
教师个人学习总结
2015/02/11 职场文书
教师专业技术工作总结2015
2015/05/13 职场文书
好员工观后感
2015/06/17 职场文书
Nginx已编译的nginx-添加新模块
2021/04/01 Servers
前端实现滑动按钮AJAX与后端交互的示例代码
2022/02/24 Javascript