用翻译的方式让你彻底弄明白js的原型链

198 阅读1分钟

首先prototype,constructor,__proto__的中文意思

prototype:中文意思:原型

constructor:中文意思:构造,构造者

__proto__:中文意思:原始值

其实对于英语基础好的人来说,就已经很好理解了

例子讲解分析

代码示例

function Puppy(age) {
    this.puppyAge = age;
}

构造一个函数myPuppy

const myPuppy = new Puppy(2);

开始翻译

myPuppy.__proto__===Puppy.prototype //true

翻译 myPuppy的原始值 等于 Puppy的原型 ? 很明显是正确的

Puppy.prototype.__proto__ === Object.prototype

翻译 Puppy的原型的原始值 等于 Object对象的原型 ? 很明显是正确的

因此: myPuppy.__proto__.__proto__ === Object.prototype // true

myPuppy的原始值的原始值 等于 Object对象的原型

Puppy.prototype.constructor === Puppy //true

翻译 Puppy原型的构造者就是自己本身Puppy

myPuppy.constructor === Puppy

翻译 构造函数myPuppy的构造者就是Puppy

因此 myPuppy.constructor === Puppy.prototype.constructor

翻译myPuppy 的构造器 等于 Puppy的原型的构造者 等于 Puppy本身

最后总结

myPuppy.__proto__.__proto__ === Object.prototype --> Object.prototype.__proto__ //null

这种逐步往上查找,直到为null的过程很像是链式结构,所以称其为原型链。

每天进步一点点!大佬的路上永不停歇!

代码地址

菜鸟第一次写,有理解不对的地方还请大佬多多指教!