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

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

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

一、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() {}
复制代码

复制代码
/*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中的例外情况)
复制代码

 

 什么是原型链?

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

 https://www.cnblogs.com/shuiyi/p/5305435.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/539620.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Mybatis中resultMap

MyBatis中在查询进行select映射的时候,返回类型可以用resultType,也可以用resultMap,resultType是直接 表示返回类型的,而resultMap则是对外部ResultMap的引用,但是resultType跟resultMap不能同时存在。 1.resultType …

Erlang/OTP设计原则(文档翻译)

http://erlang.org/doc/design_principles/des_princ.html 图和代码皆源自以上链接中Erlang官方文档,翻译时的版本为20.1。 这个设计原则,其实是说用户在设计系统的时候应遵循的标准和规范。阅读前我一直以为写的是作者在设计 Erlang/OTP 框架时的一些原…

存储过程的参数可以使用sql的函数

系统已做成存储过程,调用方法如下: crh_entry(yyyymmdd,起始时间,结束时间); 示例1:进行2016年4月10日10时到12时的测试,应写为: exec crh_entry(20160410,10,11); 示例2:进行2016年4月8日14时到15时的…

java如何实例化集合_如何在java中实例化一个Queue对象?

Queue是一个接口,这意味着你不能直接构造一个Queue 。最好的select是构造一个已经实现Queue接口的类,如下所示: AbstractQueue , ArrayBlockingQueue , ConcurrentLinkedQueue , DelayQueue , D…

java使用队列实现栈思路_算法面试:队列实现栈的方案

声明:码字不易,转载请注明出处,欢迎文章下方讨论交流。前言:Java数据结构与算法专题会不定时更新,欢迎各位读者监督。本篇介绍的是如何用两个队列实现栈的问题。这道题作为上一篇文章算法面试:栈实现队列的…

Uber如何使用go语言创建高效的查询服务

在2015年初我们创建了一个微服务,它只做一件事(也确实做得很好)就是地理围栏查询。一年后它成了Uber高频查询(QPS)服务,本次要讲的故事就是我们为什么创建这个服务,以及编程语言新秀Go如何帮我们…

centos7:塔建pure_ftpd虚拟用户

2019独角兽企业重金招聘Python工程师标准>>> 1.下载pure_ftpd,上传服务器,目录路径:/usr/local/src/ 下载地址:https://pan.baidu.com/s/1kWe8FAn 2.安装pure_ftpd cd /usr/local/srctar -xjf pure-ftpd-1.0.36.tar.bz2cd pure-ftpd-1.0.36./configure -…

寒武纪芯片——有自己的SDK,支持tf、caffe、MXNet

寒武纪芯片产品中心>智能处理器IP智能处理器IP MLU智能芯片 软件开发环境 Cambricon-1A 高性能硬件架构及软件支持兼容Caffe、Tensorflow、MXnet等主流AI开发平台,已多次成功流片 国际上首个成功商用的深度学习处理器IP产品,可广泛应用于计算机视觉、…

基于百度语音识别API的Python语音识别小程序

一、功能概述 实现语音为文字,可以扩展到多种场景进行工作,这里只实现其基本的语言接收及转换功能。 在语言录入时,根据语言内容的多少与停顿时间,自动截取音频进行转换。 工作示例: 二、软件环境 操作系统&#xff1a…

spring框架结构介绍

Spring提供了一站式解决方案: 1) Spring Core spring的核心功能: IOC容器, 解决对象创建及依赖关系 2) Spring Web Spring对web模块的支持。 -->可以与struts整合,让struts的action创建交给spring -->spring mvc模式 3…

百度坐标转换API使用

http://api.map.baidu.com/geoconv/v1/?coords121.54759,29.870724&from1&to5&aksGSOaO07WkRHHiCRxxbSQVBn 前提:121.54759,29.870724 是由手机硬件或谷歌地图获取的 错误的方法一: function standard2china(lng,lat){//http://api.map.ba…

如何解决ajax跨域问题

原文:http://www.congmo.net/blog/2012/06/27/ajax-cross-domain/ 跨域问题 起 因是这样的,为了复用,减少重复开发,单独开发了一个用户权限管理系统,共其他系统获取认证与授权信息,暂且称之为A系统&#xf…

MySQL数据库是非关系_MySQL(数据库)基础知识、关系型数据库yu非关系型数据库、连接认证...

什么是数据库?数据库(Database):存储数据的仓库高效地存储和处理数据的介质(介质主要是两种:磁盘和内存)数据库系统:DBS(Database System):是一种虚拟系统,将多种内容关联起来的称呼DBS DBMS DBDBMS&…

Spring properties定义bean

2019独角兽企业重金招聘Python工程师标准>>> Spring提供了丰富的标签和注解来进行bean的定义,除此之外框架来提供了扩展机制让使用可以通过properties来定义bean,与强大的标签式和注解式的bean定义相比,properties提供的规则要简单…

mongodb java 单例_Java单例MongoDB工具类

我经常对MongoDB进行一些基础操作,将这些常用操作合并到一个工具类中,方便自己开发使用。没用Spring Data、Morphia等框架是为了减少学习、维护成本,另外自己直接JDBC方式的话可以更灵活,为自己以后的积累留一个脚印。Java驱动版本…

Oracle中执行存储过程call和exec区别

在sqlplus中这两种方法都可以使用: exec pro_name(参数1..); call pro_name(参数1..); 区别: 1. 但是exec是sqlplus命令,只能在sqlplus中使用;call为SQL命令,没有限制. 2. 存储过程没有参数时,exec可以直接跟过…

每秒处理10万订单乐视集团支付架构

原文:http://www.iteye.com/news/31550 ----------- 随着乐视硬件抢购的不断升级,乐视集团支付面临的请求压力百倍乃至千倍的暴增。作为商品购买的最后一环,保证用户快速稳定的完成支付尤为重要。所以在15年11月,我们对整个支付…

X--名称空间详解

转自:http://blog.csdn.net/lisenyang/article/details/18312039 X名称空间里面的成员(如X:Name,X:Class)都是写给XAML编译器看的、用来引导XAML代码将XAML代码编译为CLR代码。 4.1X名称空间里面到底都有些什么? x名称空间映射的是:http://schemas.microsoft.com/wi…

事物 php,什么是php事务

事务:用于保证数据的一致性,他由一组相关的dml语句组成,改组的dml语句要么全部成功,要么全部失败。当前版本的插件并不是事务安全的,因为他并没有识别全部的事务操作。SQL 事务单元是在单一服务器中运行的。插件并不能…

Flask form(登录,注册)

用户登录 from flask import Flask, render_template, request, redirect from wtforms import Form from wtforms.fields import core from wtforms.fields import html5 from wtforms.fields import simple from wtforms import validators from wtforms import widgetsapp …