简单解析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中实现标签切换效果的代码
Mar 01 Javascript
js函数调用常用方法详解
Dec 03 Javascript
jquery实现metro效果示例代码
Sep 06 Javascript
a标签的href与onclick事件的区别详解
Nov 12 Javascript
原生javascript实现图片按钮切换
Jan 12 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
Jan 13 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
Jan 23 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
May 16 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
Aug 05 Javascript
用JS实现简单的登录验证功能
Jul 28 Javascript
Vue.set()实现数据动态响应的方法
Feb 07 Javascript
JavaScript实现像雪花一样的Hexaflake分形
Jul 07 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 模拟$_PUT实现代码
2010/03/15 PHP
Php获取金书网的书名的实现代码
2010/06/11 PHP
php采用curl实现伪造IP来源的方法
2014/11/21 PHP
php实现每天自动变换随机问候语的方法
2015/05/12 PHP
php中时间函数date及常用的时间计算
2017/05/12 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
js 强制弹出窗口代码研究-又一款代码
2010/03/20 Javascript
node.js 一个简单的页面输出实现代码
2012/03/07 Javascript
$.getJSON在IE下失效的原因分析及解决方法
2013/06/16 Javascript
JavaScript 事件入门知识
2015/04/13 Javascript
微信小程序利用co处理异步流程的方法教程
2017/05/20 Javascript
微信小程序中页面FOR循环和嵌套循环
2017/06/21 Javascript
一个简易时钟效果js实现代码
2020/03/25 Javascript
微信小程序使用swiper组件实现类3D轮播图
2018/08/29 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
2019/01/22 Javascript
vue移动端实现手机左右滑动入场动画
2020/06/17 Javascript
vue点击当前路由高亮小案例
2019/09/26 Javascript
[02:36]DOTA2混沌骑士 英雄基础教程
2013/11/26 DOTA
python装饰器深入学习
2018/04/06 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
python使用 request 发送表单数据操作示例
2019/09/25 Python
py-charm延长试用期限实例
2019/12/22 Python
关于ZeroMQ 三种模式python3实现方式
2019/12/23 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
浅谈CSS3动画的回调处理
2016/07/21 HTML / CSS
佳能英国官方网站:Canon UK
2017/08/08 全球购物
毕业生大学生活自我总结
2014/01/31 职场文书
初中军训感想300字
2014/03/05 职场文书
2014年党员公开承诺书范文
2014/03/28 职场文书
2014幼儿园小班工作总结
2014/11/10 职场文书
2015年招商引资工作总结
2015/04/25 职场文书
《田忌赛马》教学反思
2016/02/19 职场文书
python-opencv 中值滤波{cv2.medianBlur(src, ksize)}的用法
2021/06/05 Python
python 常用的异步框架汇总整理
2021/06/18 Python
详解PyTorch模型保存与加载
2022/04/28 Python