【JS基础整理—No.08】原型--原型链--原型继承

👸🏾写在前面：

关于原型的概念，一开始的接触js的时候完全不知所云，一堆专业名词的解释，箭头指来指去越看越晕。当时我只知道这个东西很重要很重要，然后就是好难好难。但是不要担心，其实很简单的！相信我！现在绕不明白只是因为它对于你来说是一个完全陌生的概念，而且缺少实际的用用场景。只要我们一直在学习，时间会帮我们解决一切问题的。

简单说一下我的学习过程：一开始看js基础课程老师都有对原型内容的介绍，这也是我第一次知道原型这两个字的概念，跟着老师学就对到了，不理解也没有关系。基本的概念学习之后就是在博客中翻看一些前辈对于这部分内容的总结整理，长篇幅的文章耐下心来去看，反复地去理解每句解释所表达的意思，把绕得我们脑壳疼的原型图读懂，如果还是不理解那就去找资料。这个阶段之后原型的学习基本完成，但是如果没有使用场景，只是停留在表面概念的理解，一段时间后这部分内容基本忘光光，还得重头来过。（我当时因为知识盲区太多去忙着学了别的，后来返回来看的时候，基本上之前学的全部喂了狗😭）所以想要把这部分内容刻在DNA里就得去用，比如手撕API是经常会用到，如果遇到了就试着自己画一个原型图去理解代码，这很重要，是量变到质变的关键过程。经历了这些，现在的我对于这部分内容可说是比较通透了。

所以说，具体的概念部分我就不再写了，前辈们的整理不要太好，文末我会放之前学习资料的链接。接下来我只是把当时的学习笔记整理一下（浓缩版），梳理自己思路的同时希望可以帮到大家少走弯路。

💙 原型

1. prototype：每个函数都有一个prototype属性，默认指向一个空对象（显式原型对象）

2. __proto__： 每个实例对象都有一个__proto__属性，该属性指向当前实例对象的原型对象（隐式原型对象）

3. 构造函数的显示原型对象===当前构造函数实例的隐式原型对象

   var obj= new Object();  //obj.__proto__ === Object.prototype

显式原型的作用：用来实现基于原型的继承与属性的共享。

隐式原型的作用：构成原型链，同样用于实现基于原型的继承。

给原型对象添加属性（方法）作用：函数的所有实例对象自动拥有原型中的属性（方法）

问：什么时候用原型？好处？

答：当定义公共的方法的时候可以放在原型对象，供所有的实例对象使用。节省内存开销。

🔵原型链

查找对象属性时，先在自身找；如果没有会沿着_ proto_ 去原型对象查找；如果到object的原型对象还没有找到，则返回undefined。原型链的终点是Null。

__ proto__ 这条链就是原型链。

var arr=[1,2,3];
arr--->Array.prototype--->Object.prototype
//--------------
Animal Cat;
Kitty--->Cat.prototype--->Animal.prototype

画个简单的图理解一下（这种图刚开始学习一定要常画）

问：区别一下原型链和作用域

答：a.b【obj.name】 找a沿作用域找，找b沿原型链找

🔷原型继承

方法：让子类的原型成为父类的实例对象（理解这一步你得先知道new操作符的功能）

Cat.prototype=new Animal();//∵会导致子类原型的构造器属性缺失

注意：校正子类的构造器属性

Cat.prototype.constructor=Cat;//∴手动添加构造器属性

画个图解释一下

 关于继承之后再介绍完Class会单独整理篇【js继承的几种实现方式】

还有这张图👇如果彻底理解了，恭喜你🎉原型的相关内容即将刻进你的DNA

🚗 学习资料：

深入理解 JavaScript 原型  (👈这个真的很棒，闲的没事抱着手机看就对了！看不懂反复看)
JavaScript中原型对象的彻底理解