简单解析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 继承机制的实现
Aug 12 Javascript
js 限制数字 js限制输入实现代码
Dec 04 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
Aug 23 Javascript
eclipse如何忽略js文件报错(附图)
Oct 30 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
Dec 31 Javascript
Javascript节点关系实例分析
May 15 Javascript
很棒的Bootstrap选项卡切换效果
Jul 01 Javascript
微信小程序 倒计时组件实现代码
Oct 24 Javascript
快速入门Vue
Dec 19 Javascript
微信小程序 登录的简单实现
Apr 19 Javascript
vue语法之拼接字符串的示例代码
Oct 25 Javascript
js实现秒表计时器
Dec 16 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
php4与php5的区别小结(配置异同)
2011/12/20 PHP
一个经典的PHP文件上传类分享
2014/11/18 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
IE8 原生JSON支持
2009/04/13 Javascript
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
2009/04/24 Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
2011/08/15 Javascript
js 输出内容到新窗口具体实现代码
2013/05/31 Javascript
jquery 获取标签名(tagName)示例代码
2013/07/11 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
2013/12/29 Javascript
使用javascript实现json数据以csv格式下载
2015/01/09 Javascript
js实现当前输入框高亮显示的方法
2015/08/19 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
JavaScript登录记住密码操作(超简单代码)
2017/03/22 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
2017/04/27 Javascript
微信小程序对接七牛云存储的方法
2017/07/30 Javascript
JQuery判断正整数整理小结
2017/08/21 jQuery
Angular利用trackBy提升性能的方法
2018/01/26 Javascript
浅析Vue 生命周期
2018/06/21 Javascript
angular6.0开发教程之如何安装angular6.0框架
2018/06/29 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
vue-cli3配置与跨域处理方法
2019/08/17 Javascript
在CMD命令行中运行python脚本的方法
2018/05/12 Python
Numpy数组array和矩阵matrix转换方法
2019/08/05 Python
PyTorch之图像和Tensor填充的实例
2019/08/18 Python
python+tkinter实现学生管理系统
2019/08/20 Python
Python 实现打印单词的菱形字符图案
2020/04/12 Python
Python的Tqdm模块实现进度条配置
2021/02/24 Python
深入理解css中vertical-align属性
2017/04/18 HTML / CSS
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
如何开发安全的AJAX应用
2014/03/26 面试题
元宵晚会主持词
2014/03/25 职场文书
乡镇八一建军节活动方案
2014/08/24 职场文书
反四风个人对照检查材料思想汇报
2014/09/25 职场文书
2014年小学教导处工作总结
2014/12/19 职场文书
优化经济发展环境工作总结
2015/08/11 职场文书
教师节随笔
2015/08/15 职场文书