1.面向過程與面向?qū)ο?/h2>

1.1面向過程

• 面向過程就是分析出解決問題所需要的步驟，然后用函數(shù)把這些步驟一步一步實(shí)現(xiàn)，使用的時(shí)候再一個(gè)一個(gè)的依次調(diào)用就可以了。

1.2面向?qū)ο?/h3>

• 面向?qū)ο笫前咽聞?wù)分解成為一個(gè)個(gè)對象，然后由對象之間分工與合作。

1.3面向過程與面向?qū)ο髮Ρ?/h3>

	面向過程	面向?qū)ο?/th>
優(yōu)點(diǎn)	性能比面向?qū)ο蟾撸m合跟硬件聯(lián)系很緊密的東西，例如單片機(jī)就采用的面向過程編程。	易維護(hù)、易復(fù)用、易擴(kuò)展，由于面向?qū)ο笥蟹庋b、繼承、多態(tài)性的特性，可以設(shè)計(jì)出低耦合的系統(tǒng)，使系統(tǒng) 更加靈活、更加易于維護(hù)
缺點(diǎn)	不易維護(hù)、不易復(fù)用、不易擴(kuò)展	性能比面向過程低

2.對象與類

2.1對象

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

• 屬性：事物的特征，在對象中用屬性來表示（常用名詞）[圖片上傳中...(img3.png-b3e0e1-1587819783342-0)]

• 方法：事物的行為，在對象中用方法來表示（常用動(dòng)詞）

2.1.1創(chuàng)建對象

//以下代碼是對對象的復(fù)習(xí)
//字面量創(chuàng)建對象
var ldh = {
    name: '劉德華',
    age: 18
}
console.log(ldh);

//構(gòu)造函數(shù)創(chuàng)建對象
  function Star(name, age) {
    this.name = name;
    this.age = age;
 }
var ldh = new Star('劉德華', 18)//實(shí)例化對象
console.log(ldh);   

img3.png

2.2類

• 在 ES6 中新增加了類的概念，可以使用 class 關(guān)鍵字聲明一個(gè)類，之后以這個(gè)類來實(shí)例化對象。類抽象了對象的公共部分，它泛指某一大類（class）對象特指某一個(gè)，通過類實(shí)例化一個(gè)具體的對象

2.2.1創(chuàng)建類

1. 語法:

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

2. 示例

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

img4.png

通過結(jié)果我們可以看出,運(yùn)行結(jié)果和使用構(gòu)造函數(shù)方式一樣

2.2.2類創(chuàng)建添加屬性和方法

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

以上代碼運(yùn)行結(jié)果:

img5.png

1. 通過class 關(guān)鍵字創(chuàng)建類, 類名我們還是習(xí)慣性定義首字母大寫
2. 類里面有個(gè)constructor 函數(shù),可以接受傳遞過來的參數(shù),同時(shí)返回實(shí)例對象
3. constructor 函數(shù) 只要 new 生成實(shí)例時(shí),就會(huì)自動(dòng)調(diào)用這個(gè)函數(shù), 如果我們不寫這個(gè)函數(shù),類也會(huì)自動(dòng)生成這個(gè)函數(shù)
4. 多個(gè)函數(shù)方法之間不需要添加逗號(hào)分隔
5. 生成實(shí)例 new 不能省略
6. 語法規(guī)范, 創(chuàng)建類 類名后面不要加小括號(hào),生成實(shí)例 類名后面加小括號(hào), 構(gòu)造函數(shù)不需要加function

2.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();      //結(jié)果為 你的姓是劉

img6.png

子類使用super關(guān)鍵字訪問父類的方法

//定義了父類
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調(diào)用了父類中的構(gòu)造函數(shù)
      }
    }
    var son = new Son(1, 2);
    son.sum(); //結(jié)果為3

注意:

1. 繼承中,如果實(shí)例化子類輸出一個(gè)方法,先看子類有沒有這個(gè)方法,如果有就先執(zhí)行子類的

2. 繼承中,如果子類里面沒有,就去查找父類有沒有這個(gè)方法,如果有,就執(zhí)行父類的這個(gè)方法(就近原則)

3. 如果子類想要繼承父類的方法,同時(shí)在自己內(nèi)部擴(kuò)展自己的方法,利用super 調(diào)用父類的構(gòu)造函數(shù),super 必須在子類this之前調(diào)用

    // 父類有加法方法
    class Father {
      constructor(x, y) {
      this.x = x;
      this.y = y;
      }
      sum() {
      console.log(this.x + this.y);
      }
    }
    // 子類繼承父類加法方法 同時(shí) 擴(kuò)展減法方法
    class Son extends Father {
      constructor(x, y) {
      // 利用super 調(diào)用父類的構(gòu)造函數(shù) super 必須在子類this之前調(diào)用,放到this之后會(huì)報(bào)錯(cuò)
      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
   

   以上代碼運(yùn)行結(jié)果為:

   
   
   img7.png

4. 時(shí)刻注意this的指向問題,類里面的共有的屬性和方法一定要加this使用.

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

5. 在 ES6 中類沒有變量提升，所以必須先定義類，才能通過類實(shí)例化對象![]

   
   
   img2.png
   
   
   img1.png