原型、原型链等关系理解

112 阅读1分钟

原型、原型链等关系理解(抄袭别人-妖精的尾巴)

[参考地址](https://juejin.cn/post/6844903989088092174)

四个概念

1. js分为函数对象和普通对象,每个对象都有__proto__属性,但是只有函数对象才有prototype属性;
2. Object、Function都是js内置的函数,类似有Array、RegExp、Date、Boolean、Number、String;
3. 属性__proto__是一个对象,它有两个属性,constructor和__proto__;
4. 原型对象prototype有一个默认的constructor属性,用于记录实例是由哪个构造函数创建;

两个准则

1. 原型对象的constructor指向构造函数本身;
2. 实例的__proto__和原型对象指向同一个地方; image.png

image.png

增加:

 Person.prototype.constructor = Person;
 Person.__proto__ = Function.prototype;
 Function.prototype.__proto__ = Object.prototype;
 Object.prototype.__proto__  = null; //原型链到此结束

经典图分析

image.png

//从上方function Foo()开始分析这一张经典之图 
function Foo() 
let f1 = new Foo(); 
let f2 = new Foo(); 
f1.__proto__ = Foo.prototype; // 准则2 
f2.__proto__ = Foo.prototype; // 准则2 
Foo.prototype.__proto__ = Object.prototype; // 准则2 (Foo.prototype本质也是普通对象,可适用准则2) 
Object.prototype.__proto__ = null; // 原型链到此停止 
Foo.prototype.constructor = Foo; // 准则1 
Foo.__proto__ = Function.prototype; // 准则2 
Function.prototype.__proto__ = Object.prototype; // 准则2 (Function.prototype本质也是普通对象,可适用准则2) 
Object.prototype.__proto__ = null; // 原型链到此停止 // **此处注意Foo 和 Function的区别, Foo是 Function的实例** 

// 从中间 function Object()开始分析这一张经典之图 
function Object() 
let o1 = new Object(); 
let o2 = new Object(); 
o1.__proto__ = Object.prototype; // 准则2 
o2.__proto__ = Object.prototype; // 准则2 
Object.prototype.__proto__ = null; // 原型链到此停止 
Object.prototype.constructor = Object; // 准则1 
// 所有函数的__proto__ 都和 Function.prototype指向同一个地方 
Object.__proto__ = Function.prototype // 准则2 (Object本质也是函数); // 此处有点绕 
Function.prototype.__proto__ = Object.prototype; // 准则2 (Function.prototype本质也是普通对象,可适用准则2) 
Object.prototype.__proto__ = null; // 原型链到此停止 

// 从下方 function Function()开始分析这一张经典之图 
function Function() 
Function.__proto__ = Function.prototype // 准则2 
Function.prototype.constructor = Function; //准则1