文档章节

protopype 和 __proto__的区别

hey卷
 hey卷
发布于 2016/11/30 14:30
字数 554
阅读 2
收藏 0
点赞 0
评论 0

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

早前在博客园发的几篇基础文,都是图解系列,总结了一些JavaScript容易混淆的知识点,现在拿来在掘金分享一下吧。

原文地址:三张图搞懂JavaScript的原型对象与原型链

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

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

1、prototype__proto__的区别

 

 

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() {}

2、__proto__属性指向谁

 

 

/*1、字面量方式*/
var a = {};
console.log(a.constructor); //function Object() { [native code] } (即构造器Object)
console.log(a.__proto__ === a.constructor.prototype); //true

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

/*3、Object.create()方式*/
var a1 = {a:1} 
var a2 = Object.create(a1);
console.log(a2.constructor); //function Object() { [native code] } (即构造器Object)
console.log(a2.__proto__ === a1);// true 
console.log(a2.__proto__ === a2.constructor.prototype); //false(此处即为图1中的例外情况)

三、什么是原型链

 

 

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

本文转载自:

共有 人打赏支持
hey卷
粉丝 2
博文 14
码字总数 3646
作品 0
杭州
程序员
prototype和__proto__直观区别

真正的prototype与proto的区别,在于prototype原始类设计者,也就是说,原始类设计人员需要对prototype进行一系列操作,而proto则是二次开发人员,比如我var app = new Vue(),我想要为Vue实例...

趁你还年轻
2017/06/14
0
0
[笔记] js原型链

js原型链中的object.proto 和object.prototype的区别 1)每个对象都有.proto属性 2)每个构造函数(函数也是对象,但对象不一定是函数)都具有.prototype属性(prototype是构造函数独有的属性...

huanglw
2017/07/12
0
0
mac 上安装Protobuffer

介绍 Protocol Buffers (ProtocolBuffer/ protobuf )是Google公司开发的一种数据描述语言,类似于XML能够将结构化数据序列化,可用于数据存储、通信协议等方面。现阶段支持C++、JAVA、Pytho...

solate
2016/12/05
118
0
js常见基础对象属性方法(一)

js常见基础对象属性方法 Object.keys() Object.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for...in 循环遍历改对象时返回的顺序一致(两...

孟飞阳
07/17
0
0
js中__proto__和prototype的区别和关系?

初学javascript的时候也跟题主一样搞不清楚,自己好好总结了一下: 首先,要明确几个点: 1.在JS里,万物皆对象。 方法(Function)是对象,方法的原型(Function.prototype)是对象。因此,它...

WolfX
2016/06/20
83
0
javaScript中__proto__与prototype的区别与联系

[转]javaScript中proto_与prototype的区别与联系 2014-5-4阅读490 评论0 最近在学习javascript的原型,发现了proto与prototype,学问很大,于是研究了一下。 首先解释一下什么是原型? 原型是...

mysky221
2015/08/30
0
0
iOS网络通信之Protobuf

介绍 在不同平台通信的时候,首先需要将对象进行序列化。iOS平台上我们常用进行归档,当然也可以将数据处理为JSON或者XML格式。只能在iOS/Mac平台使用,因此它归档的二进制数据不适合于在不同...

大茶园丁
2015/12/02
2.3K
2
百度AI开发者大会见闻

一. Duer OS 终极目标: 听清, 听懂, 满足 软硬件一体的开放 产品化应用 外形各异,实际网络和多口音情况下 体验不好 Dueros 软件后端架构 demo- snowboy 快速生成命令词唤醒模型并使用 ht...

skywalker
2017/07/12
0
0
JS难点剖析-原型&原型链

JS难点剖析-原型&原型链 js的原型&原型链&闭包,在很多人看来是区分JS程序员水平的关键知识点,当然对这句话我不是十分赞同。但是掌握这几个核心知识点总是没错滴!(闭包剖析在下一篇博客中...

banyoukang
2016/04/13
62
0
Protobuffer和json深度对比

JSON相信大家都知道是什么东西,如果不知道,那可就真的OUT了,GOOGLE一下去。这里就不介绍啥的了。 Protobuffer大家估计就很少听说了,但如果说到是GOOGLE搞的,相信大家都会有兴趣去试一下...

squanchao
2016/10/17
7
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

MacOS和Linux内核的区别

导读 有些人可能认为MacOS和Linux内核有相似之处,因为它们可以处理类似的命令和类似的软件。甚至有人认为苹果的MacOS是基于linux的。事实上,这两个内核的历史和特性是非常不同的。今天,我...

问题终结者
20分钟前
1
0
SpringBoot | 第八章:统一异常、数据校验处理

前言 在web应用中,请求处理时,出现异常是非常常见的。所以当应用出现各类异常时,进行异常的捕获或者二次处理(比如sql异常正常是不能外抛)是非常必要的,比如在开发对外api服务时,约定了响...

oKong
28分钟前
0
0
mysql高级

一、存储引擎 InnoDB MyISAM 比较 二、数据类型 整型 浮点数 字符串 时间和日期 三、索引 索引分类 索引的优点 索引优化 B-Tree 和 B+Tree 原理 四、查询性能优化 五、切分 垂直切分 水平切分...

丁典
48分钟前
1
0
rsync通过同步服务、系统日志、screen工具

rsync通过后台服务同步 在远程主机中建立一个rsync服务器,在服务器上配置好rsync的各种应用,然后将本机作为rsync的一个客户端连接远程的rsync服务器。 首先在A机器上建立并且配置rsync的配...

黄昏残影
今天
5
0
Spring Cloud Gateway 接口文档聚合实现

在微服务架构下,通常每个微服务都会使用Swagger来管理我们的接口文档,当微服务越来越多,接口查找管理无形中要浪费我们不少时间,毕竟懒是程序员的美德。 由于swagger2暂时不支持webflux 走...

冷冷gg
今天
123
2
流利阅读笔记31-20180720待学习

克罗地亚:输了世界杯,却赢了全世界 雪梨 2018-07-20 1.今日导读 1998 年,年轻的克罗地亚国家队在法国世界杯给全世界留下了不可磨灭的印象,格子军团一举夺得了季军。4 年后,克罗地亚折戟...

aibinxiao
今天
5
0
OSChina 周五乱弹 —— 我们是食物链的最底层

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @温家成 :分享谢安琪的单曲《姿色份子》 《姿色份子》- 谢安琪 手机党少年们想听歌,请使劲儿戳(这里) @贪吃飒:最近p2p怎么了、半个月爆了...

小小编辑
今天
959
14
Android Studio 3.0 之后打包apk出现应用未安装问题

1、废话 出现这个问题的原因,并不是只有一个,而是有多个原因,不懂的估计会被搞得一头雾水,下面我列举的是我遇到的几种问题和网友遇到的几种问题,但不一定是全部,也有可能有些莫名其妙的...

她叫我小渝
今天
0
0
前端基础

1. get请求传参长度的误区 误区:我们经常说get请求参数的大小存在限制,而post请求的参数大小是无限制的。 实际上HTTP 协议从未规定 GET/POST 的请求长度限制是多少。对get请求参数的限制是...

wenxingjun
今天
0
0
拦截SQLSERVER的SSL加密通道替换传输过程中的用户名密码实现运维审计(一)

工作准备 •一台SQLSERVER 2005/SQLSERVER 2008服务 •SQLSERVER jdbc驱动程序 •Java开发环境eclipse + jdk1.8 •java反编译工具JD-Core 反编译JDBC分析SQLSERVER客户端与服务器通信原理 SQ...

紅顏為君笑
今天
15
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部