2022年了，你还不会原型链，是不是out了？

前言：

---

有的小伙伴，要到面试了，急匆匆的来网上看，又不知道谁对谁错，急急忙忙的就把被人的笔记原封不动的拿去了，到面试的时候，感觉自己回答的还不错，结果都不知道回答的是错误的。在这里我告诫大家，我们不要为了面试而去背题，匆匆忙忙的，不仅学不进去，背完了几天后马上会忘记

 

 有的人又要说了：‘这不是要找工作，没办法嘛！’ 其实我是想说，学习是平常时间的一个积累，而不是投机弄巧，是一个厚积薄发的过程。

下面为大家简单阐述我对原型和原型链的理解，若是觉得有说的不对的地方，还望直接把页面关闭了！

---

原型五个规则：

规则一：

1. 所有的引用类型(数组, 对象, 函数), 都具有对象的特性, 可以自由扩展特性

const obj = {}  // obj.a = 100
const arr = {}  // arr.a = 100
function fn() { }  // fn.a = 100

---

 

规则二：

2. 所有的对象， 都有一个__proto__属性, 属性值是一个普通的对象 (__proto__  ==> [[prototype]])

console.log(obj.__proto__)
console.log(arr.__proto__)
console.log(fn.__proto__)
// __proto__ 也叫作隐式原型

---

 

规则三：

3. 所有的函数, 都有一个prototype属性, 属性值也是一个普通的对象 ===>(原型对象)

console.log(fn.prototype)  // prototype 显示原型

---

 

规则四：

4.所有对象的隐式原型,指向它的构造函数的显示原型(理解为等于)

function Person(name, age) {
    this.name = name
    this.age = age
}
const p = new Person('彪哥', 18)
console.log(p.__proto__ === Person.prototype);

---

 

 规则五：

5.当试图得到一个对象的某个属性时,如果这个对象没有这个属性,就会去它的__proto__去找

---

__proto__隐式原型

1.所有的对象都有__proto__(隐式原型)，属性值是一个对象(原型对象)

 2.所有对象的__proto__(隐式原型)指向它的构造函数的prototype(显示原型)

 3.因为函数也是属于对象的，所以函数也有__proto__属性

 function Star(name, age) {
            this.name = name
            this.age = age
        }
        Star.prototype.sing = function () {
            console.log('唱跳')
        }
        const bg = new Star('彪哥')
        console.log(bg)

   console.dir(Star)
        console.log(bg.__proto__ === Star.prototype)

__proto__的作用:

它相当于一个桥梁,实列通过__proto__就可以访问到他的原型对象

---

constructor属性：

每个原型（对象）都有一个constructor属性 ，指回构造函数本身

constructor在哪里：

1.bg.__proto__ ===>找到原型

2.Star.prototype ===>找到原型

这个属性就在原型上(对象上)

---

原型链：

 每个对象通过__proto__属性都能访问到它的原型链,原型对象也有它的原型对象

  当访问一个对象的属性和方法时,先在自生中寻找

   如果没有 ，就会沿着__proto__这条链，向上寻找。一直找到顶层object.prototype为止

 

       Object.prototype.__proto__ === null

---

 

数组的原型链：

 const arr = [1, 2, 3] //new Array()
        // 数组也是一个对象，它由Array这个构造函数创建出来的
        console.log(arr__ptoto__ === Array.prototype);
        // arr --->Array.prototype --->Object.prototype --->null

---

 

 函数的原型链：

 const fn = function () { }

        // 函数也是一个对象，它是由Function构造函数创建
        // fn-- -> Function.prototype-- -> Object.prototype-- -> null

可能到现在，有的小伙伴还不是很懂，下面我们直接上图：