javascript基礎（原型（prototype））（十七）

厚積薄發2017發表於2017-02-08
JavaScript原型

1為什麼要有原型：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			//建立一個人類的建構函式
			function Person(name , age){
				//通過this，向新物件中新增屬性
				this.name = name;
				this.age = age;
				
				//向新的物件中新增一個sayName()方法
				this.sayName = fun;
			}
			/*
			 * 在建構函式中我們為每一個物件都新增了一個sayName()方法，
			 * 	而這個方法是在建構函式中建立的，建構函式每執行一次就要建立一個新的sayName()方法
			 * 	每個物件中的sayName()方法都是不同，有幾個物件就有幾個sayName()
			 * 	但是這些函式的功能又是一摸一樣的，所以我們沒有必要創造出這麼多一摸一樣的函式
			 */
			
			/*
			 * 將函式定義到全域性作用域中 ，的確可以解決問題，但是將它定義到全域性作用域將會導致全域性作用域的名稱空間被汙染。
			 * 	同樣也導致我們程式執行不安全
			 */
			//將函式定義到建構函式的外部
			function fun(){
				console.log(this.name);
			};
			
		
			
			//建立一個Person
			var per = new Person("孫悟空",18);
			var per2 = new Person("唐僧",16);
			var per3 = new Person("玉兔精",16);
			
			//console.log(per.sayName == per2.sayName);
			per3.sayName();
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>

2.什麼是原型： 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		
			/*
			 * 原型（prototype）
			 * 	- 我們每次建立一個函式瀏覽器都會為函式新增一個屬性
			 * 		叫做prototype，這個屬性對應的是一個物件
			 * 		這個物件就是我們說的原型物件。
			 * 	- 如果以僅僅以函式的形式去呼叫函式，則原型物件沒有任何作用
			 * 	- 當以建構函式的形式呼叫函式時，它所建立的物件中都會有一個隱含的屬性
			 * 		執行該函式的原型物件，我們可以通過__proto__來訪問這個物件
			 * 
			 * 	- 所有的同一型別的物件他們都共享同一個原型物件，這個原型物件就相當於一個公共的區域
			 * 	- 當我們去呼叫一個物件的屬性或方法時，它會先去物件自身中尋找,
			 * 		如果找到了則直接使用，如果沒找到則去原型物件中尋找，如果原型中有則返回原型中的值
			 * 		如果原型中沒有，則去原型的原型中尋找，找到了則直接使用依次類推。。。
			 * 		注意：Object的原型的原型為null，所以會一直找Object的原型，
			 * 			如果他裡面依然沒有，則返回undefined
			 * 	- 我們可以將物件中共有的屬性或方法統一新增到原型中，
			 * 		這樣我們不用新增多個重複的屬性或方法，也不會汙染全域性作用域
			 */
			
			function MyClass(){
				
			}
			
			//向函式的原型物件中新增一個屬性
			MyClass.prototype.hello = "你好";
			
			MyClass.prototype.fun = function(){
				alert("我是原型中的fun");
			};
			
			//建立MyClass的例項
			var mc = new MyClass();
			var mc2 = new MyClass();
			var mc3 = new MyClass();
			
			mc.hello = "mc的你好";
			
			//console.log(mc3.__proto__ == MyClass.prototype)
			
			//console.log(mc2.hello);
			
			//mc2.fun();
			
			//建立一個人類的建構函式
			function Person(name , age){
				//通過this，向新物件中新增屬性
				this.name = name;
				this.age = age;
			}
			
			//向Person的原型中新增sayName()
			Person.prototype.sayName = function(){
				console.log(this.name);
			};
			
			var per = new Person("孫悟空",18);
			var per2 = new Person("唐僧",16);
			var per3 = new Person("玉兔精",16);
			
			per3.sayName();
			
			
		</script>
	</head>
	<body>
	</body>
</html>


3.怎麼使用原型： 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			//建立一個人類的建構函式
			function Person(name , age){
				//通過this，向新物件中新增屬性
				this.name = name;
				this.age = age;
			}
			
			//向Person的原型中新增sayName()
			Person.prototype.sayName = function(){
				console.log(this.name);
			};
			
			//建立一個Person的例項
			var per = new Person("孫悟空",18);
			
			//當我們列印一個物件時，控制檯往往會輸出 [object Object]
			//此時實際上輸出的內容是物件的toString()方法的返回值
			var str = per.toString();
			//console.log(str);
			
			//檢查per中是否有toString
			//如果屬性在物件的原型中，使用in也會返回true
			//console.log("toString" in per);
			
			//console.log(per.hasOwnProperty("toString")) ;
			
			//console.log(per.__proto__.__proto__.hasOwnProperty("toString"));
			
			//console.log(Object.prototype.__proto__);
			
			//修改per的toString()
			/*per.toString = function(){
				//return "我是一個可愛的Person" ;
				return "Person[name = "+this.name+" ，age = "+this.age+"]";
			};*/
			
			//修改Person原型的toString
			Person.prototype.toString = function(){
				//return "我是一個可愛的Person" ;
				return "Person[name = "+this.name+" ，age = "+this.age+"]";
			};
			
			var per2 = new Person("白骨精",16);
			
			console.log(per);
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>





相關文章