图文详解JavaScript的原型对象及原型链


Posted in Javascript onAugust 02, 2016

对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype容易与__proto__混淆,二来它们之间的各种指向实在有些复杂,其实市面上已经有非常多的文章在尝试说清楚,有一张所谓很经典的图,上面画了各种线条,一会连接这个一会连接那个,说实话我自己看得就非常头晕,更谈不上完全理解了。所以我自己也想尝试一下,看看能不能把原型中的重要知识点拆分出来,用最简单的图表形式说清楚。

我们知道原型是一个对象,其他对象可以通过它实现属性继承。但是尼玛除了prototype,又有一个__proto__是用来干嘛的?长那么像,让人怎么区分呢?它们都指向谁,那么混乱怎么记啊?原型链又是什么鬼?相信不少初学者甚至有一定经验的老鸟都不一定能完全说清楚,下面用三张简单的图,配合一些示例代码来理解一下。

一、prototype和__proto__的区别

图文详解JavaScript的原型对象及原型链

var a = {};
console.log(a.prototype); //undefined
console.log(a.__proto__); //Object {}

var b = function(){}
console.log(b.prototype); //b {}
console.log(b.__proto__); //function() {}

图文详解JavaScript的原型对象及原型链

/*1、字面量方式*/
var a = {};
console.log(a.__proto__); //Object {}

console.log(a.__proto__ === a.constructor.prototype); //true

/*2、构造器方式*/
var A = function(){};
var a = new A();
console.log(a.__proto__); //A {}

console.log(a.__proto__ === a.constructor.prototype); //true

/*3、Object.create()方式*/
var a1 = {a:1}
var a2 = Object.create(a1);
console.log(a2.__proto__); //Object {a: 1}

console.log(a.__proto__ === a.constructor.prototype); //false(此处即为图1中的例外情况)

图文详解JavaScript的原型对象及原型链

var A = function(){};
var a = new A();
console.log(a.__proto__); //A {}(即构造器function A 的原型对象)
console.log(a.__proto__.__proto__); //Object {}(即构造器function Object 的原型对象)
console.log(a.__proto__.__proto__.__proto__); //null

以上就是本文的全部内容了,本文用三张图解释了JavaScript的原型对象与原型链,希望对大家学习JavaScript的时候有所帮助。

Javascript 相关文章推荐
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
Jun 28 Javascript
node.js中的console.log方法使用说明
Dec 09 Javascript
js实现方块上下左右移动效果
Aug 17 Javascript
Three.js基础学习之场景对象
Sep 27 Javascript
详解Webpack实战之构建 Electron 应用
Dec 25 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
Jan 30 Javascript
vue-cli构建项目下使用微信分享功能
May 28 Javascript
layui获取选中行数据的实例讲解
Aug 19 Javascript
vue使用laydate时间插件的方法
Nov 14 Javascript
微信小程序canvas截取任意形状的实现代码
Jan 13 Javascript
vue 实现动态路由的方法
Jul 06 Javascript
Vue实现计算器计算效果
Aug 17 Javascript
AngularJS基础 ng-mousemove 指令简单示例
Aug 02 #Javascript
功能强大的Bootstrap使用手册(一)
Aug 02 #Javascript
js实现图片缓慢放大缩小效果
Aug 02 #Javascript
基于Vuejs实现购物车功能
Aug 02 #Javascript
js实现统计字符串中特定字符出现个数的方法
Aug 02 #Javascript
js简单时间比较的方法
Aug 02 #Javascript
JavaScript简单获取系统当前时间完整示例
Aug 02 #Javascript
You might like
精通php的十大要点(上)
2009/02/04 PHP
PHP输出英文时间日期的安全方法(RFC 1123格式)
2014/06/13 PHP
全面解析PHP操作Memcache基本函数
2016/07/14 PHP
基于thinkPHP3.2实现微信接入及查询token值的方法
2017/04/18 PHP
laravel实现上传图片并在页面显示的例子
2019/10/14 PHP
JavaScript的Cookies
2008/01/16 Javascript
数组方法解决JS字符串连接性能问题有争议
2011/01/12 Javascript
CSS(js)限制页面显示的文本字符长度
2012/12/27 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
2013/11/20 Javascript
javascript 按键事件(兼容各浏览器)
2013/12/20 Javascript
JavaScript阻止事件冒泡示例分享
2014/12/28 Javascript
JS去除iframe滚动条的方法
2015/04/01 Javascript
javascript 实现动态侧边栏实例详解
2016/11/11 Javascript
JavaScript适配器模式原理与用法实例详解
2020/03/09 Javascript
[27:08]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第二场 11.21
2020/11/23 DOTA
python基础教程之简单入门说明(变量和控制语言使用方法)
2014/03/25 Python
Python自动重试HTTP连接装饰器
2015/04/28 Python
python选择排序算法实例总结
2015/07/01 Python
Scrapy基于selenium结合爬取淘宝的实例讲解
2018/06/13 Python
对python多线程与global变量详解
2018/11/09 Python
python实现剪切功能
2019/01/23 Python
python批量修改图片尺寸,并保存指定路径的实现方法
2019/07/04 Python
python实现大文本文件分割
2019/07/22 Python
Python如何基于Tesseract实现识别文字功能
2020/06/05 Python
如何在windows下安装配置python工具Ulipad
2020/10/27 Python
python matplotlib工具栏源码探析二之添加、删除内置工具项的案例
2021/02/25 Python
美国第二大团购网站:LivingSocial
2016/07/24 全球购物
中国领先的专业家电网购平台:国美在线
2016/12/25 全球购物
配置管理计划的主要内容有哪些
2014/06/20 面试题
小区门卫工作职责
2013/12/14 职场文书
中学运动会广播稿
2014/01/19 职场文书
加薪通知
2015/04/25 职场文书
Python 批量下载阴阳师网站壁纸
2021/05/19 Python
Java获取e.printStackTrace()打印的信息方式
2021/08/07 Java/Android
Python echarts实现数据可视化实例详解
2022/03/03 Python
JS前端使用Canvas快速实现手势解锁特效
2022/09/23 Javascript