也谈轻松理解JS 原型和原型链

2024-07-30 本文已影响0人呱啦哒

下面内容一定要结合上面这张图阅读

开局肯定要用这张经典的 JavaScript 原型链图，结合这张图先理解几个概念:

构造函数，简单说构造函数就是用来创建对象和函数的，顶级的构造函数是 Js 出场时自带的 Object() 和 Function()
$\color{red}{\large{记住: 所有的构造函数都由 Function()这个顶级构造函数创建， }}$
$\color{red}{\large{包括 Function它自己和 Object， Array， Number等系统自带的，}}$
$\color{red}{\large{还有诸如 Foo，User这种由coder编写的构造函数}}$
原型对象，简单说就是每个构造函数都有一个专属的原型对象，用于存放这个构造函数的共有属性和方法， Js引擎调用Function()创建构造函数时会同时调用 Object()为这个构造函数创建一个原型对象
$\color{red}{\large{记住: 所有的原型对象都由 Object() 这个顶级构造函数创建}}$
prototype，构造函数用prototype属性指向自己的原型对象
$\color{red}{\large{所以说: 只有构造函数才有 prototype 属性，因为只有构造函数才有原型对象}}$
constructor，原型对象用constructor来指向自己所依附的构造函数
$\color{red}{\large{所以说: 只有原型对象有constructor属性，因为原型}}$
$\color{red}{\large{对象是专为构造函数服务的，没有构造函数，原型对象就没有存在的意义了}}$
__proto__，也写作[[prototype]]，这个属性用来指向创建对象自己的那个构造函数的原型对象，指向的是构造函数的原型对象，而不是构造函数本身
$\color{red}{\large{所以说:不管是什么实例对象，原型对象，构造函数，它们都是被 Js 引擎创建出来的}}$
$\color{red}{\large{包括顶级构造函数 Function和 Object，它们都有\_\_proto\_\_属性}}$
(至于__proto__属性的意义，其他很多文章都有说，这里不再赘述)

关键点:

Function，所有的构造函数都由Function创建，包括 Function 它自己
Object，所有的原型对象都由Object创建
每一个构造函数都有一个专属的原型对象,它们使用prototype和constructor 互指对方

理解了上面 5 点，可以想象一下当 Js 引擎执行 function Foo() {...} 的过程可能如下:

调用 Function() 创建构造函数 Foo
调用 Object() 创建一个名为 Foo_prototype 的空对象，做为 Foo 的原型对象
执行: Foo.prototype = Foo_prototype
执行: Foo_prototype.constructor = Foo
执行: Foo.__proto__ = Function_prototype //也就是Function.prototype

下面检验一下，代码参考自"妖精的尾巴"大佬的文章: https://juejin.cn/post/6844903989088092174

function Foo() {}   //自定义构造函数 Foo， 这个构造函数本身就是由 Function() 这个顶级构造函数执行创建
let f1 = new Foo(); //f1为实例对象， 由 Foo()这个二级构造函数创建
f1.prototype === ?; //f1为实例对象，不是构造函数， 它没有原型对象 所以它也没有 prototype 属性
f1.__proto__ === ?

那么这个 f1的proto指向谁，看上面概念点 5， __proto__属性指向的是创建这个对象的构造函数的原型对象，那么 f1 这个实例对象是由 Foo()构造函数创建的，所以f1.__proto__指向的是 Foo()的原型对象，写作 Foo.prototype，所以:


f1.__proto__ === Foo.prototype;

接下来

Foo.prototype.__proto__ === ?

Foo 表示 Foo 这个构造函数， Foo.prototype 表示 Foo这个构造函数的原型对象， Foo.prototype.__proto__指向创建这个原型对象的那个构造函数所对应的原型对象，感觉有点绕，但是原型对象也是创建出来的啊，概念 2 说了，所有的原型对象都是由 Object()这个构造函数创建的，而 Object 的原型对象写作 Object.prototype，所以:

Foo.prototype.__proto__ === Object.prototype;

再来

Foo.__proto__ === ?
Function.__proto__ === ?

Foo，Function 是什么，都是构造函数，而且 Foo 这个构造函数就是由 Function创建得来的，概念 1 说了所有的构造函数都由 Function 创建，包括它自己，再次重复一下，__proto__属性指向的是创建这个对象的那个构造函数的原型对象， Function的原型对象是 Function.prototype，所以:

Foo.__proto__ === Function.prototype;
Function.__proto__ === Function.prototype;

再来

Function.prototype.__proto__ === ?

Function.prototype 是什么，是Function 这个构造函数的原型对象，原型对象由什么创建，是由 Object()这个构造函数创建， Object的原型对象写作什么，写作 Object.prototype，所以:

Function.prototype.__proto__ === Object.prototype;

下面看看 Object这边

let a1 = Object();
a1.__proto__ === ?

a1这个实例对象由 Object 创建， Object的原型对象写作 Object.prototype，所以:

a1.__proto__ === Object.prototype;

1722414050160.png

至于 Object.prototype.__proto__ === null，就不赘述了，原型对象往上找到Object.prototype这里就到顶了，没法再往上找了.

也谈轻松理解JS 原型和原型链

猜你喜欢

热点阅读