三张图搞懂JavaScript的原型对象与原型链

开发 开发工具
我们知道原型是一个对象,其他对象可以通过它实现属性继承。但是除了prototype,又有一个__proto__是用来干嘛的?下面用三张简单的图,配合一些示例代码来理解一下。

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

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

prototype和__proto__的区别

  1.  var a = {};  
  2. console.log(a.prototype);  //undefined  
  3. console.log(a.__proto__);  //Object {}  
  4.   
  5. var b = function(){}  
  6. console.log(b.prototype);  //b {}  
  7. console.log(b.__proto__);  //function() {} 

__proto__属性

  1. /*1、字面量方式*/  
  2. var a = {};  
  3. console.log(a.__proto__);  //Object {}  
  4.   
  5. console.log(a.__proto__ === a.constructor.prototype); //true  
  6.   
  7. /*2、构造器方式*/  
  8. var A = function(){};  
  9. var a = new A();  
  10. console.log(a.__proto__); //A {}  
  11.   
  12. console.log(a.__proto__ === a.constructor.prototype); //true  
  13.   
  14. /*3、Object.create()方式*/  
  15. var a1 = {a:1}  
  16. var a2 = Object.create(a1);  
  17. console.log(a2.__proto__); //Object {a: 1}  
  18.   
  19. console.log(a.__proto__ === a.constructor.prototype); //false(此处即为图1中的例外情况) 

原型链

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

【本文为51CTO专栏作者“谢军”的原创稿件,转载可通过作者微信公众号(jingfeng18)获取联系】

戳这里,看该作者更多好文

 

责任编辑:赵宁宁 来源: 51CTO专栏
相关推荐

2020-10-20 08:35:34

JS基础进阶

2020-02-20 14:00:15

JavaScript原型原型链

2022-05-26 09:20:01

JavaScript原型原型链

2023-08-28 07:12:54

2017-04-07 11:15:49

原型链原型Javascript

2019-02-27 16:00:48

JS原型原型链对象

2016-06-07 14:28:39

Javascript原型

2012-01-05 15:07:11

JavaScript

2012-11-08 10:40:47

JavaScript原型链

2024-05-15 18:59:01

JavaScript语言原型

2016-05-06 14:02:18

JavaScript原型链

2020-09-10 07:04:30

JSJavaScript 原型链

2011-08-31 14:48:33

JavaScript

2010-10-08 09:13:15

oop模式JavaScript

2022-05-26 23:14:26

原型原型链JS继承

2022-03-29 09:15:55

Javascript函数属性

2015-11-26 13:11:24

javascript原型链作用域

2016-12-27 09:10:29

JavaScript原型链继承

2013-09-18 14:01:46

JavaScript

2022-07-04 11:06:02

RocketMQ事务消息实现
点赞
收藏

51CTO技术栈公众号