Javascript原型与原型链,原型链继承的前奏。看了一整天,总算明白了

206 阅读3分钟

首先的首先, 原型也就是 原型对象,它是一个对象

首先,先看几个关键词

prototype:指向函数的 原型对象, 只有函数拥有(非人为添加情况下)

__proto__:每个对象都有,指向 创建了该对象的构造函数的原型对象

constructor:指向原型对象的 构造函数

先创建一个函数 Cat

function Cat(name, color) {
    this.name = name
    this.color = color
}

在我们用 function 声明出 Cat之后,会自动创建两个东西,一个是 Cat函数的声明(暂且如此称呼,内容打印如下),另一个就是 Cat的原型对象

image.png

image.png

由此我们可以看出, Cat 的原型对象 Cat.prototype其实是包含 Cat 的声明内容的,所以,当我们用 function Cat()... 语句声明出来 Cat 之后,最重要的成果便是 Cat原型对象Cat.prototype

image.png

Cat 的原型对象的 contructor 属性指向Cat本身,也就是说 Cat就是 Cat的构造函数本身

接下来,我们深入讨论一下 Cat

image.png

Cat 是使用 function声明的,所以 CatFunction 的实例,也就是说,它是一个对象,JS中万物皆对象,所 Cat 也是 Object 的实例也很好理解,至于 FunctionObject 互为对方的实例,其原因在这里就不讨论了。

至此,我们可以知道,通过 function声明的 函数对象和一般的 对象 是不同的, 其不同点在于,他拥有自己的原型对象,即 prototype 属性所指向的对象

接下来, 我们继续探讨, 对 Cat 构造函数使用 new 会有哪些知识点

先看一个 new 的基本原理

// new 基本原理
// new命令的作用,就是执行一个构造函数,并且返回一个对象实例
// 执行过程如下
1. 创建一个空对象,作为将要返回的对象实例
2. 将空对象的__protype__属性指向了构造函数的 prototype 属性
3. 将空对象赋值给构造函数内部的this关键字
4. 开始执行构造函数内部的代码

这里的 构造函数Cat

image.png

现在我们再次理解这句话

image.png

最后,我们再对比着看,prototype __proto__ contructor 三个属性的区别和联系

image.png

Cat.prototype 作为 Cat的原型对象而存在,也作为 cat的构造函数的原型对象 而存在, 它是一个独立存在的对象; Cat它本身 便是构造函数,也是一个由 Function构造函数所创建的函数实例对象, 参照如下

image.png

据此, 可以理解, 函数对象Function 构造函数的实例, 可由 function 创建; 函数对象一般对象的差别在于 函数对象, 会天然的拥有 prototype属性, 也就是天然的拥有属于它自己的 原型对象, 也就是所说的 函数的原型

至于 原型链,在 原型链继承 的内容中探讨会使其更加清晰,原型链继承的知识,明天继续学习

参考的文章有如下,但不限于如下,对作者们表示感谢

juejin.cn/post/684490… # JavaScript 中的构造函数

juejin.cn/post/693449… # 面不面试的,你都得懂原型和原型链

juejin.cn/post/684490… # js:面向对象编程,带你认识封装、继承和多态

juejin.cn/post/693985… # 终于懂了原型链!