js prototype的理解

時間 2019-11-09

原文原文鏈接

prototype屬性可算是JavaScript與其餘面嚮對象語言的一大不一樣之處。 prototype就是「一個給類的對象添加方法的方法」，使用prototype屬性，能夠給類動態地添加方法，以便在JavaScript中實現「繼承」的效果。

具體來講，prototype 是在 IE 4 及其之後版本引入的一個針對於某一類的對象的方法，當你用prototype編寫一個類後，若是new一個新的對象，瀏覽器會自動把prototype中的內容替你附加在對象上。這樣，經過利用prototype就能夠在JavaScript中實現成員函數的定義，甚至是「繼承」的效果。

對於javascript自己而言是基於對象的，任何元素均可以當作對象。然而類型和對象是不一樣的，而咱們所講的prototype屬性便是基於類型的一種屬性。對於prototype的基本使用就如對象的建立及屬性賦值同樣的簡單。直接經過賦值操做便可完成屬性的建立。 javascript

<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>test</title>
	</head>
	<body>
		<script>
		/*
		* 關於prototype,理解這個頗有必要
		* 能夠在類型上使用proptotype來爲類型添加行爲。這些行爲只能在類型的實例上體現。
		* JS中容許的類型有Array, Boolean, Date, Enumerator, Error, Function, Number, Object, RegExp, String
		* 之後這樣分，沒有實例化的類稱爲類型，實例化的類稱爲對象實例簡稱實例
		*/

		Object.prototype.name = "zhangsan";
		Object.prototype.nihao = function(){
			alert("i can method name is "+this.name);
		}

		var obj = new Object();
		obj.nihao();
		alert(obj.name);

		//在實例上不能使用prototype，不然會發生編譯錯誤
		obj.prototype.sex = "男";//error,沒法給一個實例prototype
		var o = {
			name:"zhangsan"
		}
		o.prototype.age = 30;//error,沒法給一個實例prototype

		//能夠爲類型定義「靜態」的屬性和方法，直接在類型上調用便可
		 alert(Object.name);
		 Object.nihao();

		//實例不能調用類型的靜態屬性或方法，不然發生對象未定義的錯誤。
		 Object.class = "三年二班";//類靜態屬性
		 var ob = new Object();
		 alert(ob.class); //error 實例不能調用類型的靜態屬性和方法

		//能夠在外部使用prototype爲自定義的類型添加屬性和方法。
		function Mytest(){
			this.name = "zhangsan";
			this.age = 20;
		}

		Mytest.prototype.hello = function(){
			alert(this.name);
		}
		var m = new Mytest();
		m.hello();

		//在外部不能經過prototype改變自定義類型的屬性或方法。
		//該例子能夠看到：調用的屬性和方法還是最初定義的結果。
		Mytest.prototype.name = "lisi";		
		var mm = new Mytest();		
		alert(mm.name);

		//能夠在對象實例上改變或增長屬性。（這個是確定的）
		//也能夠在對象上改變或增長方法。（和廣泛的面向對象的概念不一樣）
		mm.name2 = "lisi";
		mm.hello = function(){
			alert(this.name2);
		}
		//mm.hello();

		//繼承，這個例子說明了一個類型如何從另外一個類型繼承。
		function Mytest2(){}
		Mytest2.prototype = new Mytest;
		var m2 = new Mytest2();
		alert(m2.name);

		//這個例子說明了子類如何重寫父類的屬性或方法。
		Mytest2.prototype.name = "wangwu";
		Mytest2.prototype.hello = function(){
			alert('i can mytest2 extend Mytest save method hello');
		}
		var m3 = new Mytest2();
		m3.hello();

		//子類中的name屬性值不會被父類覆蓋
		function Mytest3(){
			this.name = "子類中的name屬性值不會被父類覆蓋";
			this.age = 20;
		}
		Mytest3.prototype = new Mytest();
		var m4 = new Mytest3();
		alert(m4.name);

	</script>
	</body>
</html>

相關標籤/搜索

prototype

我的理解

理解

constructor&&prototype

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。