关注公众号【前端研究所】，后台回复“0.1”，1毛钱学习网易云前端课程
之前有讲过一次JavaScript原型和原型链的内容了，但是有很多同学和李老师说不好理解，今天重新整理了一下，结合一些案例，来专门讲一下原型。
我们为什么需要原型？什么是原型？
传统构造函数存在问题
很多时候，我们都喜欢使用传统的构造函数，然后使用new的方式来创建对象，但是这种方式是又点问题的。
举个例子：
通过自定义构造函数的方式，创建小狗对象：
给大家画个图理解一下对象实例化的过程：
在使用new关键字，每次创建一个对象的时候，都会在内存开辟一个新的空间，我们从上图可以看出，每只创建的小狗有一个say方法，这个方法都是独立的，但是功能完全相同。随着创建小狗的数量增多，造成内存的浪费就更多，这就是我们需要解决的问题。
为了避免内存的浪费，我们想要的其实是下图的效果：
解决方法：
这里最好的办法就是将函数体放在构造函数之外，在构造函数中只需要引用该函数即可。
看到这里，很多小伙伴就觉得，就这样换一下函数位置就可以解决问题了，也不算很难呀，也用不上原型呀。
但是其实这样写依然存在问题：
全局变量增多，会增加引入框架命名冲突的风险
代码结构混乱，会变得难以维护
在这样看，想解决上面的问题，就需要用到构造函数的原型概念了
原型的概念
prototype：原型。每个构造函数在创建出来的时候系统会自动给这个构造函数创建
并且关联一个空的对象。这个空的对象，就叫做原型。
关键点理解：
每一个由构造函数创建出来的对象，都会默认的和构造函数的原型关联；
当使用一个方法进行属性或者方法访问的时候，会先在当前对象内查找该属性和方法，如果当前对象内未找到，就会去跟它关联的原型对象内进行查找；
也就是说，在原型中定义的方法跟属性，会被这个构造函数创建出来的对象所共享；
访问原型的方式：
构造函数名.prototype。
画个图大家好理解一点：
示例代码：
给构造函数的原型添加方法
我们可以看到，在上面的代码里，本身Dog这个构造函数中是没有say这个方法的，我们通过Dog.prototype.say的方式，在构造函数Dog的原型中创建了一个方法，实例化出来的dog1、dog2会先在自己的对象先找say方法，找不到的时候，会去他们的原型对象中查找。
画个图理解：
在构造函数的原型中可以存放所有对象共享的数据，这样可以避免多次创建对象浪费内存空间的问题。
原型的使用
1、使用对象的动态特性
使用对象的动态属性，其实就是直接使用prototype为原型添加属性或者方法。
2、直接替换原型对象
每次构造函数创建出来的时候，都会关联一个空对象，我们可以用一个对象替换掉这个空对象。
注意：
使用原型的时候，有几个注意点需要注意一下，我们通过几个案例来了解一下。
1.使用对象.属性名去获取对象属性的时候，会先在自身中进行查找，如果没有，就去原型中查找；
2.使用对象.属性名去设置对象属性的时候，只会在自身进行查找，如果有，就修改，如果没有，就添加；
注意：一般情况下，不会将属性放在原型中，只会将方法放在原型中；
3.在替换原型的时候，替换之前创建的对象，和替换之后创建的对象的原型不一致！！！
画个图理解下：
图中可以看出，实例出来的h1对象指向的原型中，只有say()方法，并没有kill()方法，所以h1.kill()会报错。同理，h2.say()也会报错。
__proto__属性
在js中以_开头的属性名为js的私有属性，以__开头的属性名为非标准属性。__proto__是一个非标准属性，最早由firefox提出来。
1、构造函数的 prototype 属性
之前我们访问构造函数原型对象的时候，使用的是prototype属性：
在之前我们是无法通过构造函数new出来的对象访问原型的：
2、实例对象的 __proto__ 属性
__proto__属性最早是火狐浏览器引入的，用以通过实例对象来访问原型，这个属性在早期是非标准的属性，有了__proto__属性，就可以通过构造函数创建出来的对象直接访问原型。
如图所示：
3、__proto__属性的用途
可以用来访问原型；
在实际开发中除非有特殊的需求，不要轻易的使用实例对象的__proto__属性去修改原型的属性或方法；
在调试过程中，可以轻易的查看原型的成员；
由于兼容性问题，不推荐使用。
constuctor属性
constructor：构造函数，原型的constructor属性指向的是和原型关联的构造函数。
示例代码：
画个图理解：
获取复杂类型的数据类型：
通过obj.constructor.name的方式，获取当前对象obj的数据类型。
在一个的函数中，有个返回值name，它表示的是当前函数的函数名；
实例化出来的teacher对象，它的数据类型是啥呢？我们可以通过实例对象teacher.__proto__，访问到它的原型对象，再通过.constructor访问它的构造函数，通过.name获取当前函数的函数名，所以就能得到当前对象的数据类型。又因为.__proto__是一个非标准的属性，而且实例出的对象继承原型对象的方法，所以直接可以写成：obj.constructor.name。
其实JavaScript原型的运用更多是在面向对象编程的继承上，那在继承的时候我们具体要怎么使用呢？我们下次继续讲解！
网友评论