js-理解prototype、__proto__和constructor

前言

你好呀😉✌，我是你的人类朋友！

今天给大家整理一下原型与原型链的相关知识中prototype、__proto__和constructor的区别！！

本文章可以帮助各位：

• 掌握prototype、__proto__和constructor的指向问题

大家重点记住我标出来的几句话哦😁

---

内容

构造函数是什么？

function Student() {
    this.name = '你的人类朋友',
    this.age = 18
}

上面就是一个构造函数，构造函数的首字母约定大写

实例对象是什么？

let student = new Student()

new对应的构造函数出来的实例，就是对应构造函数的实例对象

请大家记住第一句话：每个函数都有一个 prototype 属性

上面所说的构造函数也是一个函数

也就是说每一个构造函数也有一个prototype属性咯。答案是肯定的，让我们打印看看。

function Student() {
    this.name = '你的人类朋友',
    this.age = 18
}
console.log(Student.prototype) // {constructor: ƒ}

我们确实打印出东西了

请大家记住第二句话：每一个对象（除了null）都有__proto__属性

我们上面说的实例对象，不也是一个对象吗？那也就是说任何一个实例对象都会有一个属性名字叫做__proto__吗？答案是肯定的

function Student() {
    this.name = '你的人类朋友',
    this.age = 18
}

let student = new Student()

console.log(student.__proto__) // {constructor: ƒ}

请大家记住第三句话：实例对象的__proto__属性指向的内容与其对应构造函数的prototype属性所指向的内容一致

我们首先用代码来验证这第三句话

function Student() {
    this.name = '你的人类朋友',
    this.age = 18
}

let student = new Student()

console.log(Student.prototype === student.__proto__) // true

下面的内容帮助大家理解这一句话，大家不要被这句话吓到了!

以我们上面的Student和实例对象student为例，让我们来捋一捋：

• Student是一个构造函数，我们知道每一个函数都会有一个prototype属性。
• student是一个实例对象，我们知道每一个对象(除了null)都会有一个属性，属性名叫做__proto__
• 第三句话所说的就是，Student的prototype属性指向了student的__proto__属性

下面我画一张图帮助大家理解

请大家记住第四句话：constructor与prototype互逆

直接上图！！

严谨起见，我们还是使用代码验证一下：

function Student() {
    this.name = '你的人类朋友',
    this.age = 18
}

console.log(Student.prototype.constructor === Student) // true

好了，现在我来总结一下上述内容，大家只要记住我强调的那四句话就好啦

1. 每个函数都有一个prototype属性
2. 每一个对象（除了null）都有__proto__属性
3. 实例对象的__proto__属性指向的内容与其对应构造函数的prototype属性所指向的内容一致
4. constructor与prototype互逆

---

结语

我是你的人类朋友😉，大家可以把上面的四点记号，指向内容应该就没问题啦。

有错误提出来我会改的，尽量别骂人啊！！！😢

下次再见咯😁😁😁！！