欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript的面向?qū)ο竽懔私鈫?/h1>
 更新時間：2022年03月17日 15:59:40   作者：BloggerM  
這篇文章主要為大家詳細介紹了JavaScript的面向?qū)ο?，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

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

1.1 兩大編程思想

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

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

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

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

1.打開冰箱

2.大象裝進去

3.關(guān)上冰箱門

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

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

面向?qū)ο笫前咽聞?wù)分解成為一個個對象，然后由對象之間分工與合作。

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

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

  • 大象對象
    • 進去
  • 冰箱對象
    • 打開
    • 關(guān)閉
  • 使用大象和冰箱的功能

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

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

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

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

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

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

面向過程

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

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

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

2. ES6 中的類和對象

面向?qū)ο?/p>

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

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

  • 抽?。ǔ橄螅ο蠊灿玫膶傩院托袨榻M織（封裝）成一個類（模板）
  • 對類進行實例化，獲取類的對象

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

2.1 對象

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

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

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

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

2.2 類 class

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

類抽象了對象的公共部分，它泛指某一大類（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關(guān)鍵字創(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關(guān)鍵字

super 關(guān)鍵字用于訪問和調(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é)

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

相關(guān)文章

最新評論