JavaScript怎么創建類和對象

這篇文章主要介紹了JavaScript怎么創建類和對象的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇JavaScript怎么創建類和對象文章都會有所收獲，下面我們一起來看看吧。

1 JS 面向對象

1.1 面向對象編程介紹

面向過程編程

即POP（Process-oriented programming），面向過程就是分析出解決問題所需要的步驟，然后用函數把這些步驟一步一步實現，使用的時候再一個一個的依次調用就可以了。

面向對象編程

即 OOP（Object Oriented Programming） 面向對象是把事務分解成為一個個對象，然后由對象之間分工與合作。在面向對象程序開發思想中，每—個對象都是功能中心，具有明確分工。 面向對象編程具有靈活、代碼可復用、容易維護和開發的優點，更適合多人合作的大型軟件項目。

面向對象的特性： 封裝性，繼承性，多態性

兩者的對比

面向過程：

優點：性能比面向對象高，適合跟硬件聯系很緊密的東西，例如單片機就采用的面向過程編程。

缺點：沒有面向對象易維護、易復用、易擴展。

面向對象：

優點：易維護、易復用、易擴展，由于面向對象有封裝、繼承、多態性的特性，可以設計出低耦合的系統，使系統更加靈活、更加易于維護

缺點：性能比面向過程低。

1.2 ES6 中的類和對象

對象的介紹

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

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

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

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

類 class 的介紹

在 ES6 中新增加了類的概念，可以使用 class 關鍵字聲明—個類，之后以這個類來實例化對象。

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

對象 特指某一個，通過類實例化一個具體的對象

面向對象的思維特點：

抽取(抽象)對象共用的屬性和行為組織(封裝)成—個類（模板）

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

創建類和對象

class ClassName {

    // class body

}

// 創建實例：

let obj = new ClassName();

類的 constructor 構造函數

constructor() 方法是類的構造函數（默認方法），用于傳遞參數，返回實例對象，通過new命令生成對象實例時，自動調用該方法。如果沒有顯示定義,類內部會自動給我們創建一個 constructor()

// 創建一個學生類

class Student {

   // 類的構造函數

    constructor(uname, age, major) {

        this.uname = uname;

        this.age = age;

        this.major = major;

    }

   // 類中添加方法

   // 直接在類中寫方法名和括號即可

    sing() {

        console.log(this.uname + "會唱歌");

    }

}

// 類的實例化——創建對象

let peter = new Student("Peter", 21, "CS");

console.log(peter.uname); // Peter

peter.sing(); // Peter會唱歌

注意：

通過 class 關鍵字創建類, 類名我們還是習慣性定義首字母大寫

類里面有個 constructor 函數,可以接受傳遞過來的參數,同時返回實例對象

constructor 函數 只要 new 生成實例時,就會自動調用這個函數, 如果我們不寫這個函數，類也會自動生成這個函數

生成實例 new 不能省略

最后注意語法規范, 創建類：類名后面不要加小括號。生成實例：類名后面加小括號, 構造函數不需要加 function

static 靜態成員

給成員屬性或成員方法添加 static，該成員就成為靜態成員，靜態成員只能由該類調用

class Person {

    static eat() {

        console.log('eat');

    }

}

let  p = new Person();

Person.eat(); // eat

p.eat(); // 報錯

配合 getter 和 setter

當屬性擁有 get/set 特性時，屬性就是訪問器屬性。代表著在訪問屬性或者寫入屬性值時，對返回值做附加的操作。而這個操作就是 getter/setter 函數。

getter ： 適用于某個需要動態計算的成員屬性值的獲取

setter 則是在修改某一屬性時所給出的相關提示

class Test {

    constructor(log) {

        this.log = log;

    }

    get latest() {

        console.log('latest 被調用了');

        return this.log;

    }

    set latest(e) {

        console.log('latest 被修改了');

        this.log.push(e);

    }

}

let test = new Test(['a', 'b', 'c']);

// 每次 log 被修改都會給出提示

test.latest = 'd';

// 每次獲取 log 的最后一個元素 latest，都能得到最新數據。

console.log(test.latest);

以上輸出：

latest 被修改了

latest 被調用了

[ 'a', 'b', 'c', 'd' ]

類的繼承

extends 關鍵字 子類繼承父類

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

類里面的 this 指向問題：constructor 里面的 this 指向實例對象, 方法里面的 this 指向這個方法的調用者

class Person {

    constructor (uname, age) {

        this.uname =uname;

        this.age = age;

    }

}

class Student extends Person {

    constructor (uname, age, major) {

        // super 將子類的參數傳遞給父類構造函數，減少代碼量

        super(uname, age);

        // 子類可以有自己獨有的屬性

        this.major = major;

    }

}

let rick = new Student("Rick", 22, "數學");

super 調用父類普通函數

class Parent {

    sayHi() {

        return "Father: hello";

    }

}

class Child extends Parent {

    sayHi() {

        // super 調用父類普通函數  super.sayHi()

        console.log(super.sayHi());

    }

}

let man = new Child();

man.sayHi(); // Father: hello

面向對象案例

類的基本架構：

class Tab {

    constructor(id) {

        // 獲取相關元素節點

        // 根據傳入的id選擇器構建主節點

        this.main = document.querySelector(id);

    }

    // 初始化，綁定各個事件

    init() {}

    // 更新節點，同步整個狀態

    updateNode() {}

    // 1. 切換功能

    toggleTab() {}

    // 2. 添加功能

    addTab() {}

    // 3. 刪除功能

    removeTab() {}

    // 4. 修改功能

    editTab() {}

}

注意的地方：

在 init() 中綁定事件時，不需要即時執行的話，則事件名后面不加括號。

若需要主節點，則聲明一個 that 變量，在 constructor() 里面賦值 that = this。

insertAdjacentHTML() 方法：可以在指定元素的指定位置添加一個節點字符串。（MDN insertAdjacentHTML）

appendChild 不支持追加字符串的子元素，insertAdjacentHTML 支持追加字符串的元素

node 是某一個節點，在其上綁定節點的時候需要提前判斷該節點存在再綁定事件，可使用 node && node.click()。

自動執行某事件而不需要手動觸發，使用 node.click()、node.blur() 等等。

雙擊事件：ondblick。

雙擊禁止選中文字：

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

1

雙擊禁止選中文字（CSS做法）：user-select: none;

2 構造函數與原型

2.1 構造函數和原型

概述

在典型的 OOP 的語言中（如 Java），都存在類的概念，類就是對象的模板，對象就是類的實例，但在 ES6之前， JS 中并沒用引入類的概念。

ES6， 全稱 ECMAScript 6.0 ，2015.06 發版。但是目前瀏覽器的 JavaScript 是 ES5 版本，大多數高版本的瀏覽器也支持 ES6，不過只實現了 ES6 的部分特性和功能。

在 ES6 之前 ，對象不是基于類創建的，而是用一種稱為 構建函數 的特殊函數來定義對象和它們的特征。

構造函數

在 JS 中，使用構造函數時要注意以下兩點：

構造函數用于創建某一類對象，其首字母要大寫

構造函數要和 new 一起使用才有意義

new 在執行時會做四件事情：

在內存中創建一個新的空對象。

讓 this 指向這個新的對象。

執行構造函數里面的代碼，給這個新對象添加屬性和方法。

返回這個新對象（所以構造函數里面不需要 return）。

靜態成員和實例成員

JS的構造函數中可以添加一些成員，可以在構造函數本身上添加，也可以在構造函數內部的 this 上添加。

通過這兩種方式添加的成員，就分別稱為 靜態成員 和 實例成員。

靜態成員：在構造函數本上添加的成員稱為 靜態成員，只能由構造函數本身來訪問

實例成員：在構造函數內部創建的對象成員稱為 實例成員，只能由實例化的對象來訪問

function Human(uname, age) {

    this.uname = uname;  //實例成員

    this.age = age;  //實例成員

}

Human.x = 10; // 靜態成員

let rick = new Human("rick", 35);

// console.log(rick.x); // 實例化的對象不能調用靜態成員

console.log(Human.x); // 靜態成員只能由構造函數本身來訪問

關于“JavaScript怎么創建類和對象”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“JavaScript怎么創建類和對象”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。