图文详解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 相关文章推荐
基于jQuery架构javascript基础体系
Jan 01 Javascript
判断js对象是否拥有某一个属性的js代码
Aug 16 Javascript
document.compatMode的CSS1compat使用介绍
Apr 03 Javascript
node.js操作mysql(增删改查)
Jul 24 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
Jan 23 Javascript
原生JS下拉加载插件分享
Dec 26 Javascript
jquery实现自适应banner焦点图
Feb 16 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
Aug 16 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
Apr 13 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
Aug 20 Javascript
Vue移动端实现图片上传及超过1M压缩上传
Dec 23 Javascript
JS数据类型分类及常用判断方法
Nov 19 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
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
PHP Ajax中文乱码问题解决方法
2009/02/27 PHP
PHP错误WARNING: SESSION_START() [FUNCTION.SESSION-START]解决方法
2014/05/04 PHP
PHP读取word文档的方法分析【基于COM组件】
2017/08/01 PHP
PHP回调函数简单用法示例
2019/05/08 PHP
简单的Jquery全选功能
2013/11/07 Javascript
jQuery表格插件datatables用法详解
2020/11/23 Javascript
封装属于自己的JS组件
2016/01/27 Javascript
使用Script元素发送JSONP请求的方法
2016/06/12 Javascript
Angular2  NgModule 模块详解
2016/10/19 Javascript
jQuery中 bind的用法简单介绍
2017/02/13 Javascript
Ionic3实现图片瀑布流布局
2017/08/09 Javascript
Angular 2.0+ 的数据绑定的实现示例
2017/08/09 Javascript
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
微信小程序身份证验证方法实现详解
2019/06/28 Javascript
微信小程序swiper左右扩展各显示一半代码实例
2019/12/05 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
[02:09]DOTA2辉夜杯 EHOME夺冠举杯现场
2015/12/28 DOTA
简单介绍python封装的基本知识
2019/08/10 Python
浅谈python中统计计数的几种方法和Counter详解
2019/11/07 Python
Python高级property属性用法实例分析
2019/11/19 Python
django rest framework serializer返回时间自动格式化方法
2020/03/31 Python
使用matplotlib动态刷新指定曲线实例
2020/04/23 Python
python实现扫雷小游戏
2020/04/24 Python
为什么说python更适合树莓派编程
2020/07/20 Python
Python fileinput模块如何逐行读取多个文件
2020/10/05 Python
html5 兼容IE6结构的实现代码
2012/05/14 HTML / CSS
Pretty Little Thing爱尔兰:时尚女性服饰
2017/03/27 全球购物
智能旅行箱:Horizn Studios
2018/04/30 全球购物
就业自荐书
2013/12/05 职场文书
商务考察邀请函范文
2014/01/21 职场文书
企业党员公开承诺书
2014/03/26 职场文书
见习报告格式范文
2014/11/08 职场文书
毕业典礼致辞
2015/07/29 职场文书
求职信:求职应该注意的问题
2019/04/24 职场文书