图文详解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 相关文章推荐
js模拟弹出效果代码修正版
Aug 07 Javascript
Mootools 1.2教程 输入过滤第一部分(数字)
Sep 15 Javascript
JavaScript Timer实现代码
Feb 17 Javascript
js parseInt("08")未指定进位制问题
Jun 19 Javascript
一步一步制作jquery插件Tabs实现过程
Jul 06 Javascript
js实现背景图自适应窗口大小
Jan 10 Javascript
微信小程序 ecshop地址三级联动实现实例代码
Feb 28 Javascript
jQuery弹出窗口简单实现代码
Mar 09 Javascript
React服务端渲染(总结)
Jul 01 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
Jul 30 Javascript
深入浅析JavaScript中的in关键字和for-in循环
Apr 20 Javascript
Vue js with语句原理及用法解析
Sep 03 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
ADODB结合SMARTY使用~超级强
2006/11/25 PHP
PHP实现MySQL更新记录的代码
2008/06/07 PHP
解析crontab php自动运行的方法
2013/06/24 PHP
PHP中is_file不能替代file_exists的理由
2014/03/04 PHP
Fleaphp常见函数功能与用法示例
2016/11/15 PHP
php插入mysql数据返回id的方法
2018/05/31 PHP
PHP7匿名类的用法示例
2019/04/05 PHP
深入学习微信网址链接解封的防封原理visit_type
2019/08/15 PHP
JavaScript下利用fso判断文件是否存在的代码
2010/12/11 Javascript
jquery取子节点及当前节点属性值的方法
2014/09/09 Javascript
Bootstrap实现提示框和弹出框效果
2017/01/11 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
javascript 取小数点后几位几种方法总结
2017/08/02 Javascript
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
vuex的module模块用法示例
2018/11/12 Javascript
[01:01:13]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第三场
2018/04/06 DOTA
Python的for和break循环结构中使用else语句的技巧
2016/05/24 Python
详谈python read readline readlines的区别
2017/09/22 Python
python通过socket实现多个连接并实现ssh功能详解
2017/11/08 Python
django manage.py扩展自定义命令方法
2018/05/27 Python
对python 通过ssh访问数据库的实例详解
2019/02/19 Python
Python3转换html到pdf的不同解决方案
2019/03/11 Python
django-初始配置(纯手写)详解
2019/07/30 Python
Django ORM 查询管理器源码解析
2019/08/05 Python
python 使用cx-freeze打包程序的实现
2020/03/14 Python
python 比较字典value的最大值的几种方法
2020/04/17 Python
HTML5 placeholder属性详解
2016/06/22 HTML / CSS
牦牛毛户外探险服装:Kora
2019/02/08 全球购物
行政总经理岗位职责
2013/12/05 职场文书
经典优秀毕业生求职信范文分享
2013/12/18 职场文书
城管执法人员纪律作风整顿思想汇报
2014/09/13 职场文书
纪念九一八事变83周年国旗下讲话稿
2014/09/15 职场文书
领导干部整治奢华浪费之风思想汇报
2014/10/07 职场文书
2015年社区综治宣传月活动总结
2015/03/25 职场文书
mysql中between的边界,范围说明
2021/06/08 MySQL
python中取整数的几种方法
2021/11/07 Python