ES5 和 ES6的繼承

阿新 • • 發佈：2021-07-12

ES5：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
    //定義建構函式
    function Person(name, age){
      this.name=name;
      this.age=age;
    }
    //在原型 prototype 上定義方法
    Person.prototype.show= 
function (){
      alert(this.name);
      alert(this.age);
    };
    //用到類的時候，例項化 new 一個
    let p = new Person("blue",18);
    p.show();

    //ES5的繼承-------------------------------------------
    //定義子類的建構函式
    function Worker(name, age, job){
      Person.call(this, name, age);
      this.job=job;
    }

    Worker.prototype 
=new Person();  //繼承父類的 prototype
    //繼承父類的prototype後，自身的 constructor 會亂掉，需要還原一下
    Worker.prototype.constructor=Worker;  

    //新增 Worker 自己的方法
    Worker.prototype.showJob=function (){
      alert(this.job);
    };

    let w=new Worker('blue', 18, '打雜的');

    w.show();
    w.showJob();
    </script 
>
  </head>
  <body>

  </body>
</html>

ES6：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
    //ES6的面向物件 ，class 用來專門宣告類的
    class Person{
      constructor(name, age){ // constructor 建構函式
        this.name=name;
        this.age=age;
      }

      show(){ // 直接在class裡面寫方法
        alert(this.name);
        alert(this.age);
      }
    }

    //ES6的繼承--------------------------------------

    class Worker extends Person{  // 告訴系統 Worker 繼承於 Person
      constructor(name, age, job){  // 子類的constructor，引數比父類只多不少
        super(name, age); //調父類的建構函式，用super關鍵字把需要的父類的引數傳過來，需要什麼就傳什麼
        this.job=job; //子類自己的引數
      }

      showJob(){  //加上自己需要的，子類的方法
        alert(this.job);
      }
    }

    //類的使用方法和 ES5 沒什麼不同，例項化
    let w=new Worker('blue', 18, '打雜的');

    w.show(); //調父類的方法
    w.showJob();  //調自己的方法

    /*
      
     */
    </script>
  </head>
  <body>

  </body>
</html>

ES5 和 ES6的繼承

ES5： <!DOCTYPE html> <html lang=\"en\" dir=\"ltr\"> <head> <meta charset=\"utf-8\">

ES5和ES6的區別以及ES6常用特性

ECMAScript是ECMA International定義的商標指令碼語言規範。建立它是為了標準化JavaScript。 ES指令碼語言具有許多實現，流行的實現是JavaScript。通常，ECMAScript用於全球資訊網的客戶端指令碼。ES5是ECMAScript

ES5和ES6的區別（let和var）

<body><button>Click1</button><button>Click2</button><button>Click3</button><button>Click4</button><button>Click5</button></body>

ES5和ES6陣列常見方法總結

ES5常見方法 1，棧方法（LIFO）後進先出： push() 往陣列尾部新增元素 pop()從陣列尾部移除元素，並返回該元素,同時陣列長度減1

ES5和ES6中類的區別總結

類定義與呼叫的區別在 ES5 中主要是通過建構函式方式和原型方式來定義一個類，但是在 ES6 新引入了 class 關鍵字，使之具有了正式類的能力，類（class）是ECMAScript 中新的基礎性語法糖結構。雖然 ES6 類表面上看

分析ES5和ES6的apply區別

概述眾所周知， ES6 新增了一個全域性、內建、不可構造的Reflect物件，並提供了其下一系列可被攔截的操作方法。其中一個便是Reflect.apply()了。下面探究下它與傳統 ES5 的Function.prototype.apply()之間有什麼異同

es5，es6和typescript的類，繼承對比，簡易版

技術標籤：前端javascripttypescriptclass es5是通過建構函式和原型鏈上新增實現類 function Person (name) {

react native text換行_React 的ES5 語法和 ES6 語法有何不同？

技術標籤：react native text換行大家在用react開發專案時，常常會對react的兩種規範的語法有所困惑。今天為大家整理一下主要的幾個不同點。

Node.js基礎語法和ES6新屬性（Node.js自學第一天）

Node.js從4.0開始，支援ES6的大多數新特性，例如：classes、typed arrays、generators、Promises、Symbols、collections、arrowfunctions、block scoping、template strings等。

詳解node和ES6的模組匯出與匯入

node的匯出與匯入 1.node的匯出語法　　var path = {} 　　module.exports = path 2.node的匯入語法

ES5 模擬 ES6 的 Symbol 實現私有成員功能示例

本文例項講述了ES5 模擬 ES6 的 Symbol 實現私有成員功能。分享給大家供大家參考，具體如下：

05 Python 類的繼承和多繼承

在面向物件的程式設計中，定義一個新的 class 的時候，可以從某個現有的 class 繼承，新的 class 稱為子類，而被繼承的 class 稱為基類、父類或超類。

CommonJS 和 ES6 Module 究竟有什麼區別？

CommonJS 和 ES6 Module 究竟有什麼區別？作為前端開發者，你是否也曾有過疑惑，為什麼可以程式碼中可以直接使用 require 方法載入模組，為什麼載入第三方包的時候 Node 會知道選擇哪個檔案作為入口，以及常被問到

jquery的promise和es6的promise的區別

大概意思是：瀏覽器中的任務佇列不止一個，且優先順序也不同。基本上可以分為如下兩種：macro-task: script（整體程式碼）, setTimeout, setInterval, setImmediate, I/O, UI renderingmicro-task: process.nextTic