一、目錄
1.什么是面向物件編程
2. ES6中的類和物件
3. 類的繼承
4. 面向物件的案例
1. 面向物件和面向程序
1.1 面向程序
面向程序就是分析出解決問題所需要的步驟，然后用函式把這些步驟一步一步實作，使用的時候再一個一個的依次呼叫就可以了，
1.2 面向物件
面向物件是把事務分解成為一個個物件，然后由物件之間分工與合作，
1.3 面向物件與面向程序的對比
| 面向程序 | 面向物件 | |
|---|---|---|
| 優點 | 性能比面向物件高，適合跟硬體聯系很緊密的東西，例如單片機就采用的面向程序編程 | 易維護、易復用、易擴展，由于面向物件有封裝、繼承、多型性的特性，可以設計出低耦合的系統，使系統 更加靈活、更加易于維護 |
| 缺點 | 不易維護、不易復用、不易擴展 | 性能比面向程序低 |
2.物件與類
2.1物件
物件是由屬性和方法組成的：是一個無序鍵值對的集合,指的是一個具體的事物
屬性：事物的特征，在物件中用屬性來表示方法：事物的行為，在物件中用方法來表示
2.1.1 創建物件
//字面量創建物件
var xiaohu ={
name:'小hu同學',
age:'18'
}
console.log(xiaohu);
//建構式創建物件
function Star(name,age){
this.name = name;
this.age = age;
}
var xiaohu = new Star('小hu同學',18)//實體化物件
console.log(xiaohu)
2.2 類
- 在ES6中新增加了類的概念，可以使用class關鍵字宣告一個類，之后以這個類來實體化物件，類抽象了物件的公共部分，它泛指某一大類（class）物件特指某一個，通過類實體化一個具體的物件
2.2.1 創建類
1、語法：
//步驟1 使用class關鍵字
class name{
}
//步驟2 使用定義的類創建實體 注意new關鍵字
var xiaohu = new name();
2、示例
//1.創建類class 創建一個大類
class Star{
//類的共有屬性放到construcror里面
constructor(name,age){
this.name = name;
this.age = age;
}
}
//2.利用類創建一個物件
var xiaohu = new Star('小hu同學',18);
console.log(xiaohu);
//3.可以同時創建多個物件呼叫這個constructor
var xiao1 = new Star('小1',19);
console.log('xiao1')
var xiao2 = new Star('小2',20);
console.log('xiao2')
運行結果可以去敲一遍
這種的使用方式和建構式的方式是一樣的
2.2.2 類創建添加屬性和方法
//1.創建類 class 創建一個類
class Star{
//類的共有屬性放到constructor里面
//constructor是構造器或者建構式
constructor(uname,age){
this.uname = uname;
this.age = age;
}//----------------->方法與方法之間不需要添加逗號
eats(eat){
console.log(this.uname + '吃' + eat);
}
}
//2.利用類創建物件 new
var xiaohu = new Star('小hu同學',18);
console.log(xiaohu);//列印結果 Star{uname:"小hu同學",age:"18"}
xiaohu.eats('排骨');//列印結果 小hu同學吃排骨
** 注意喲 **
1、通過class關鍵字創建類，類名我們習慣性首字母大寫
2、類里面有個constructor 函式，可以接受傳遞過來的引數同時回傳實體物件
3、constructor函式 只要new生成實體時，就會自動呼叫這個函式，如果我們不寫這個函式，類也會自動生成這個函式
4、多個函式放到之間不需要添加逗號分隔
5、生成new不能省略
6、語法規范，創建類 類名后面不需要加小括號，生成實體 類名后面加小括號，建構式不需要加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 xiaohu = new Son('小');
xiaohu.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
4、時刻需要注意this的指向問題，類里面的共有屬性和方法一定要加this使用
（1）constructor中的指向的是new出來的實體物件
（2）自定義的方法，一般也指向的new出來的實體
（3）系結事件之后this指向的就是觸發事件的事件源
5、在ES6中類沒有變數提升，所以必須先定義類，才能通過類實體化物件！
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/275904.html
標籤：其他
上一篇：【資料庫原理及應用】經典題庫附答案（14章全）——第五章：關系資料理論
下一篇：小白求教下面需求如何實作