JavaScript-例項屬性和類屬性

一、定義

根據函式中宣告變數的方式，函式中變數分為以下三種：

        ->區域性變數：在函式中以var宣告的變數

        ->例項屬性：在函式中以this字首修飾的變數

        ->類屬性：在函式中以函式名字首修飾的變數

二、區別

->區域性變數是只能在函式裡訪問的變數

->例項屬性是屬於單個物件的，因此必須通過物件來進行訪問

->類屬性是屬於整個類（也指函式）本身的，因此必須通過類（也指函式）來進行訪問

看如下程式碼：

<script type="text/javascript">
function Person(name,age)
{
	//以var定義的變數為區域性變數
	var hello = "你好！";
	//this修飾的變數為例項屬性
	this.age = age;
	//Person修飾的變數為類屬性
	Person.name = name;
}

//建立Person的第一個物件p1:姓名為張三，年齡為20
var p1 = new Person('張三',20);
document.writeln("建立的第一個Person物件<br />");
//輸出第一個物件p1的姓名和年齡
document.writeln("p1的age屬性為：" + p1.age + "<br />");
document.writeln("p1的name屬性為：" + p1.name + "<br />");
document.writeln("通過Person訪問靜態name屬性為：" + Person.name + "<br />");
//輸出hello屬性
document.writeln("p1的hello屬性為：" + p1.hello + "<br /><hr />");

//建立Person的第二個物件p2:姓名為李四，年齡為24
var p2 = new Person('李四',24);
document.writeln("建立兩個Person物件之後<br />");

//再次輸出第一個物件p1的姓名和年齡
document.writeln("p1的age屬性為：" + p1.age + "<br />");
document.writeln("p1的name屬性為：" + p1.name + "<br />");
//輸出第一個物件p1的姓名和年齡
document.writeln("p2的age屬性為：" + p2.age + "<br />");
document.writeln("p2的name屬性為：" + p2.name + "<br />");
//通過類名訪問類屬性名
document.writeln("通過Person訪問靜態name屬性為：" + Person.name + "<br />");

</script>
 

執行後：

Person函式的age屬性為例項屬性----》可通過Person物件來訪問age屬性

Person函式的name屬性為類屬性，則該屬性完全屬於Person類----》必須通過Person類來訪問name屬性

由上圖程式碼可以看出，Person物件並沒有name屬性，所以通過Person物件訪問該屬性將返回undefined；而hello為Person的區域性變數，在函式外是無法訪問該變數的。

三、JavaScript的靈活性

JavaScript允許隨時為物件增加屬性和方法，當直接為物件的某個屬性賦值時，即可視為給物件增加屬性。

如下程式碼：

<script type="text/javascript">
	function Person(name , age)
	{
		//定義一個age例項屬性，並傳參
		this.age = age;
		//定義一個name類屬性
		Person.name = name;
	}
	//建立一個p1物件
	p1 = new Person('張三',20);
	

	//由於name為類屬性，因此通過p1訪問該屬性，返回為undefined
	document.writeln('p1的name屬性為：' + p1.name +'<br />');
	document.writeln('p1的age屬性為：' + p1.age + '<br />');
	document.writeln('Person的name屬性為：' + Person.name + '<br />');
	
	//為p1物件的name屬性賦值，就等同於為Person增加了一個name屬性
	p1.name = '李四';

	document.writeln('<hr />為p1的name屬性賦值後<br />');
	document.writeln('p1的name屬性為：' + p1.name +'<br />');
	document.writeln('Person的name屬性為：' + Person.name + '<br />');

</script>
 

執行後：

day 2018.11.09 整理自《瘋狂HTML+CSS+JavaScript講義第二版》 郵箱：[email protected]