物件與類

阿新 • • 發佈：2020-10-10

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 使用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('冰雨'); // 劉德華唱冰雨

注意喲:

通過class 關鍵字建立類, 類名我們還是習慣性定義首字母大寫
類裡面有個constructor 函式,可以接受傳遞過來的引數,同時返回例項物件
constructor 函式只要 new 生成例項時,就會自動呼叫這個函式, 如果我們不寫這個函式,類也會自動生成這個函式
多個函式方法之間不需要新增逗號分隔
生成例項 new 不能省略
語法規範, 建立類類名後面不要加小括號,生成例項類名後面加小括號, 建構函式不需要加function

1.2.3類的繼承

語法

// 父類
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

注意:

繼承中,如果例項化子類輸出一個方法,先看子類有沒有這個方法,如果有就先執行子類的
繼承中,如果子類裡面沒有,就去查詢父類有沒有這個方法,如果有,就執行父類的這個方法(就近原則)
如果子類想要繼承父類的方法,同時在自己內部擴充套件自己的方法,利用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指向的就是觸發事件的事件源
在 ES6 中類沒有變數提升，所以必須先定義類，才能通過類例項化物件