JS高級-類與對象

面向對象
javascript是一門面向對象的語言

面向對象是把事務分解成爲一個個對象，然後由對象之間分工與合作
面向對象的核心思路:是把一些對象的公共方法抽取出來、抽成一個類、然後通過new來創建

-面向過程
面向過程就是分析出解決問題所需要的步驟，然後用函數把這些步驟一步一步實現， 使用的時候再一個一個的依次調用就可以了。

面向過程：性能高、聯繫緊密、但是不易維護、不易複用、不易擴展
面向對象：易維護、易複用、易擴展、更加靈活、但是性能低一些

對象與類

• 對象
  對象是屬性與方法的集合（無序鍵值對的集合）、指的是一個具體的事物

屬性：事物的特徵，在對象中用屬性來表示（常用名詞）
方法：事物的行爲，在對象中用方法來表示（常用動詞）

創建一個對象

 //字面量創建對象 
 var ldh = {     
 name: '劉德華',     
 age: 18 
 } 
 console.log(ldh);
//構造函數創建對象  
function Star(name, age) {  
this.name = name;   
this.age = age;  
} 
var ldh = new Star('劉德華', 18)//實例化對象 
console.log(ldh);   

構造函數與字面量創建的對象是有區別的

• 類

在 ES6 中新增加了類的概念，可以使用 class 關鍵字聲明一個類，之後以這個類來實 例化對象。
類抽象了對象的公共部分，它泛指某一大類（class）、
對象特指某一個， 通過類實例化一個具體的對象

類的語法

//步驟1 使用class關鍵字 
class name {  
 // class body 
 }      
 //步驟2使用定義的類創建實例  注意new關鍵字 
 var xx = new name(); 

// 1. 創建類 class  創建一個 明星類 
class Star {   
// 類的共有屬性放到 constructor 裏面  
constructor(name, age) {   
this.name = name;
this.age = age;    }  }   
// 2. 利用類創建對象 new  
var ldh = new Star('劉德華', 18);  
console.log(ldh);

類的運行方式與構造函數是一樣的

• 類創建添加屬性和方法

  // 1. 創建類 class  創建一個類 
    class Star {
        // 類的共有屬性放到 constructor 裏面 constructor是 構造器或者構造函數    
        constructor(uname, age) {
            this.uname = uname;
            this.age = age;
        }
        //‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐>注意,方法與方法之間不需 要添加逗號    
        sing(song) {
            console.log(
                this.uname + '唱' + song);
        }
    }
    // 2. 利用類創建對象 new
    var ldh = new Star('劉德華', 18);
    console.log(ldh); // Star {uname: "劉德華", age: 18} 
    ldh.sing('冰雨'); // 劉德華唱冰雨

1. 類裏面有個constructor 函數,可以接受傳遞過來的參數,同時返回實例對象
2. constructor 函數 只要 new 生成實例時,就會自動調用這個函數, 如果我們不寫這個 函數,類也會自動生成這個函數
3. 語法規範, 創建類 類名後面不要加小括號,生成實例 類名後面加小括號, 構造函數不需 要加function

• 類的繼承
  語法

//父類
class Father{  
  } 
// 子類繼承父類 
class  Son  extends Father {   
} 

class Father {  
constructor(surname) {    
this.surname= surname;    
}     
say() {     
console.log('你的姓是' + this.surname);     
} }
class Son extends Father{ 
// 這樣子類就繼承了父類的屬性和方法 }
var damao= new Son('劉'); 
damao.say();      //結果爲 你的姓是劉

子類使用super關鍵字訪問父類的方法

//定義了父類 
class Father {    
constructor(x, y) {   
this.x = x;  
this.y = y;   
}    
sum() {   
console.log(this.x + this.y);
}     
}
 //子元素繼承父類     
class Son extends Father {   
constructor(x, y) {      
super(x, y); //使用super調用了父類中的構造函數      
}      
}    
var son = new Son(1, 2);    
 son.sum(); //結果爲3

注意:

1. 繼承中,如果實例化子類輸出一個方法,先看子類有沒有這個方法,如果有就先執行 子類的
2. 繼承中,如果子類裏面沒有,就去查找父類有沒有這個方法,如果有,就執行父類的這 個方法(就近原則)
3. 如果子類想要繼承父類的方法,同時在自己內部擴展自己的方法,利用super 調用 父類的構造函數,super 必須在子類this之前調

// 父類有加法方法 
class Father {
constructor(x, y) {  
this.x = x;   
this.y = y;   
}    
sum() {  
console.log(this.x + this.y); 
} 
} 
// 子類繼承父類加法方法 同時 擴展減法方法 
class Son extends Father { 
constructor(x, y) {  
// 利用super 調用父類的構造函數 super 必須在子類this之前調用,放到 this之後會報錯    super(x, y);   
this.x = x;  
this.y = y;
}  
subtract() {  
console.log(this.x ‐ this.y);  
} } 
var son = new Son(5, 3);
son.subtract(); //2 son.sum();//8

時刻注意this的指向問題,
類裏面的共有的屬性和方法一定要加this使用.

1. constructor中的this指向的是new出來的實例對象
2. 自定義的方法,一般也指向的new出來的實例對象
3. 綁定事件之後this指向的就是觸發事件的事件源

注意

 1.在 ES6 中類沒有變量提升，所以必須先定義類，才能通過類實例化對象
 2.類裏面的共有的屬性和方法一定要加this使用.