JS面向對象（1） -- 簡介，入門，系統常用類，自定義類，constructor，typeof，instanceof，對象在內存中的表現形式

相關鏈接：

JS面向對象（1） -- 簡介，入門，系統常用類，自定義類，constructor，typeof，instanceof，對象在內存中的表現形式

JS面向對象（2） -- this的使用，對象之間的賦值，for...in語句，delete使用，成員方法，json對象的使用，prototype的使用，原型繼承與原型鏈

JS面向對象（3） -- Object類，靜態屬性，閉包，私有屬性， call和apply的使用，繼承的三種實現方法

1、發展史

　　面向機器

　　面向過程：將程序的執行分解成若干個步驟

　　面向對象：將程序的執行分解成若干個事物

 

2、面向對象兩個基本概念

類：代表某類事物，是抽象的

對象：代表某個事物，是具體的

 

3、快速入門

表達一個人的完整信息

<script>
    
    //面向過程
    var name = 'zhangsan';
    var age = 30;
    var marry = true;
    alert(name + age + marry);
    
    //面向對象
    function Person{
    }
    var p1 = new Person();
    p1.name = 'lisi';
    p1.age = 20;
    p1.marry = true;
    alert(p1.name + p1.age + p1.marry);
    
</script>

在面向過程的例子中，我們分別使用了三個變量來定義一個人的完整信息，但這三個變量它們之間沒有必然的聯系，如：我現在找到變量age，雖然可以取到數據，但並不清楚這是“誰”的年齡。

在面向對象的例子中， function Person{}是構造器。我們可以這樣理解，每一個定義的function Person{}都是Person類的構造函數。

 

4.JS中常見的系統類

1）String類 字符串類

length ：取得字符串長度                        

indexOf(string) ：取得參數在字符串中出現的位置

substr(num1,[num2]) ：截取字符串

toLowerCase()       ：轉換為小寫    

toUpperCase() ：轉換為大寫    

replace(str1,str2) ：字符串替換

2）Date類   日期類

getYear()        ：返回年份(有時會出錯，建議用第二種)

getFullYear()  ：返回年份  

getMonth()     ：返回月份 (0---11)    

getDate()       ：返回每月第幾天      

getDay()         ：返回星期數 (0-6)

getHours()      ：返回小時數

getMinutes()   ：返回分鍾數

getSeconds() ：返回秒數

getMilliseconds() ：返回毫秒數

3）Math類  數學類

ceil(數值)       ：返回大於或等於該數的最小整數(比如說分頁 Math.ceil(4.8)=5)

floor(數值)     ：返回小於或等於該數的最大整數

min(數值1,數值2) ：返回最小數

max(數值1,數值2) ：返回最大數

pow(數值1,數值2) ：返回數值1的數值2次方

random()              ：返回隨機數  0----------1

round(數值)   ：四舍五入

sqrt(數值)      ：開平方根

Math類下的方法都是靜態方法

 

5.自定義類--類的定義

語法：

function 類名(){

}

在js中，沒有類的定義語句，只有function，每一個function，我們可以認為它是同名類的構造函數

比如說：

function person(){

} 

它是Person類的構造函數 

這種函數也叫構造器

 

6.自定義類--聲明對象

語法： var 對象=new 類名();

關鍵字new：實例化對象， 開辟相應內存空間

function Person(){
    alert('hello');
}
var p1 = new Person();

執行上面這個例子時，我們發現，在實例化時，直接執行了Person構造函數

 

7.自定義類--關於對象屬性的使用

語法：

　　對象.屬性;

　　對象['屬性'];

function Person(){
    alert('hello');
}
var p1 = new Person();
p1.name='zhangsan';
p1.age=30;
alert(p1.name+p1.age);

在js中，對象屬性是動態添加的，對象屬性可以使用“.”或['']這兩種形式表示出來

對象的屬性可以是任何數據類型，如：字符串、數字、對象

 

8.三個關鍵字

constructor： 返回的是對象的構造器

typeof ：返回數據類型

instanceof ：判斷對象是否是某個類的實例

function Person(){
    alert('hello');
}
var p1 = new Person();
p1.name='zhangsan';
p1.age=30;
alert(p1.name+p1.age);

//返回p1對象的構造器
alert(p1.constructor);
//取得p1變量的數據類型
alert(typeof p1);
//判斷p1是不是Person類的一個實例
alert(p1 instanceof Person);

 

9.對象在內存中的表現形式

//例1
function Person(){
}
var p1 = new Person();
p1.name='zhangsan';
p1.age=30;

var p2 = new Person();
alert(p2.name);

在例1中，創建p1對象時，會為p1開辟相應的堆空間，然后將name和age屬性以及值添加到p1所指向的堆空間中，創建p2對象時，也會為p2對象開辟對應的空間，但p2所指向的堆空間是空的，所以P2對象沒有name和age屬性。

//例2
function Person(){
}
var p1 = new Person();
p1.name = 'zhangsan';
p1.age = 30;

var p2 = p1;
alert(p2.name);
p2.name = 'lisi';
alert(p2.name);
alert(p1.name);

在例2中，將p1棧中保存的堆的地址賦值給了p2，所以說,p2也指向了p1指向的堆內存的地址。兩個對象指向了同一塊堆內存，所以改變一個對象的屬性，會影響到另一個對象。

//例3
function Person(){
}
var p1 = new Person();
p1.name = 'zhangsan';
p1.age = 30;

var p2 = p1;
alert(p2.name);
p2 = null;
alert(p1.name);
alert(p2.name);

在例3中，P2=null; 表示釋放p2所占的棧空間，但p1的空間仍保留，p1仍然指向相應的堆空間，所以刪除p2不會影響到p1對象。