图文详解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实现键盘方向键翻页功能的代码
Jun 03 Javascript
javascript Demo模态窗口
Dec 06 Javascript
js遍历、动态的添加数据的小例子
Jun 22 Javascript
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 Javascript
window.location的重写及判断location是否被重写
Sep 04 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
Aug 14 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
Jan 21 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
Apr 23 Javascript
node.js中 redis 的安装和基本操作示例
Feb 10 Javascript
node.js中npm包管理工具用法分析
Feb 14 Javascript
微信小程序实现手指拖动选项排序
Apr 22 Javascript
Vue.js暴露方法给WebView的使用操作
Sep 07 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继承中方法重载(覆盖)的应用场合
2015/02/09 PHP
PHP导出带样式的Excel示例代码
2016/08/28 PHP
用JavaScript编写COM组件的步骤
2009/03/17 Javascript
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
2014/05/08 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
Bootstrap媒体对象的实现
2016/05/01 Javascript
HTML Table 空白单元格补全的简单实现
2016/10/13 Javascript
微信JSAPI支付操作需要注意的细节
2017/01/10 Javascript
js实现短信发送倒计时功能(正则验证)
2017/02/10 Javascript
vue-resourse将json数据输出实例
2017/03/08 Javascript
Vue+SpringBoot开发V部落博客管理平台
2017/12/27 Javascript
vue轮播图插件vue-concise-slider的使用
2018/03/13 Javascript
AngularJS实现动态切换样式的方法分析
2018/06/26 Javascript
js图片查看器插件用法示例
2019/06/22 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
2020/07/19 Javascript
[24:42]VP vs TNC Supermajor小组赛B组 BO3 第三场 6.2
2018/06/03 DOTA
Python 数据处理库 pandas 入门教程基本操作
2018/04/19 Python
Python get获取页面cookie代码实例
2018/09/12 Python
用Python去除图像的黑色或白色背景实例
2019/12/12 Python
使用PyOpenGL绘制三维坐标系实例
2019/12/24 Python
学会迭代器设计模式,帮你大幅提升python性能
2021/01/03 Python
Python爬取网站图片并保存的实现示例
2021/02/26 Python
Html5 APP中监听返回事件处理的方法示例
2018/03/15 HTML / CSS
特罗佩亚包官方网站:Tropea
2017/01/03 全球购物
美国和加拿大计算机和电子产品购物网站:TigerDirect.com
2019/09/13 全球购物
网络教育毕业生自我鉴定
2013/10/10 职场文书
网络编辑岗位职责范本
2014/02/10 职场文书
工程技术员岗位职责
2014/03/02 职场文书
英文请假条
2014/04/11 职场文书
交通事故委托书范本精选
2014/10/04 职场文书
2014年生产管理工作总结
2014/12/23 职场文书
2014年学校禁毒工作总结
2014/12/23 职场文书
小学新教师个人总结
2015/02/05 职场文书
员工拾金不昧表扬稿
2015/05/05 职场文书
2015年乡镇食品安全工作总结
2015/10/22 职场文书