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

JavaScript的面向?qū)ο竽懔私鈫?/h1>
 更新時(shí)間：2022年03月17日 15:59:40   作者：BloggerM  
這篇文章主要為大家詳細(xì)介紹了JavaScript的面向?qū)ο螅闹惺纠a介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

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

1.1 兩大編程思想

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

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

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

舉個(gè)例子：將大象裝進(jìn)冰箱，面向過程做法。

1.打開冰箱

2.大象裝進(jìn)去

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

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

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

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

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

先找出對(duì)象，并寫出這些對(duì)象的功能：

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

面向?qū)ο笫且詫?duì)象功能來劃分問題，而不是步驟。

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

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

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

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

1.4 面向過程和面向?qū)ο蟮膶?duì)比

面向過程

  • 優(yōu)點(diǎn)：性能比面向?qū)ο蟾撸m合跟硬件聯(lián)系很緊密的東西。例如：?jiǎn)纹瑱C(jī)就采用的面向過程編程。
  • 缺點(diǎn)：沒有面向?qū)ο笠拙S護(hù)，易復(fù)用、易擴(kuò)展。

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

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

2. ES6 中的類和對(duì)象

面向?qū)ο?/p>

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

面向?qū)ο蟮乃季S特點(diǎn)：

  • 抽?。ǔ橄螅?duì)象共用的屬性和行為組織（封裝）成一個(gè)類（模板）
  • 對(duì)類進(jìn)行實(shí)例化，獲取類的對(duì)象

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

2.1 對(duì)象

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

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

對(duì)象是由屬性和方法組成的：

  • 屬性：事物的特性，在對(duì)象中用屬性來表示（常用名詞）
  • 方法：事物的行為，在對(duì)象中用方法來表示（常用動(dòng)詞）

2.2 類 class

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

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

對(duì)象特指某一個(gè)，通過類實(shí)例化一個(gè)具體的對(duì)象

2.3 創(chuàng)建類

語(yǔ)法：

    class Star {      // class body    }

創(chuàng)建實(shí)例：

    var xx = new Star();

注意：類必須使用 new 實(shí)例化對(duì)象

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

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

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

2.5 類添加方法

語(yǔ)法：

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

3. 類的繼承

3.1 繼承

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

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

語(yǔ)法：

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

3.2 super關(guān)鍵字

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

語(yǔ)法：

  <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. 繼承中，如果實(shí)例化子類輸出一個(gè)方法，先看子類有沒有這個(gè)方法，如果有就先執(zhí)行子類的方法
    // 2. 繼承中，如果子類里面沒有，就去查找父類有沒有這個(gè)方法，如果有，就執(zhí)行父類的這個(gè)方法(就近原則)
  </script>

語(yǔ)法：

  <script>
    class Father {
      constructor(x, y) {
        this.x = x;
        this.y = y;
      }
      sum() {
        console.log(this.x + this.y);
      }
    }
    // 子類繼承父類加法方法 同時(shí) 擴(kuò)展減法方法
    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)用父級(jí)的構(gòu)造方法，在使用子類的構(gòu)造方法）

4. 三個(gè)注意點(diǎn)：

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

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

3.類里面的 this 指向問題

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

  <body>
    <button>按鈕</button>
  </body>
  <script>
    var that;
    var _that;
    class Star {
      constructor(uname, age) {
        // constructor 里面的 this 指向的是 創(chuàng)建的實(shí)例對(duì)象
        that = this;
        this.uname = uname;
        this.age = age;
        // this.sing();
        this.btn = document.querySelector("button");
        this.btn.onclick = this.sing;
      }
      sing() {
        // 這個(gè) sing 方法里面的this 指向的是 btn 這個(gè)按鈕，因?yàn)檫@個(gè)按鈕調(diào)用了這個(gè)函數(shù)
        console.log(this);
        console.log(that.uname);
      }
      dance() {
        // console.log(this);
        // 這個(gè)方法里面的 this 指向的是實(shí)例化對(duì)象 ldh 因?yàn)閘dh調(diào)用了這個(gè)函數(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)文章

最新評(píng)論