js原型的理解

好多刚入门的程序员，都对这个原型的理解，模模糊糊，还有就是再面试的时候 ，面试官也总是再问谈谈你对原型或者原型链的理解，再网上找了很多资料，觉得这个写的很是通俗易懂（地址），所以就拿来给大家分享一下

一，什么是原型

原型是Javascript中的继承的基础，JavaScript的继承就是基于原型的继承。

1.1原型解释的时候 先理解构造函数和原型对象

声明一个函数（也就是文中所说的构造函数），则这个函数默认会有一个属性叫 prototype 。而且浏览器会自动按照一定的规则
创建一个对象，这个对象就是这个函数的原型对象，prototype属性指向这个原型对象。这个原型对象
有一个属性叫constructor 执行了这个函数(此时的constructor指向声明的这个函数)

 <script type="text/javascript">
function gets() {
	    	//我就是构造函数 我有一个属性叫prototype 并且指向了浏览器创建的对象（原型对象）
	    }	 
 <script/>

二，使用构造函数创建对象

我们的构造函数使用new来创建对象的时候，就像下面这样：

 <script type="text/javascript">
function gets() {
	    	
	    }	 
 let z1 = new gets();
 <script/>

此时，z1就是那个构造函数gets创建出来的对象，这个z1对象中是没有prototype属性的，prototype属性只有在构造函数gets中有，请看图！

可以看出，构造函数gets中有prototype属性，指向的是gets对应的原型对象；而z1是构造函数gets创建出来的对象，他不存在prototype属性，所以在调用prototype的时候的结构是undefined，但z1有一个__proto__属性，z1调用这个属性可以直接访问到构造函数gets的原型对象（也就是说，z1的__proto__属性指向的是构造函数的原型对象）

说明（引用前面提到的文章的内容，因为很重要）：

• 从上面的代码中可以看到，创建z1对象虽然使用的是gets构造函数，但是对象创建出来之后，这个stu对象其实已经与gets构造函数没有任何关系了，z1对象的__proto__属性指向的是students构造函数的原型对象。
• 如果使用new gets()创建多个对象z2、z3、z4，则多个对象都会同时指向gets构造函数的原型对象。
• 我们可以手动给这个原型对象添加属性和方法，那么z2,z3,z4…这些对象就会共享这些在原型中添加的属性和方法。
• 如果我们访问z1中的一个属性name，如果在z1对象中找到，则直接返回。如果z1对象中没有找到，则直接去z1对象的__proto__属性指向的原型对象中查找，如果查找到则返回。(如果原型中也没有找到，则继续向上找原型的原型—原型链)。
• 如果通过z1对象添加了一个属性name，则z1对象来说就屏蔽了原型中的属性name。换句话说：在z1中就没有办法访问到原型的属性name了。
• 通过z1对象只能读取原型中的属性name的值，而不能修改原型中的属性name的值。 z1.name =
  “李四”;并不是修改了原型中的值，而是在z1对象中给添加了一个属性name。

<script type="text/javascript">
       function gets() {
			
		}
		// 可以使用gets.prototype 直接访问到原型对象
		//给gets函数的原型对象中添加一个属性 name并且值是 "张三"
		gets.prototype.name = "张三";
		gets.prototype.age = 20;

		var z1 = new gets();
		/*
		    访问z1对象的属性name，虽然在z1对象中我们并没有明确的添加属性name，但是
		    z1的__proto__属性指向的原型中有name属性，所以这个地方可以访问到属性name
		    就值。
		    注意：这个时候不能通过z1对象删除name属性，因为只能删除在z1中删除的对象。
		*/
		alert(z1.name); // 张三

		var z2 = new gets();
		alert(z2.name); // 张三  都是从原型中找到的，所以一样。

		alert(z1.name === z2.name); // true

		// 由于不能修改原型中的值，则这种方法就直接在z1中添加了一个新的属性name，然后在z1中无法再访问到
		//原型中的属性。
		z1.name = "李四";
		alert(z1.name); //李四
		// 由于z2中没有name属性，则对z2来说仍然是访问的原型中的属性。    
		alert(z2.name); // 张三
    </script>

三、与原型有关的几个方法

1. prototype属性

prototype 存在于构造函数中 (其实任意函数中都有，只是不是构造函数的时候prototype我们不关注而已) ，他指向了这个构造函数的原型对象。

2.constructor属性

constructor属性存在于原型对象中，他指向了构造函数
看下边代码

<script type="text/javascript">
    function gets() {
    }
    alert(gets.prototype.constructor === gets); // true
</script>

我们根据需要，可以gets.prototype
属性指定新的对象，来作为gets的原型对象。但是这个时候有个问题，新的对象的constructor属性则不再指向students构造函数了。

看代码

<script type="text/javascript">
	function gets() {
		
	}
	//直接给Person的原型指定对象字面量。则这个对象的constructor属性不再指向Person函数
	gets.prototype = {
		name:"志玲",
		age:20
	};
	var z1 = new gets();
	alert(z1 .name);  // 志玲
     //使用instanceof 操作符可以判断一个对象的类型。  
  	//typeof一般用来获取简单类型和函数。而引用类型一般使用instanceof，因为引用类型用typeof 总是返回object。
	alert(z1 instanceof gets); // true
	alert(gets.prototype.constructor === gets); //false
  	//如果constructor对你很重要，你应该在gets.prototype中添加一行这样的代码：
  	/*
  	gets.prototype = {
      	constructor : gets	//让constructor重新指向gets函数
  	}
  	*/
</script>

3.proto 属性(注意：左右各是2个下划线)

​ 用构造方法创建一个新的对象之后，这个对象中默认会有一个属性__proto__, 这个属性就指向了构造方法的原型对象。