JavaScript >> Javascript 文檔 >  >> Tags >> PHP

面向對像模式:JavaScript 類和 PHP 類

我為 DigitalOcean 寫了一篇關於理解 JavaScript 中的原型和繼承的文章,其中我解釋瞭如何使用構造函數並創建從它們繼承的新對象。我認為重寫與 JavaScript ES6 類和 PHP 類完全相同的代碼並獲得相同的輸出會很有趣。所以這裡是 ES5、ES6 和 PHP 中相同模式和輸出的並排比較。

使用 ES6 類,我將解釋該模式在做什麼。

我們將創建一個類(對象藍圖)並擴展該類(繼承)。我以 RPG 角色類為例。

// Creating a class
class Hero {}

// Extending a class
class Warrior extends Hero {}

我將添加一個 constructor() 為類分配兩個參數的函數。

class Hero {
  // Assigning parameters with constructor
  constructor(name, level) {
    this.name = name
    this.level = level
  }
}

// Extending a class
class Warrior extends Hero {}

我也會添加一個方法。

class Hero {
  constructor(name, level) {
    this.name = name
    this.level = level
  }

  // Adding a method
  greet() {
    return `${this.name} says hello.`
  }
}

class Warrior extends Hero {}

我們現在將編輯繼承的類,添加一個新參數。我們使用 super() 從父級訪問參數 - 否則繼承的類將無法訪問和使用它們。

class Hero { ... }

class Warrior extends Hero {
    // Adding a constructor
    constructor(name, level, weapon) {
        // Access and call function from parent
        super(name, level);

        this.weapon = weapon;
    }
}

最後,我們將在擴展類中添加一個方法。

class Hero {}

class Warrior extends Hero {
  constructor(name, level, weapon) {
    super(name, level)

    this.weapon = weapon
  }

  // Adding a method
  attack() {
    return `${this.name} attacks with the ${this.weapon}.`
  }
}

現在類和擴展類的藍圖已經準備好了,我們可以創建一個新角色,它可以訪問原始類和擴展類的參數和方法。

// Initialize individual character instance
const hero1 = new Warrior('Bjorn', 1, 'axe')

console.log(hero1.attack())
console.log(hero1.greet())

JS構造函數和類以及PHP類的完整代碼和輸出如下。

JavaScript ES6 類

class 關鍵字是在 ES6 中引入的。類是基於 JavaScript 中的原型構建的。

classes-es6.js
class Hero {
  constructor(name, level) {
    this.name = name
    this.level = level
  }

  greet() {
    return `${this.name} says hello.`
  }
}

class Warrior extends Hero {
  constructor(name, level, weapon) {
    // Access and call function from parent
    super(name, level)

    this.weapon = weapon
  }

  attack() {
    return `${this.name} attacks with the ${this.weapon}.`
  }
}

// Initialize individual character instance
const hero1 = new Warrior('Bjorn', 1, 'axe')

console.log(hero1.attack())
console.log(hero1.greet())
輸出
Bjorn attacks with the axe.
Bjorn says hello.

JavaScript ES5 構造函數

創建 JavaScript 構造函數是為了將傳統的面向對像類設計的功能引入 JavaScript 語言。

構造函數-es5.js
function Hero(name, level) {
  this.name = name
  this.level = level
}

function Warrior(name, level, weapon) {
  // Access and call function from parent
  Hero.call(this, name, level)

  this.weapon = weapon
}

// Link prototypes and add prototype methods
Warrior.prototype = Object.create(Hero.prototype)

Hero.prototype.greet = function () {
  return this.name + ' says hello.'
}

Warrior.prototype.attack = function () {
  return this.name + ' attacks with the ' + this.weapon + '.'
}

// Initialize individual character instance
const hero1 = new Warrior('Bjorn', 1, 'axe')

console.log(hero1.attack())
console.log(hero1.greet())
輸出
Bjorn attacks with the axe.
Bjorn says hello.

PHP 類

下面是一個 PHP 類構造函數的簡單示例。

類-php.php

<?php

class Hero {
    public function __construct($name, $level) {
        $this->name = $name;
        $this->level = $level;
    }
    public function greet() {
        return "{$this->name} says hello.";
    }
}

class Warrior extends Hero {
    public function __construct($name, $level, $weapon) {
        // Access and call function from parent
        parent::__construct($name, $level, $weapon);

        $this->weapon = $weapon;
    }

    public function attack() {
        return "{$this->name} attacks with the {$this->weapon}.";
    }
}

// Initialize individual character instances
$hero1 = new Warrior('Bjorn', 1, 'axe');

echo $hero1->attack();
echo $hero1->greet();
輸出
Bjorn attacks with the axe.
Bjorn says hello.

當然,JavaScript 類是原型之上的“語法糖”(呃),這意味著在底層,ES6 類實際上並沒有運行在面向對象的繼承模型上。然而,像 React 這樣的流行庫往往會大量使用類,所以很高興知道它們。 PHP 示例展示了一個來自傳統面向對象系統的實際類,但是通過這個簡單的示例,我們可以得到相同的輸出。

就個人而言,我更喜歡語法鹽。


Tutorial JavaScript 教程
  1. JavaScript,獲取輸入字段的值

  2. TypeScript 頌歌❤

  3. Javascript 迭代器和生成器函數很慢!

  4. 使用純 HTML 和 CSS 的響應式側邊欄菜單。

  5. 編寫你的第一個 React 鉤子

  6. 揭秘函數

  7. 如何在沒有 html 標記的情況下呈現 React Quill 的內容?

  1. 在 JavaScript 中從數組中刪除元素,帶有示例

  2. 創建一個 Fastify 服務器

  3. 第 10 天 #100daysofcode

  4. 使用 Django 繪製地圖(第 1 部分):GeoDjango、SpatiaLite 和 Leaflet

  5. tsParticles 1.39.3 發布

  6. GraphQL CLI 4.1 中的新功能

  7. 為什麼 RunKit 是 Node.js 的最佳 REPL

  1. 電子大冒險:第 69 集:打開文件

  2. 如何創建 youtube 克隆。帶有 HTML、CSS、JS 的 Youtube 克隆。

  3. 為微前端、瀏覽器、節點提供更好的 JS 日誌記錄

  4. Nubank 和 Alura 創建的階段