简单解析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 相关文章推荐
ajax无刷新动态调用股票信息(改良版)
Nov 01 Javascript
JavaScript中的闭包原理分析
Mar 08 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
Dec 19 Javascript
js实现鼠标滑过文字链接色彩变化的效果
May 06 Javascript
JavaScript实现鼠标点击后层展开效果的方法
May 13 Javascript
JS数组array元素的添加和删除方法代码实例
Jun 01 Javascript
CSS中position属性之fixed实现div居中
Dec 14 Javascript
Javascript小技能总结(推荐)
Jun 02 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
Mar 19 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
如何在Vue中使用CleaveJS格式化你的输入内容
Dec 14 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
Sep 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
Windows PHP5和Apache的安装与配置
2009/06/08 PHP
PHP扩展框架之Yaf框架的安装与使用
2016/05/18 PHP
PHP中include()与require()的区别说明
2017/02/14 PHP
PHP 对象接口简单实现方法示例
2020/04/13 PHP
JS中使用Array函数shift和pop创建可忽略参数的例子
2014/05/28 Javascript
JavaScript设计模式之策略模式实例
2014/10/10 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
2015/03/04 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
2016/06/13 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
BootStrap Typeahead自动补全插件实例代码
2016/08/10 Javascript
js实现本地时间同步功能
2017/08/26 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
2018/01/02 jQuery
详解JavaScript中的数组合并方法和对象合并方法
2018/05/11 Javascript
详解基于node.js的脚手架工具开发经历
2019/01/28 Javascript
Vue 实现登录界面验证码功能
2020/01/03 Javascript
es6函数之rest参数用法实例分析
2020/04/18 Javascript
基于Element封装一个表格组件tableList的使用方法
2020/06/29 Javascript
[02:58]魔廷新尊——痛苦女王至宝语音台词节选
2020/06/14 DOTA
[01:46]2020完美世界全国高校联赛秋季赛报名开启
2020/10/15 DOTA
Python标准库之collections包的使用教程
2017/04/27 Python
python 中random模块的常用方法总结
2017/07/08 Python
Python实现扩展内置类型的方法分析
2017/10/16 Python
python爬虫之遍历单个域名
2019/11/20 Python
Python Pandas 转换unix时间戳方式
2019/12/07 Python
python序列类型种类详解
2020/02/26 Python
python安装第三方库如xlrd的方法
2020/10/31 Python
python爬取招聘要求等信息实例
2020/11/20 Python
pyspark对Mysql数据库进行读写的实现
2020/12/30 Python
HTML5 canvas实现雪花飘落特效
2016/03/08 HTML / CSS
军用级手机壳,专为冒险而建:Zizo Wireless
2019/08/07 全球购物
环境科学专业个人求职的自我评价
2013/11/28 职场文书
计算机网络及管理学专业求职信
2014/06/05 职场文书
弘扬焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
旷课检讨书500字
2014/10/14 职场文书
朝花夕拾读书笔记
2015/06/29 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书