ES6中的物件與類

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

面向物件

面向物件更貼近我們的實際生活，可以使用面向物件描述現實世界事物，但是事物分為具體的事物和抽象的事物

手機抽象的(泛指的) 榮耀p30 具體的(特指的)

面向物件的思維特點:

抽取(抽象)物件共用的屬性和行為組織(封裝)成一個類(模板)
對類進行例項化，獲取類的物件

面向物件程式設計我們考慮的是有哪些物件，按照面向物件的思維特點不斷的建立物件，使用物件，指揮物件做事情.

1、物件

現實生活中：萬物皆物件，物件是一個具體的事物，看得見摸得著的實物。例如,一本書，一輛汽車、一個人可以是“物件”,

一個數據庫、一張網頁、一個與遠端伺服器的連線也可以是“物件"。

在JavaScript中，物件是一組無序的相關屬性和方法的集合,所有的事物都是物件

，例如字串、數值、陣列、函式等。

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

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

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);

如上兩行程式碼執行結果為:

2.類

在 ES6 中新增加了類的概念，可以使用 class 關鍵字宣告一個類，之後以這個類來例項化物件。

類抽象了物件的公共部分，它泛指某一大類（class）

物件特指某一個，通過類例項化一個具體的物件

2.1建立類

語法:

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

類constructor建構函式

constructor()方法是類的建構函式(預設方法) ,用於傳遞引數返回例項物件,通過new命令生成物件例項時,自動呼叫該方法。

如果沒有顯示定義類,內部會自動給我們建立一個constructor()

示例

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

以上程式碼執行結果:

2.2類建立新增屬性和方法

類新增方法

語法: class Person { constructor (name,age) { // constructor 構造器或者建構函式 this.name = name; this.age = age; } say() { console.1og (this.name + '你好'); }

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

2.3類的繼承

現實中的繼承:子承父業,比如我們都繼承了父親的姓。

程式中的繼承:子類可以繼承父類的一些屬性和方法。

語法

// 父類 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關鍵字

super關鍵字用於訪問和呼叫物件父類上的函式。可以呼叫父類的建構函式,也可以呼叫父類的普通函式

子類使用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