简单解析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 17 Javascript
jquery中动态效果小结
Dec 16 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
Apr 26 Javascript
javascript实现可改变滚动方向的无缝滚动实例
Jun 17 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
Dec 23 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
Sep 26 Javascript
使用jquery动态加载Js文件和Css文件
Oct 24 Javascript
基于JavaScript实现定时跳转到指定页面
Jan 01 Javascript
JS中this上下文对象使用方式
Oct 09 Javascript
Vue的H5页面唤起支付宝支付功能
Apr 18 Javascript
vue实现的上拉加载更多数据/分页功能示例
May 25 Javascript
JS轻量级函数式编程实现XDM三
Jun 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
Zend Framework动作助手(Zend_Controller_Action_Helper)用法详解
2016/03/05 PHP
CI框架数据库查询之join用法分析
2016/05/18 PHP
php基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
php变量与JS变量实现不通过跳转直接交互的方法
2017/08/25 PHP
laravel 数据迁移与 Eloquent ORM的实现方法
2019/04/12 PHP
TP5框架简单登录功能实现方法示例
2019/10/31 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
页面中body onload 和 window.onload 冲突的问题的解决
2009/07/01 Javascript
按钮JS复制文本框和表格的代码
2011/04/01 Javascript
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
2013/11/13 Javascript
document.write的几点使用心得
2014/05/14 Javascript
ajax如何实现页面局部跳转与结果返回
2015/08/24 Javascript
深入浅析JavaScript中对事件的三种监听方式
2015/09/29 Javascript
基于Javascript实现弹出页面效果
2016/01/01 Javascript
JS字符串去除连续或全部重复字符的实例
2018/03/08 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
JS自定义滚动条效果
2020/03/13 Javascript
[02:32]DOTA2英雄基础教程 美杜莎
2014/01/07 DOTA
[01:20:37]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python使用itchat实现手机控制电脑
2018/02/22 Python
python实现微信发送邮件关闭电脑功能
2018/02/22 Python
python opencv3实现人脸识别(windows)
2018/05/25 Python
mac 安装python网络请求包requests方法
2018/06/13 Python
Win10下python 2.7与python 3.7双环境安装教程图解
2019/10/12 Python
SheIn俄罗斯:时尚女装网上商店
2017/02/28 全球购物
马来西亚奢侈品牌购物商城:Valiram 247
2020/09/29 全球购物
机电一体化专业推荐信
2013/12/03 职场文书
创业计划书——互联网商机
2014/01/12 职场文书
大学学习生活感言
2014/01/18 职场文书
医院合作协议书
2014/08/19 职场文书
群众路线剖析材料范文
2014/10/09 职场文书
毕业生党员个人总结
2015/02/14 职场文书
团员个人年度总结
2015/02/26 职场文书
干部培训简讯
2015/07/20 职场文书
2019年自助餐厅创业计划书模板
2019/08/22 职场文书