JavaScript的學習-例項屬性和類屬性
阿新 • • 發佈:2018-12-21
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]