Javascript的原型链图

90%的前端或者js程序员或者老师们对Javascript懂得不比这个多

给手机看的

但是这个图里的所有褐色单向箭头链就是Javascript的原型链（颜色标注对理解js原型链很关键）

这图中的各个__proto__ constructor .prototype 都是内部对象 这样画是为了简洁

举个例子 如果考虑__proto__ 作为内部对象 上图变为

原型链就是


constructor 和 prototype如果作为内部对象 放到相应的位置 图就变大麻团了 保证晕倒什么也记不住

不服请看 这是实际的Javascript原型链图 嘿嘿

原型链大部分时候是不可见的（__proto__在firefox nodejs中可见）那么图退化为

上几图三特点

1.所有对象都在原型链上

2.除了null 每个对象都有且唯一的__proto__原型对象

3.除了null, Object.prototype,其它对象的原型对象虽然不可通过.__proto__操作访问 但是通过原型链上某个构造器（函数）的prototype属性都可以访问到

js coder大多时候要面对的是

优雅了吧 ：-（）

所有javascript重度编码都是操作上面这个图的元素 但是你心里至少要有下图

如果连这图都嫌弃不好记 最简单的铁三角 javascript 99%的幻化都由此来

阴影的部分不要动（当然你愿意发大招搞出个Kavascript也是个人自由 但那不是Javascript） 会破坏原型链的结构和密封性 js编程对原型链的拆改都是针对左下角的非阴影部分

考虑到__proto__ prototype constructor都是内部对象

所以实际的关系图应该是

时间： 2024-10-10 11:45:47

Javascript的原型链图的相关文章

深入浅出JavaScript之原型链&继承

Javascript语言的继承机制,它没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instance)的区分,全靠一种很奇特的"原型链"(prototype chain)模式,来实现继承. 这部分知识也是JavaScript里的核心重点之一,同时也是一个难点.我把学习笔记整理了一下,方便大家学习,同时自己也加深印象.这部分代码的细节很多,需要反复推敲.那我们就开始吧. 小试身手 原型链

javascript中原型链与instanceof 原理

instanceof:用来判断实例是否是属于某个对象,这个判断依据是什么呢? 首先,了解一下javascript中的原型继承的基础知识: javascript中的对象都有一个__proto__属性,这个是对象的隐式原型,指向该对象的原型对象.显式的原型对象使用prototype,但是Object.prototype.__proto__=null; 判断某个对象a是否属于某个类A的实例,可以通过搜索原型链. //继承机制 function A(){ } A.prototype.name='licu

javascript教程系列49:javaScript教程:原型链不可变

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> <!--如图释义,创造个 (妻子)Person--> function Person(){ } <!--实例对象p1(前任

JavaScript函数原型链知识记录

1 构造函数 构造函数是专门用于创建对象的 function Person(myName, myAge) { // let obj = new Object(); // 系统自动添加的 // let this = obj; // 系统自动添加的 this.name = myName; this.age = myAge; this.say = function () { console.log("hello world"); } // return this; // 系统自动添加的 }

javascript(5)原型链（Evernote）

1.简单的原型链: var song= function(){ this.a =5; this.b=6; } //function song (){ this.a=5; } song.prototype={ add:function(a,b){return a+b+this.a+this.b;}, jian:function(a,b){return b-a;} } var jum= function(){ this.name="WTF"; } jum.prototype=new son

javascript中原型链存在的问题

我们知道使用原型链实现继承是一个goodway:)看个原型链继承的例子. function A () { this.abc = 44; } A.prototype.getAbc = function (){ return this.abc; }; function B() { } B.prototype = new A(); // B通过A的实例完成了继承,形成了原型链(B的原型就是A的实例) var b = new B(); b.getAbc(); 关系如下:b(实例) ->B.prototy

理解Javascript的原型链

要理解原型链,首先要清楚理解以下几点: 1.所有函数都事Function的实例化,都包含prototype属性,即原型对象. 2.所有对象都有__proto__属性,该属性指向对象构造函数的prototype原型对象. 3.prototype原型对象的constructor属性指向它所在的构造函数,即构造函数本身. 4.prototype是针对函数说的,__proto__是针对对象说的. 5.函数本身也是对象. 认识到以上几点,我们先看一下原型链: function setName() { th

JavaScript中原型链的那些事

引言 在面向对象的语言中继承是非常重要的概念,许多面向对象语言都支持两种继承方式:接口继承和实现继承.接口继承制只继承方法签名,而实现继承继承实际的方法.在ECMAScript中函数没有签名,所以ECMAScript无法实现接口继承,只能实现实现继承.那么是怎么实现实现继承的呢??这就要说一说JS中的原型链了. 原型链的定义 什么是原型链?这个问题很简单,其基本思想就是利用原型让一个引用类型继承另一个引用类型的属性和方法. 我们先来回顾一下构造函数,原型,实例之间的关系.每一个构造函数都有一个原

[javascript]js原型链以及原型链继承

基础的三个要素: 函数 ,函数实例,实例原型. 实例原型相当于 父类, 函数相当于构造函数 举例: class Fn extends Fn.prototype{ } 实例: let f = new Fn(); Fn不能直接加方法或者属性,只能通过Fn.prototype f可以动态添加属性或者方法.如果f添加属性与Fn.prototype里面的一致,则会保留两份,例如下面:Kevin不管你是否"覆盖",它都存在. function Person() { } Person.prototy