面向對象編程 （Object Oriented Programming）
面向對象基本特徵
-
封裝：也就是把客觀事物封裝成抽象的類，並且類可以把自己的數據和方法只讓可信的類或者對象操作，對不可信的進行信息隱藏。
-
繼承：通過繼承創建的新類稱爲“子類”或“派生類”。繼承的過程，就是從一般到特殊的過程。
-
多態：對象的多功能，多方法，一個方法多種表現形式。
Javascript是一種基於對象（object-based）的語言。但是，它又不是一種真正的面向對象編程（OOP）語言，因爲它的語法中沒有class（類）—–es6以前是這樣的。所以es5只有使用函數模擬的面向對象。
單例設計模式
單例設計模式
1、表現形式 （對象）
var obj = {
xxx:xxx
};
2、作用
把描述同一件事務的屬性和特性進行 分組，歸類（存儲在一個堆內存空間中）。因此避免了全局變量之間的衝突和污染
var pattern1 = { name:"xxx"};
var pattern2 = { name:"xxx"};
工廠模式
function createCar(color,wheel){//createCar工廠
var obj = new Object;//或obj = {} 原材料階段
obj.color = color;//加工
obj.wheel = wheel;//加工
return obj;//輸出產品
}
//實例化
var cat1 = createCar("紅色","4");
var cat2 = createCar("藍色","4");
alert(cat1.color);//紅色
構造函數模式
爲了解決從原型對象生成實例的問題，Javascript提供了一個構造函數（Constructor）模式。 所謂”構造函數”，其實就是一個普通函數，但是內部使用了this變量。對構造函數使用new運算符，就能生成實例，並且this變量會綁定在實例對象上。
加new執行的函數構造內部變化：自動生成一個對象，this指向這個新創建的對象，函數自動返回這個新創建的對象。
function CreateCar(color,wheel){//構造函數首字母大寫
//不需要自己創建對象了
this.color = color;//添加屬性，this指向構造函數的實例對象
this.wheel = wheel;//添加屬性
//不需要自己return了
}
//實例化
var cat1 = new CreateCar("紅色","4");
var cat2 = new CreateCar("藍色","4");
alert(cat1.color);//紅色
es6 類
概述
在ES6中，class (類)作爲對象的模板被引入，可以通過 class 關鍵字定義類。
class 的本質是 function。
它可以看作一個語法糖，讓對象原型的寫法更加清晰、更像面向對象編程的語法。
類的使用
<script>
//1、創建類 class 創建一個 明星的類
class Star {
//類的共有屬性寫在constructor
constructor(uname,age){
this.uname = uname;
this.age = age;
}
// 在類中添加共有的方法（函數）
sing(song){
console.log(this.uname + song)
}
//類裏面所有的函數不需要寫function
// 多個函數方法之間不需要添加逗號分隔
}
//2、利用類創建對象 new
var llj = new Star('李連杰'，18);
var wj = new Star('吳京'，16);
console.log(llj);
console.log(wj);
llj.sing("霍元甲");
wj.sing("戰狼")
</script>
總結：
- 通過class 關鍵字創建類，類名最好是首字母大寫。
- 類裏面有個constructor 函數，可以接收傳遞來的參數，同時返回給實例對象。（this 指向的是 new 的實例）
- constructor 函數只要被new 生成實例時，就會自動調用類裏面這個函數，如果我們不寫這個函數，類也會自動生成這個函數。
- 生成實例 new 不能省略。
- 最後注意語法規範，創建類，類名後面不要加小括號，生成實例類名後面加小括號，構造函數不需要加function
類的繼承
現實生活中繼承：子承父業，子繼承父親的姓。
程序中的繼承：子類可以繼承父類的屬性和方法。
extends 關鍵字
語法：
<script>
// 父類 Father
class Father{
// 父類
}
// extends 關鍵字
// 子類 Son
class Son extends Father{
//子類繼承父類
}
</script>
例子：
// 父親類 Father
class Father {
constructor（）{
}
money(){
console.log(100)
}
}
//子類 Son
class Son extends Father{}
var son = new Son();
son.money(); // 100
super 關鍵字
super 關鍵字用於訪問和調用對象父類上的函數。 可以調用父類的構造函數，也可以調用父類的普通函數。
語法：
class Father{
say(){
return '我是爸爸';
}
}
class Son extends Father{ // 子類繼承了父類的屬性和方法
say(){
//super.say() // super 調用父類的普通方法
return super.say() + '的兒子'；
}
}
var damao = new Son();
console.log(damao.say());
例子_ 計算：
class Father{
constructor(x,y){
//這裏的this 指向是自己的constructor
this.x = x;
this.y = y;
}
sum(){
console.log(this.x + this.y);
}
}
class Son extends Father{
constructor(x,y){
//這裏的this 指向是自己的constructor,不能被父類接收
//this.x = x;
// 所以需要用到super關鍵字,調用父類裏面的構造函數constructor
//super關鍵字必須放到this 前面
super(x,y);
this.x = x;
this.y = y;
}
sub(){
console.log(this.x - this.y);
}
}
var son = new Son(2,1);
son.sum(); // 3
son.sub(); //1
總結：
- 繼承中的屬性或者方法查找原則：就近原則
- 繼承中如果實例化子類輸出一個方法，先看子類有沒有這個方法，如若有先執行子類的。
- 繼承中，如果子類裏沒有就去查找父類有無這個方法，如若有就執行父類裏面的。
- 子類在構造函數中使用super,必須放到this前面（必須先調用父類的構造函數，再使用子類的構造方法）
本就是匆匆過客，又何必耿耿於懷 —— 非凡主力