JavaScript面向物件，
注意啦在這其實面向物件是一種編程的方式，它的思想是通用的，因此 我強烈的建議你去查看我在python，面向物件編程中做的筆記，

面向物件與面向程序

這里還是相對比較容易理解的，這是兩種截然不同的編程方式，

物件還有類

物件

物件有屬性還有行為，

• 屬性是物件的特性，名詞
• 方法是物件的行為，動詞
  什么是物件的實體化？事實上物件來源于類，你把類變成一個真正意義上的存在的可以使用的物件的時候 就叫物件實體化，物件實體化是一個程序 ，實體物件指的是你實體化出來的物件

//以下代碼是對物件的復習
//字面量創建物件
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關鍵字來宣告一個類，然后使用new關鍵之，實體化一個物件出來

1. 語法:

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

2. 示例

 // 1. 創建類 class  創建一個 明星類
 class Star {
   // 類的共有屬性放到 constructor 里面，這是一個建構式你也可以稱它是構造器 ，作用就是用于傳遞引數，回傳實體物件，類似于python中的__init__函式
   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);
ldh.sing('吻別'); 

• 你需要注意的地方：

1. 通過class 關鍵字創建類, 類名我們還是習慣性定義首字母大寫
2. 類里面有個constructor 建構式,可以接受傳遞過來的引數,同時回傳的是實體物件
3. constructor 函式 只要 new 生成實體時,就會自動呼叫這個函式, 如果我們不寫這個函式,類也會自動生成這個函式
4. 多個函式方法之間不需要添加逗號分隔
5. 生成實體 new 不能省略
6. 語法規范, 創建類 類名后面不要加小括號,生成實體 類名后面加小括號, 建構式不需要加function

面向物件的三大特性：封裝，繼承，多型

1. 封裝
   實際上這個是最容易理解的，就是把一個類的事物的公用的特點，功能封裝起來，抽象出來組合成一個類

// 父類
class Father{   
} 

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

2. 繼承
   所謂的繼承也很容易理解，繼承就是把父類的一些東西繼承到，現有的“我”這個物件的類中，從而讓我不必要在重復定義一些父類中已經存在的屬性或者方法

請你思考如下問題

• 我們繼承過來的屬性和方法如何表示？如何使用
• 我們是否可以修改繼承出來的方法或者屬性？

  //定義了父類
  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

      // 父類有加法方法
      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使用.
• constructor中的this指向的是new出來的實體物件
• 自定義的方法,一般也指向的new出來的實體物件
• 系結事件之后this指向的就是觸發事件的事件源
• 在 ES6 中類沒有變數提升，所以必須先定義類，才能通過類實體化物件

使用我們的super關鍵字訪問我們的父類里面的方法

• 注意，繼承是向上查找的

• 繼承中,如果實體化子類輸出一個方法,先看子類有沒有這個方法,如果有就先執行子類的

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

• 如果子類想要繼承父類的方法,同時在自己內部擴展自己的方法,利用super 呼叫父類的建構式,super 必須在子類this之前呼叫

3.多型

標籤：JavaScript

上一篇：Bootstrap使用筆記

下一篇：微信小程式使用Swiper組件構建輪播圖