JavaScript 面向對象
面向對象的兩大編程思想
面向過程

面向過程很好理解，就是分析出解決問題所需要的步驟，然後用函數把這些步驟一步一步實現，使用的時候再一個一個的依次調用就可以了

面向對象

上大學時老師教過我們，萬物皆對象。面向對象就是把事務分解成為一個個對象，然後由對象之間分工與合作。

舉個例子

一個人蓋個狗窩，直接弄泥，磚頭，修飾一下就成了

但是蓋高樓的話，需要打地基，需要運輸材料，需要財務結算等，此時不需要等，各做各的，效率才高

面向對象三大特性
就拿拖拉機來説

封裝性【已經把耕地功能準備好，負責開就行】
繼承性【繼承與拖拉機，會開拖拉機就會弄這個，繼承自拖拉機】
多態性【可以裝配不同的機械，除了耕地還可以拉貨】
面向過程和麪向對象的優缺點
面向過程

優點：性能比面向對象高，步驟練習緊密
缺點：不好維護，不易多次使用及擴展
面向對象

優點：易維護，可複用，可擴展，靈活性高
缺點性能沒有面向過程高
ES6中的類和對象
類class
在ES6中新增加了類的概念，可以使用class關鍵字聲明一個類，之後以這個類來實例化對象。【構造函數實例化對象】

類抽象了對象的公共部分，它泛指某一大類（class） ES5：沒有類，ES6：類

ES：ECMAscript

類是在ES6中新加進入的，學會區分類和對象的概念

類：泛指一類

對象：類中的具體的某個實例，【屬性和方法的集合體】

類：抽象

類模擬抽象的，泛指的，對象是具體的

面向對象模擬現實世界，更貼近實際生活，生活照分為抽象事物和具體事物

比如：手機【兩層含義：具體某個手機，和籠統的概念手機】

抽取，把對象的屬性和行為封裝成一個類

對類進行實例化, 獲取類的對象

例如：人有身高，體重等，但是具體的某個人也有這個屬性 練習瞭解類和對象

一個對象可以繼承多個類，而類就是一個泛指

對象：具體

對象：類中的具體的某個實例【屬性和方法的集合體】

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

在JavaScript 中，對象是一組無序的相關屬性和方法的集合，所有的事物都是對象，例如字符串、數值、數組、函數等。

var n = 3;
var arr = [1,2,3];
function fn () {}
var str= 'abcd';
<img src='a.jpg'>
複製代碼

對象是由屬性和方法組成的

屬性：對象有什麼【訪問】【語法：對象.屬性】

方法：對象做什麼【執行】【語法：對象.方法()】

屬性：事物的特徵，在對象中用屬性來表示（常用名詞）

方法：事物的行為，在對象中用方法來表示（常用動詞）

面向對象的思維特點

抽取（抽象）對象共用的屬性和方法組織(封裝)成一個類(模板)

對類進行實例化, 獲取類的對象

類裏面的屬性和方法，其實是把對象的公共屬性和公共方法放到了一起

創建類
語法：class 類名 {屬性和方法}【構造函數語法糖】

注意類名首字母大寫

類要抽取公共屬性方法，定義一個類

class Star {

};

var ldh = new Star();
複製代碼

類就是構造函數的語法糖

constructor 構造函數
語法

class Star {
    constructor (uname,age) {
        this.uname = uname;
        this.age = age;
    }
}
複製代碼

屬性：放到constructor，構造函數裏面

注意：類裏面的方法不帶function，直接寫既可

類裏面要有屬性方法，屬性方法要是想放到類裏面，我們用constructor構造器

構造函數作用：接收參數，返回實例對象，new的時候主動執行，主要放一些公共的屬性

constructor() 方法是類的構造函數(默認方法)，用於傳遞參數,返回實例對象，通過new命令生成對象實例時，自動調用該方法。

注意：每個類裏面一定有構造函數，如果沒有顯示定義, 類內部會自動給我們創建一個constructor() ，

注意：this代表當前實力化對象，誰new就代表誰

類添加方法
語法：注意方法和方法之間不能加逗號

class Star {
    constructor () {}
    sing () {}
    tiao () {}
}
複製代碼

class 類名 { constructor(){} 方法名(){} }

注意：類中定義屬性，調用方法都得用this

注意：方法之間不能加逗號分隔，同時方法不需要添加function 關鍵字

總結：類有對象的公共屬性和方法，用class創建，class裏面包含constructor和方法，我們把公共屬性放到constructor裏面，把公共方法直接往後寫既可，但是注意不要加逗號

類的繼承
extends 關鍵字
語法：

class Father {}
class Son extends Father{}
複製代碼

注意：是子類繼承父類

super關鍵字
我們應用的過程中會遇到父類子類都有的屬性，此時，沒必要再寫一次，可以直接調用父類的方法就可以了

super關鍵字用於訪問和調用對象父類上的函數。可以調用父類的構造函數，也可以調用父類的普通函數

當子類沒有constructor的時候可以隨意用父類的，但是如果子類也含有的話，constructor會返回實例，this的指向不同，不可以再直接使用父類的東西

調用父類構造函數

class F {
    constructor(name, age){
    }
}

class S extends F {
    constructor (name, age) {
        super(name,age);
    }
}
複製代碼

注意: 子類在構造函數中使用super, 必須放到this 前面(必須先調用父類的構造方法,在使用子類構造方法

調用父類普通函數

class F {
    constructor(name, age) {

    }
    
    say () {
    
    }
}

class S extends F {
    constructor (name, age) {
        super(name,age);
    }
    
    say () {
        super.say()
    }
}
複製代碼

注意：如果子類也有相同的方法，優先指向子類，就近原則

總結：super調用父類的屬性和方法，那麼查找屬性和方法的原則就近原則

如果子類不寫東西，那麼直接繼承父類就可以用

但是如果子類有自己的構造函數和父類同名的方法，此時不可以直接用父類的東西，需要用super調用父類的方法和構造函數

三個注意點
在ES6中類沒有變量提升，所以必須先定義類，才能通過類實例化對象.
類裏面的共有屬性和方法一定要加this使用
類裏面的this指向問題
constructor 裏面的this指向實例對象, 方法裏面的this 指向這個方法的調用者
例子

class Button {
    constructor () {
        var btn = document.querySelector('input');
        btn.onclick = this.cli;
    }

    cli () {
        console.log('點擊了');
    }
}

var anniu = new Button();
複製代碼

類裏面的this指向
構造函數的this指向實例對象

普通函數的this是調用者，誰調用this是誰

例子

<input type="button" value="點擊">
var that;
class F {
    constructor (name, age) {
        this.name = name;
        this.age = age;
        // console.log(this);
        that = this;    
        this.btn = document.querySelector('input');
        this.btn.onclick = this.cli;
    }
    cli () {
        console.log(this);
    }

    say () {
        console.log(this);
    }
}

var obj = new F('張學友',22);

最後
如果你覺得此文對你有一丁點幫助，點個贊。或者可以加入我的開發交流羣：1025263163相互學習，我們會有專業的技術答疑解惑

如果你覺得這篇文章對你有點用的話，麻煩請給我們的開源項目點點star:http://github.crmeb.net/u/defu不勝感激 ！

完整源碼下載地址：https://market.cloud.tencent....

PHP學習手冊：https://doc.crmeb.com
技術交流論壇：https://q.crmeb.com