一、原型的介紹

??原型是JavaScript中function物件的一個屬性，它定義了建構式制造出的物件的公共祖先，通過該建構式產生的物件，可以繼承該原型的屬性和方法，原型也是物件，

二、原型的使用

prototype

??JavaScript中每一個函式都有一個屬性：prototype，這個屬性是在函式生成后系統自帶的屬性，并且每個物件都可以獲取到原型中的屬性，

<script type="text/javascript">
	function Student(){
		
	}
	var stu = new Student();
	Student.prototype.name = 'Jerry';/*如果prototype中沒有這個屬性，在這個陳述句后也會生成相應屬性*/
	console.log(stu.name);/*輸出Jerry*/
</script>

??同樣的，不僅僅是屬性，方法也是可以繼承的：

<script type="text/javascript">
	function Student(){
		
	}
	var stu = new Student();
	Student.prototype.sayHello = function (){
		console.log('hello');
	};
	stu.sayHello();/*呼叫方法后輸出hello*/
</script>

??但是如果當我們在建構式中擁有和原型一樣的屬性或者方法的時候，會優先使用建構式的屬性和方法：

<script type="text/javascript">
	function Student(name, age, sex){
		this.name = name;
		this.age = age;
		this.sex = sex;
		this.sayHello = function (){
			console.log("hello I'm", name);
		}
	}
	var stu = new Student('Tom', 18, 'male');
	Student.prototype.sayHello = function (){
		console.log('hello');
	};
	stu.sayHello();/*呼叫sayHello方法*/
	console.log(stu.name);/*輸出名字*/
</script>

運行結果如下：

??利用原型的這個特征，我們就可以把一些物件的共有屬性提取出來：

<script type="text/javascript">
	Student.prototype.school = '清華大學';
	Student.prototype.country = '中國';
	function Student(name, age, sex){
		this.name = name;
		this.age = age;
		this.sex = sex;
	}
	var stu1 = new Student('Tom', 18, 'male');
	var stu2 = new Student('Jerry', 20, 'female');
	console.log(stu1.school, stu1.country, stu1.name, stu1.age, stu1.sex);
	console.log(stu2.school, stu2.country, stu2.name, stu2.age, stu2.sex);
</script>

運行結果：

??設定共有屬性還有一種更簡便的方法：

Student.prototype = {
	school : '清華大學',
	country : '中國'
}

??效果和上述代碼一樣，

constructor

??在原型的使用中，我們還會遇到一個屬性，constructor，它是用于查看物件的構造器的屬性，并且這個屬性也是系統自帶的，我們也可以對其進行修改：

<script type="text/javascript">
	function Student(){
	}
	var stu = new Student();
	console.log(stu.constructor);
</script>

??運行結果：

??進行修改：

<script type="text/javascript">
	function Student(){
	}
	var stu = new Student();
	stu.constructor = function Teacher(){};
	console.log(stu.constructor);
</script>

??運行結果：

proto

??在上面的運行結果截圖中，我們可以看到，物件還有一個自帶的屬性_proto_，這個屬性代表的是當前物件的構造器所指向的原型，具體使用如下：

<script type="text/javascript">
	function Country(){
		name = 'China';
	}
	function Province(){
		place = 'Fu Jian';
	}
	function City(){
		detail = 'Xia Men';
	}
	City.prototype = Province;
	Province.prototype = Country;
	var city = new City();
	var province = new Province();
	var country = new Country();
</script>

結果如下：

三、原型鏈

??每個建構式都有一個原型物件，原型物件都包含一個指向建構式的指標，而實體都包含一個指向原型物件的內部指標，那么假如我們讓原型物件等于另一個型別的實體，結果會怎樣？顯然，此時的原型物件將包含一個指向另一個原型的指標，相應地，另一個原型中也包含著一個指向另一個建構式的指標，假如另一個原型又是另一個型別的實體，那么上述關系依然成立，如此層層遞進，就構成了實體與原型的鏈條，這就是所謂的原型鏈的基本概念，
??上面是博主看到的有關于原型鏈的概念，其實原型鏈可以理解成一個構造器連接著上一層的實體，上一層的實體接著往上連接，以此類推，就形成了原型鏈，具體的示例如下：

<script type="text/javascript">
	function Grand(){
		this.getGrand = 'grand';
	}
	var grand = new Grand();
	Father.prototype = grand;
	function Father(){
		this.getFather = 'father';
	}
	var father = new Father();
	Son.prototype = father;
	function Son(){
		this.getSon = 'son';
	}
	var son = new Son();
</script>

??就好比上述代碼，就是形成了一條原型鏈，Son的原型是已經實體化的father物件，Father的原型是已經實體化的grand物件，那么實體化的son就可以呼叫Grand構造器和Father構造器中的屬性，而相反地，實體化的father就無法呼叫Son構造器中的方法或屬性，實體化的grand同理，測驗結果：

??這里我們還可以看到，每一個物件的最頂層都有一個object物件，可以說絕大多數物件都繼承自object物件，也就是原型鏈的頂端就是object物件：

??上述提到了大多數物件都會繼承于object，但是有一個例外，這里要介紹另一個創建原型的方法，object.create(原型/null);具體使用如下：

<script type="text/javascript">
	var obj = Object.create(null);
</script>

??可以很明顯地看出，這里的obj沒有任何的屬性，也就是并不繼承于object，但是obj仍然是個物件：

??最后再簡要地介紹一下有關于原型屬性的一些增加、洗掉的方法，這里主要在控制臺測驗，基礎代碼依舊如下：

<script type="text/javascript">
	function Grand(){
		this.getGrand = 'grand';
	}
	var grand = new Grand();
	Father.prototype = grand;
	function Father(){
		this.getFather = 'father';
	}
	var father = new Father();
	Son.prototype = father;
	function Son(){
		this.getSon = 'son';
	}
	var son = new Son();
</script>

??可以看出，上述代碼中并沒有name的屬性，這里在控制臺中添加一下：

??son的_proto_就增加了name的屬性并進行了賦值，洗掉的話如下：

??這里就成功地把剛剛添加的name屬性進行了洗掉，
??關于原型和原型鏈的內容這邊就簡單介紹到這里啦，如果有不對的地方希望大家幫博主指出來一下哦，蟹蟹大家！