對象與類

1.對象與類

1.1對象

對象是由屬性和方法組成的：是一個無序鍵值對的集合,指的是一個具體的事物

• 屬性：事物的特徵，在對象中用屬性來表示（經常使用名詞）

• 方法：事物的行爲，在對象中用方法來表示（經常使用動詞）

1.1.1建立對象

//如下代碼是對對象的複習
//字面量建立對象
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);    

 

 

1.2類

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

1.2.1建立類

1. 語法:

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

       2.示例

// 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.2.2類建立添加屬性和方法

// 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. 經過class 關鍵字建立類, 類名咱們仍是習慣性定義首字母大寫

2. 類裏面有個constructor 函數,能夠接受傳遞過來的參數,同時返回實例對象

3. constructor 函數 只要 new 生成實例時,就會自動調用這個函數, 若是咱們不寫這個函數,類也會自動生成這個函數

4. 多個函數方法之間不須要添加逗號分隔

5. 生成實例 new 不能省略

6. 語法規範, 建立類 類名後面不要加小括號,生成實例 類名後面加小括號, 構造函數不須要加function

1.2.3類的繼承

1. 語法

// 父類
class Father{   
} 

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

2.示例

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

 

 

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

   1. constructor中的this指向的是new出來的實例對象

   2. 自定義的方法,通常也指向的new出來的實例對象

   3. 綁定事件以後this指向的就是觸發事件的事件源

2. 在 ES6 中類沒有變量提高，因此必須先定義類，才能經過類實例化對象