身为前端开发者的一员，或多或少都听过原型这个概念，它是javascript这门技术中一个比较难理解的概念，其中涉及到的属性也比较多，往往让人难以分清，例如“prototype、constructor、_proto_”等，和很多猿兄一样在刚接触这一门编程语言时，看到原型概念时我也是一脸懵逼了好久，不能理解，更不会应用，但是这确实是javascript这门语言中的基础，理解以后在回想其实并不会觉得难，以下内容让我们一起来探讨一下何为原型，何为继承。
对象：
为了更好的理解原型和原型链必须先从对象开始讲。在JS中一切借对象，但是对象之间也有区别，可以分为普通对象和函数对象。
普通对象：
没有prototype属性，但是如果是原型对象的话，内部的constructor属性用来指向这个创建了该原型对象的构造函数本身。除此之外，在创建每一个对象时都会有一个”[[prototype]]”内部属性，来指向它所对应的构造函数的原型对象，因为内部属性无法直接访问，但是我相信大家一定见过不止一次”_proto_”这个属性吧，这是一个非标准的属性，这里暂且不涉及使用Object.getPrototypeOf()方法来返回原型，只是想说明在chrome或firefox浏览器中，_proto_这个我们常见的属性就可以当作”[[prototype]]”这个内部属性。这里说明一点，虽然null也被归属于对象但是它并没有_proto_，这是一个历史遗留问题，这里不做展开。
函数对象：
凡是通过new Function()创建的对象都是函数对象，其实都是普通对象。每个函数对象都有一个prototype属性，用来指向该函数对应的原型对象。
构造函数：
已经将对象说明了一遍，大家应该可以分清楚普通对象和函数对象了，接下来再看一个构造函数的例子，以此来加深对几个属性作用的印象，顺便可以复习一下构造函数。
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.sayName = function() {
alert(this.name)
}
}
var person1 = new Person('Zaxlct', 28, 'Software Engineer');
var person2 = new Person('Mick', 23, 'Doctor');
上面的例子呢person1,person2都是Person的实例，Person是它两的构造函数， 这两个实例中都有一个constructor属性，用来指向Person。这两个实例还有_proto_属性指向Person的prototype原型对象。
原型对象：
终于到重头戏了，现在配合上面的内容在来理一遍理论性的定义会容易理解一些。当我们在定义一个对象时（包括函数对象），对象中都会有一些预定义的属性。例如每个函数对象都有一个prototype属性，用来指向函数的原型对象。
原型对象中又有constructor属性指向对应的函数。原型的作用就是实现对象的继承。在所有的javascript对象中都存在一个_proto_属性，该属性用来指向实例对象的构造函数的原型对象。还是配合上面的例子：
person1._proto_ === Person.prototype; //true
Person.prototype.constructor === Person; //true
从这个例子可以看出_proto_属性指向的就是构造函数的原型,原型对象中constructor属性指向的就是构造函数本身。
说了这么多其实原型就是一个普通对象，可以看作是构造函数的一个实例，但是Function.prototype除外，它是函数对象，比较特殊，并没有prototype属性，Function.prototype返回的也是函数并不是对象。为什么呢，我们可以来看一下：
var a = new Function(); Function.prototype = a;
我们上文提到的使用new Function()创建的对象是一个函数对象，并不是普通对象，所以Function.prototype是一个函数对象。
接下来我们看一下原型是如何实现继承的，还是用一个例子来讲解：
var Person = function(name){ this.name = name; };
Person.prototype.getName = function(){ return this.name; }
var person1 = new Person('Mick');
person1.getName(); //Mick
很明显可以看出，person1实例继承了Person这个构造函数所对应的原型对象中的getName属性。至于具体是如何实现的继承，我们继续往下看原型链的知识。
原型链：
何为原型链？简单来说我们访问一个对象的属性或者方法时，如果在当前对象中不存在，就会去_proto_指向的原型对象里面找，如果还没有，原型对象也有_proto_属性指向另外的原型对象，一级一级的找下去，这就是所谓的原型链，如果到了原型链的顶端还没有找到该属性或方法就返回undefined。
例如我们上文继承的例子原型链的顺序是：person1 ➡️ person1._proto_ ➡️ Person.prototype ➡️ Person.prototype._proto_ ➡️ Object.prototype ➡️ Object.prototype._proto_ ➡️ null
总结：
说了很多了，最后来总结一下，其实原型目前带给我平时最实用的就是可以用原型来创建对象的属性和方法，尤其是给构造函数定义方法或者属性最好是在原型上来定义，这样的好处显而易见，通过该构造函数创建的所有实例对象都将拥有这些属性和方法，可以大大节省内存，也省的重复定义一样的方法或属性，提高工作效率。如果给对象添加了同名的属性或方法时，也不会有任何影响，调用此类属性或方法时，优先调用本身的属性或方法，如果本身的同名属性或方法被删除了才会调用原型中的属性或方法，优先级一目了然，公共属性或方法和私有的属性或方法互不影响。
注：还是那句话如有说的不对的地方，欢迎各位兄台指教。
网友评论