一.什么是原型

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

1.1函数的原型对象

在JavaScript中，我们创建一个函数A(就是声明一个函数), 那么浏览器就会在内存中创建一个对象B，而且每个函数都默认会有一个属性 prototype 指向了这个对象( 即：prototype的属性的值是这个对象 )。这个对象B就是函数A的原型对象，简称函数的原型。

看看下面的代码

function Person () {
	    	
}

下面的图描述了声明一个函数之后发生的事情:

1.2使用构造函数创建对象

当把一个函数作为构造函数 (理论上任何函数都可以作为构造函数) 使用new创建对象的时候，那么这个对象就会存在一个默认的不可见的属性，来指向了构造函数的原型对象。这个不可见的属性我们一般用 prototype 来表示，只是这个属性没有办法直接访问到.

看下面的代码

 function Person () {
	    	
}	
/**
*利用构造函数创建一个对象，则这个对象会自动添加一个不可见的属性 [[prototype]], 而且这个属性
*指向了构造函数的原型对象。
*/
var p1 = new Person();

观察下面的示意图:

说明

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

看下面代码:

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

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

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

	   	alert(p1.name === p2.name);  // true

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

二.与原型有关的几个属性和方法

2.1 prototype属性

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

参考前面的示意图。

2.2 constructor属性

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

看下面的代码：

<script type="text/javascript">
	function Person () {
	}
	alert(Person.prototype.constructor === Person);	// true
	var p1 = new Person();
  	//使用instanceof 操作符可以判断一个对象的类型。  
  	//typeof一般用来获取简单类型和函数。而引用类型一般使用instanceof，因为引用类型用typeof 总是返回object。
	alert(p1 instanceof Person);	// true
</script>

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

看下面的代码：

<script type="text/javascript">
	function Person () {
		
	}
	//直接给Person的原型指定对象字面量。则这个对象的constructor属性不再指向Person函数
	Person.prototype = {
		name:"志玲",
		age:20
	};
	var p1 = new Person();
	alert(p1.name);  // 志玲

	alert(p1 instanceof Person); // true
	alert(Person.prototype.constructor === Person); //false
  	//如果constructor对你很重要，你应该在Person.prototype中添加一行这样的代码：
  	/*
  	Person.prototype = {
      	constructor : Person	//让constructor重新指向Person函数
  	}
  	*/
</script>

2.3 proto 属性(注意：左右各有2个下划线)

用构造方法创建一个新的对象之后，这个对象中默认会有一个不可访问的属性 [[prototype]] , 这个属性就指向了构造方法的原型对象。

但是在个别浏览器中，也提供了对这个属性[[prototype]]的访问(chrome浏览器和火狐浏览器。ie浏览器不支持)。访问方式：p1.__proto__

但是开发者尽量不要用这种方式去访问，因为操作不慎会改变这个对象的继承原型链。

<script type="text/javascript">
	function Person () {
		
	}
	//直接给Person的原型指定对象字面量。则这个对象的constructor属性不再指向Person函数
	Person.prototype = {
		constructor : Person,
		name:"志玲",
		age:20
	};
	var p1 = new Person();

	alert(p1.__proto__ === Person.prototype);	//true
	
</script>

2.4 hasOwnProperty() 方法

大家知道，我们用去访问一个对象的属性的时候，这个属性既有可能来自对象本身，也有可能来自这个对象的 [[prototype]]属性指向的原型。

那么如何判断这个对象的来源呢？

hasOwnProperty方法，可以判断一个属性是否来自对象本身。

<script type="text/javascript">
	function Person () {
		
	}
	Person.prototype.name = "志玲";
	var p1 = new Person();
	p1.sex = "女";
  	//sex属性是直接在p1属性中添加，所以是true
	alert("sex属性是对象本身的：" + p1.hasOwnProperty("sex"));
  	// name属性是在原型中添加的，所以是false
	alert("name属性是对象本身的：" + p1.hasOwnProperty("name"));
  	//  age 属性不存在，所以也是false
	alert("age属性是存在于对象本身：" + p1.hasOwnProperty("age"));
	
</script>

所以，通过hasOwnProperty这个方法可以判断一个对象是否在对象本身添加的，但是不能判断是否存在于原型中，因为有可能这个属性不存在。也即是说，在原型中的属性和不存在的属性都会返回fasle。如何判断一个属性是否存在于原型中呢？

2.5 in 操作符

in操作符用来判断一个属性是否存在于这个对象中。但是在查找这个属性时候，现在对象本身中找，如果对象找不到再去原型中找。换句话说，只要对象和原型中有一个地方存在这个属性，就返回true

<script type="text/javascript">
	function Person () {
		
	}
	Person.prototype.name = "志玲";
	var p1 = new Person();
	p1.sex = "女";
	alert("sex" in p1);		// 对象本身添加的，所以true
	alert("name" in p1);	//原型中存在，所以true
	alert("age" in p1); 	//对象和原型中都不存在，所以false
	
</script>

回到前面的问题，如果判断一个属性是否存在于原型中：如果一个属性存在，但是没有在对象本身中，则一定存在于原型中。

本文转载自：尚硅谷

JS原型对象