JavaScript中原型对象

---

---

一、什么是原型

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

1.1 函数的原型对象

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

​ 看下面的代码：

<script type="text/javascript">
    	/*
    		声明一个函数，则这个函数默认会有一个属性叫 prototype 。而且浏览器会自动按照一定的规则
    		创建一个对象，这个对象就是这个函数的原型对象，prototype属性指向这个原型对象。这个原型对象
    		有一个属性叫constructor 执行了这个函数
			
			注意：原型对象默认只有属性：constructor。其他都是从Object继承而来，暂且不用考虑。
		*/
	    function Person () {
	    	
	    }	    
    </script>

声明一个函数之后

1.2 使用构造函数创建对象

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

​ 看下面的代码：

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

说明：

1. 从上面的图示中可以看到，创建p1对象虽然使用的是Person构造函数，但是对象创建出来之后，这个p1对象其实已经与Person构造函数没有任何关系了，p1对象的[[ prototype ]]属性指向的是Person构造函数的原型对象。
2. 如果使用new Person()创建多个对象，则多个对象都会同时指向Person构造函数的原型对象。
3. 如果使用new Person()创建多个对象，则多个对象都会同时指向Person构造函数的原型对象。
4. 如果我们访问p1中的一个属性name，如果在p1对象中找到，则直接返回。如果p1对象中没有找到，则直接去p1对象的[[prototype]]属性指向的原型对象中查找，如果查找到则返回。(如果原型中也没有找到，则继续向上找原型的原型—原型链。 后面再讲)。
5. 如果我们访问p1中的一个属性name，如果在p1对象中找到，则直接返回。如果p1对象中没有找到，则直接去p1对象的[[prototype]]属性指向的原型对象中查找，如果查找到则返回。(如果原型中也没有找到，则继续向上找原型的原型—原型链。 后面再讲)。
6. 如果我们访问p1中的一个属性name，如果在p1对象中找到，则直接返回。如果p1对象中没有找到，则直接去p1对象的[[prototype]]属性指向的原型对象中查找，如果查找到则返回。(如果原型中也没有找到，则继续向上找原型的原型—原型链。 后面再讲)。

<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>

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

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>