JavaScript的面向?qū)ο竽懔私鈫?/h1>

 更新時間：2022年03月17日 15:59:40   作者：BloggerM  

這篇文章主要為大家詳細介紹了JavaScript的面向?qū)ο?，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

目錄

• 1. 面向?qū)ο缶幊探榻B
• 1.1 兩大編程思想
• 1.2 面向過程編程 POP（Process - oriented - programming）
• 1.3 面向?qū)ο缶幊?OOP（Object - Oriented - Programming）
• 1.4 面向過程和面向?qū)ο蟮膶Ρ?/a>
• 2. ES6 中的類和對象
• 2.1 對象
• 2.2 類 class
• 2.3 創(chuàng)建類
• 2.4 類 constructor 構(gòu)造函數(shù)
• 2.5 類添加方法
• 3. 類的繼承
• 3.1 繼承
• 3.2 super關鍵字
• 4. 三個注意點：
• 總結(jié)

1. 面向?qū)ο缶幊探榻B

1.1 兩大編程思想

• 面向過程
• 面向?qū)ο?/li>

1.2 面向過程編程 POP（Process - oriented - programming）

面向過程就是分析出解決問題所需要的步驟，然后用函數(shù)把這些步驟一步一步實現(xiàn)，使用的時候再一個一個的依次調(diào)用就可以了。

舉個例子：將大象裝進冰箱，面向過程做法。

1.打開冰箱

2.大象裝進去

3.關上冰箱門

面向過程，就是按照我們分析了的步驟，按照步驟解決問題。

1.3 面向?qū)ο缶幊?OOP（Object - Oriented - Programming）

面向?qū)ο笫前咽聞辗纸獬蔀橐粋€個對象，然后由對象之間分工與合作。

舉個例子：將大象裝進冰箱，面向?qū)ο笞龇ā?/p>

先找出對象，并寫出這些對象的功能：

• 大象對象
  • 進去
• 冰箱對象
  • 打開
  • 關閉
• 使用大象和冰箱的功能

面向?qū)ο笫且詫ο蠊δ軄韯澐謫栴}，而不是步驟。

在面向?qū)ο蟪绦蜷_發(fā)思想中，每一個對象都是功能中心，具有明確分工。

面向?qū)ο缶幊叹哂徐`活、代碼可復用、容易維護和開發(fā)的優(yōu)點，更適合多人合作的大型軟件項目。

面向?qū)ο蟮奶匦裕?/strong>

• 封裝性
• 繼承性
• 多態(tài)性

1.4 面向過程和面向?qū)ο蟮膶Ρ?/h3>

面向過程

• 優(yōu)點：性能比面向?qū)ο蟾?，適合跟硬件聯(lián)系很緊密的東西。例如：單片機就采用的面向過程編程。
• 缺點：沒有面向?qū)ο笠拙S護，易復用、易擴展。

面向?qū)ο螅?/p>

• 優(yōu)點：易維護、易復用，由于面向?qū)ο笥蟹庋b、繼承、多態(tài)性的特性，可以設計出低耦合的系統(tǒng)，使系統(tǒng)更加靈活，更加易于維護。
• 缺點：性能比面向過程低。

2. ES6 中的類和對象

面向?qū)ο?/p>

面向?qū)ο蟾N近我們的實際生活，可以使用面向?qū)ο竺枋霈F(xiàn)實世界事物，但是事物分為具體的事物和抽象的事物。

面向?qū)ο蟮乃季S特點：

• 抽取（抽象）對象共用的屬性和行為組織（封裝）成一個類（模板）
• 對類進行實例化，獲取類的對象

面向?qū)ο缶幊涛覀兛紤]的是有哪些對象，按照面向?qū)ο蟮乃季S特點。不斷的創(chuàng)建對象， 使用對象，指揮對象做事情。

2.1 對象

現(xiàn)實生活中：萬物皆對象，對象是一個具體的事物，看得見摸得著的事物。例如：一本書、一輛汽車、一個人可以是 “對象”,一個數(shù)據(jù)庫，一個網(wǎng)頁、一個遠程服務器的連接也可以是 “對象”。

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

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

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

2.2 類 class

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

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

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

2.3 創(chuàng)建類

語法：

    class Star {      // class body    }

創(chuàng)建實例：

    var xx = new Star();

注意：類必須使用 new 實例化對象

2.4 類 constructor 構(gòu)造函數(shù)

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

  <script>
    // 1. 創(chuàng)建類 class 創(chuàng)建一個 明星類
    class Star {
      constructor(uname, age) {
        this.uname = uname;
        this.age = age;
      }
    }
    // 2. 利用類創(chuàng)建對象 new
    var ldh = new Star("劉德華", 18);
    var zxy = new Star("張學友", 20);
    console.log(ldh);
    console.log(zxy);
    // (1) 通過class關鍵字創(chuàng)建類 類名我們還是習慣性定義首字母大寫
    // (2) 類里面有個 constructor 函數(shù)，可以接受傳遞過來的參數(shù) 同時返回實例對象
    // (3) constructor 函數(shù) 只要 new 生成實例對象，就會自動調(diào)用這個函數(shù)，如果我們不寫這個函數(shù)，類會也會自動生成這個函數(shù)
    // (4) 生成實例 new 不能省略
    // (5) 最后注意語法規(guī)范，創(chuàng)建類 類名后面不要加小括號，生成實例 類名后面加小括號 構(gòu)造函數(shù)不需要加 function
  </script>

2.5 類添加方法

語法：

    class Person {
      constructor(name, age) {
        // 構(gòu)造器或者構(gòu)造函數(shù)
        this.name = name;
        this.age = age;
      }
      say() {
        console.log(this.name + "您好");
      }
    }

  <script>
    // 1. 創(chuàng)建類 class 創(chuàng)建一個 明星類
    class Star {
      constructor(uname, age) {
        this.uname = uname;
        this.age = age;
      }
      sing(song) {
        // console.log("我唱歌");
        console.log(this.uname + song);
      }
    }
    // (1) 我們類里面所有的函數(shù)需要寫 function
    // (2) 多個函數(shù)方法之間不需要添加逗號分割
    // 2. 利用類創(chuàng)建對象 new
    var ldh = new Star("劉德華", 18);
    var zxy = new Star("張學友", 20);
    console.log(ldh);
    console.log(zxy);
    ldh.sing("冰雨");
    zxy.sing("哈哈");
  </script>

3. 類的繼承

3.1 繼承

現(xiàn)實中的繼承：子繼承父業(yè)，比如我們都繼承了父親的姓。

程序中的繼承：子類可以繼承父類的一些屬性和方法。

語法：

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

3.2 super關鍵字

super 關鍵字用于訪問和調(diào)用對象父類上的函數(shù)，可以調(diào)用父類的構(gòu)造函數(shù)，也可以調(diào)用父類的普通函數(shù)。

語法：

  <script>
    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); // 調(diào)用了父類里面的構(gòu)造函數(shù)
      }
    }
    var son = new Son(1, 2);
    var son1 = new Son(11, 22);
    son.sum(); // 3
    son1.sum(); // 33
  </script>

  <script>
    class Father {
      say() {
        return "我是爸爸";
      }
    }
    class Son extends Father {
      say() {
        // console.log("我是兒子");
        console.log(super.say() + "的兒子");
        // super.say() 就是調(diào)用父類中的普通函數(shù) say()
      }
    }
    var son = new Son();
    son.say();
    // 繼承中的屬性或者方法查找原則：就近原則
    // 1. 繼承中，如果實例化子類輸出一個方法，先看子類有沒有這個方法，如果有就先執(zhí)行子類的方法
    // 2. 繼承中，如果子類里面沒有，就去查找父類有沒有這個方法，如果有，就執(zhí)行父類的這個方法(就近原則)
  </script>

語法：

  <script>
    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 調(diào)用父類的構(gòu)造函數(shù)
        // super 必須在字類this之前調(diào)用
        super(x, y);
        this.x = x;
        this.y = y;
      }
      sub() {
        console.log(this.x - this.y);
      }
    }
    var son = new Son(5, 3);
    son.sum();
    son.sub();
  </script>

注意：子類在構(gòu)造函數(shù)中使用 super，必須放到 this 前面（必須先調(diào)用父級的構(gòu)造方法，在使用子類的構(gòu)造方法）

4. 三個注意點：

1.在 ES6 中類沒有變量提升，所以必須先定義類，才能通過類實例化對象

2.類里面的共有屬性和方法一定要加 this 使用

3.類里面的 this 指向問題

4.constructor里面的的 this 指向?qū)嵗龑ο?，方法里面?this 指向這個方法的調(diào)用者

  <body>
    <button>按鈕</button>
  </body>
  <script>
    var that;
    var _that;
    class Star {
      constructor(uname, age) {
        // constructor 里面的 this 指向的是 創(chuàng)建的實例對象
        that = this;
        this.uname = uname;
        this.age = age;
        // this.sing();
        this.btn = document.querySelector("button");
        this.btn.onclick = this.sing;
      }
      sing() {
        // 這個 sing 方法里面的this 指向的是 btn 這個按鈕，因為這個按鈕調(diào)用了這個函數(shù)
        console.log(this);
        console.log(that.uname);
      }
      dance() {
        // console.log(this);
        // 這個方法里面的 this 指向的是實例化對象 ldh 因為ldh調(diào)用了這個函數(shù)
        // 誰調(diào)用就指向誰
        _that = this;
      }
    }
    var ldh = new Star("劉德華");
    console.log(that === ldh); // true
    ldh.dance(); // 調(diào)用
    console.log(_that === ldh); // false
  </script>

總結(jié)

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內(nèi)容!     

您可能感興趣的文章:

• JavaScript面向?qū)ο缶幊虒崿F(xiàn)模擬
• JavaScript面向?qū)ο髮崿F(xiàn)貪吃蛇游戲
• javascript的面向?qū)ο缶幊桃黄饋砜纯?/a>
• TypeScript面向?qū)ο蟪敿毞治?/a>

• JavaScript
• 面向?qū)ο?/a>

相關文章

• 

  防止Layui form表單重復提交的實現(xiàn)方法

  今天小編就為大家分享一篇防止Layui form表單重復提交的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

  2019-09-09
• 

  JS運行耗時操作的延時顯示方法

  今天用JS允許一個ActiveX，挺耗時的，想在允許時提示用戶正在允許，而不至于漏斗在那里

  2010-11-11
• 

  用簡單的腳本實現(xiàn)一款漂亮的下拉菜單

  用簡單的腳本實現(xiàn)一款漂亮的下拉菜單...

  2006-12-12
• 

  微信小程序版本自動更新的方法

  這篇文章主要介紹了微信小程序版本自動更新的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

  2019-06-06
• 

  Javascript頁面跳轉(zhuǎn)常見實現(xiàn)方式匯總

  這篇文章主要介紹了Javascript頁面跳轉(zhuǎn)常見實現(xiàn)方式,結(jié)合實例匯總分析了JavaScript常用的七種頁面跳轉(zhuǎn)實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下

  2015-11-11
• 

  JavaScript常用正則驗證函數(shù)實例小結(jié)【年齡,數(shù)字,Email,手機,URL,日期等】

  這篇文章主要介紹了JavaScript常用正則驗證函數(shù),結(jié)合實例形式總結(jié)分析了javascript針對年齡、數(shù)字、Email、手機、URL、日期等格式常用正則驗證技巧,需要的朋友可以參考下

  2017-01-01
• 

  詳解JS變量存儲深拷貝和淺拷貝

  這篇文章主要介紹了JS變量存儲深拷貝和淺拷貝,想深入了解JS的同學，可以參考下

  2021-05-05
• 

  JS字符串轉(zhuǎn)換為數(shù)組的4 個方法示例小結(jié)

  這篇文章主要介紹了JS字符串轉(zhuǎn)換為數(shù)組的4 個方法示例小結(jié),本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧

  2023-12-12
• 

  關于List.ToArray()方法的效率測試

  這篇文章主要介紹了關于List.ToArray()方法的效率測試的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下

  2016-09-09
• 

  JS JSOP跨域請求實例詳解

  JSONP(JSON with Padding)是JSON的一種“使用模式”，可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問的問題。這篇文章主要介紹了JS JSOP跨域請求實例詳解的相關資料,需要的朋友可以參考下

  2016-07-07

最新評論