三张图较为好理解JavaScript的原型对象与原型链
最近从网上看到别人详细得讲解了js的原型对象和原型链,看完感觉是看得最清晰的一个,于是,摘录到自己博客里
对于新人来说,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/yuwenjing0727/p/9914149.html
三张图较为好理解JavaScript的原型对象与原型链相关推荐
- 三张图助您掌握OTN分层结构
OTN(Optical Transport Network,光传送网)是一个层次化网络,业务信号在不同层次之间进行传输. 根据ITU-T国际电信联盟规定,OTN分为7层结构: 客户信号层:指OTN网络 ...
- 【笔记】三张图读懂机器学习:基本概念、五大流派与九种常见算法
文章目录 [笔记]三张图读懂机器学习:基本概念.五大流派与九种常见算法 Chapter 1: A look at Machine learning 1.What is it? 2.How does m ...
- 三张图看微软业务:Office是最大收入来源
作为上市公司,除了应该披露的信息以外微软(32.79, -0.85, -2.52%)并不喜欢透露太多其他信息.但今天微软似乎比较慷慨地贡献了下面三张图: 第一图反映的是客户分布情况.从图中可见,微软5 ...
- 解释次贷危机的三张图
最近学校的@b服务用完了,用@a怎么着都登不上csdn,郁闷,这三张图很早就想发的,蛮有意思的.
- JavaScript 原型对象和原型链理解
一个例子让你彻底明白原型对象和原型链 1. 之前对js中的原型链和原型对象有所了解,每当别人问我什么是原型链和原型对象时,我总是用很官方(其实自己不懂)的解释去描述.有一句话说的好:如果你不能把一个很 ...
- 【javascript】对原型对象、原型链的理解
原型对象,原型链这些知识属于基础类知识.但是平时开发过程中也很少用到. 看网上的意思,原型链用于es5开发场景下的继承.es6有了类语法糖之后,就自带继承了. 通过理解,个人画了一张原型链解构的关系图 ...
- java 原型图_一张图搞懂原型、原型对象、原型链
基本概念 在javascript中,函数可以有属性. 每个函数都有一个特殊的属性叫作原型(prototype) 每个对象拥有一个原型对象 [[Prototype]] / __proto__ / Obj ...
- javascript原型对象、原型链、构造函数
1.原型对象(原型).原型链 先放一张在网上看到的关于原型和原型链的图,非常不错. 如果你能看懂,那就对原型链有了一定了解,如果看不懂,对照下面这几点来看图: js中所有函数都有一个prototype ...
- JavaScript 原型对象和原型链
开篇 之前对js中的原型链和原型对象有所了解,每当别人问我什么是原型链和原型对象时,我总是用很官方(其实自己不懂)的解释去描述.有一句话说的好:如果你不能把一个很复杂的东西用最简单的话语描述出来,那就 ...
- Javascript中的对象和原型(一)(转载)
面向对象的语言(如Java)中有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.但是,JavaScript 没有类的概念,因此它的对象也与基于类的语言中的对象有所不同. 要了解面向对象,首 ...
最新文章
- 以太坊Geth几种同步模式
- 本机向windows服务器传输文件的三种方法
- ML:MLOps系列讲解之《CRISP-ML (Q)ML生命周期过程—了解机器学习开发的标准过程模型—业务和数据理解→数据工程(数据准备)→ML模型工程→评估ML模型→模型部署→模型监控和维护》解读
- 批量开物料账期的程序
- freemarker的测试结果框架_TestNG框架Listener介绍及测试结果的收集
- python中head_python学习笔记[headfirst]
- Golang实践录:命令行cobra库实例优化
- java中fitlter,068.Python框架Django之DRF视图集使用
- java asm源码分析_探究CAS原理(基于JAVA8源码分析)
- 循环控制-链表删除结点
- 安装docker多系统操作示列(window为例)
- HDU6130-Kolakoski
- 北京注册公司,设立有限责任公司出资协议书
- 通达信股本变迁文件(gbbq)解密方法
- https://imgsa.baidu.com/forum/pic/item/...【贴吧图床】
- Genero BDL 数据类型(1)
- 【数据库基础】01_数据库概述与MySQL语法基础
- wince下SD卡驱动开发
- iOS 驾驭 StoryBoard
- Redis主从模式下从库过期的key仍然能够被读到的解决方案
热门文章
- 数仓系列 | Flink 窗口的应用与实现
- OPPO 实时数仓揭秘:从顶层设计实现离线与实时的平滑迁移
- php 抽象工厂模式,php设计模式(五)抽象工厂模式
- mysql 语法手册_MySQL语法大全_自己整理的学习笔记
- 操作系统读写者问题实验报告_Linux操作系统存储子系统核心技术之硬盘与RAID
- php 5.6 mysql con,最新版的程序,支持PHP5.6和MYSQL5.6的环境吗
- 密码生成的思路---电脑mac地址
- 学习scrapy使用
- oracle不能插入,oracle – 在过程中截断和插入不能一起工作
- tcp连接python_python网络编程--TCP连接的三次握手(三报文握手)与四次挥手