摘要：前端培訓初級階段語法變量值類型運算符語句前端培訓初級階段內置對象函數基礎內容知識我們會用到。模塊定義加載模塊繼承中的繼承依賴于原型鏈繼承。

前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術水平，打牢基礎知識的中心思想，我們開課啦（每周四）。

該文為前端培訓-初級階段（13、18）的補充內容 (介紹了 ECMAScript 歷史，ES6 常用點)。

本文介紹ECMAScript基礎知識。

前端培訓-初級階段（13） - ECMAScript （語法、變量、值、類型、運算符、語句）

前端培訓-初級階段（13） - ECMAScript （內置對象、函數）

基礎內容知識我們會用到。默認已讀。

js 中的類

js 中的模塊

js 中的繼承實現

在 JavaScript 中，類的實現是基于原型繼承機制的。如果兩個實例都從同一個原型對象上繼承了屬性，我們說它們是同一個類的實例。
ES6 提供了更接近傳統語言的寫法，引入了 Class（類）這個概念。通過class關鍵字，可以定義類。
ES6 的 Class 可以看作是一個語法糖，它的絕大部分功能，ES5 都可以做到，新的class寫法只是讓對象原型的寫法更加清晰、更像面向對象編程的語法而已。。

class Logger {
  constructor(wigName) {
    this.wigName = wigName;
  }

  warn(info) {
    return console.log(`${this.wigName}-${info}`)
  }
}
logger = new Logger("lilnong.top")
logger.warn("404")
//ES5 中怎么寫
function Logger(wigName){this.wigName = wigName;}
Logger.prototype.warn = function(info){
    return console.log(`${this.wigName}-${info}`)
}
logger = new Logger("lilnong.top-ES5")
logger.warn("404")

如圖 ES6 其實也還是在prototype上

ES6 的 Class還有一些特殊的功能，比如必須通過 new 來實例化。那么我們的 ES5 怎么來實現這個功能？（話說 ES6 怎么在低版本實現可以去在線 babel）

function fun(){console.log(new.target)};console.log(fun(),new fun())通過新加的 new.target來區分。

function fun(){console.log(this instanceof fun)};console.log(fun(),new fun())這個方法就是通過 new 的特性是判斷，面試題new的時候系統做了幾步操作

創建一個空對象

空對象綁在 this 上

然后調用

歷史上，JavaScript 一直沒有模塊（module）體系，無法將一個大程序拆分成互相依賴的小文件，再用簡單的方法拼裝起來。其他語言都有這項功能，比如 Ruby 的require、Python 的import，甚至就連 CSS 都有@import，但是 JavaScript 任何這方面的支持都沒有，這對開發大型的、復雜的項目形成了巨大障礙。
在 ES6 之前，社區制定了一些模塊加載方案，最主要的有 CommonJS 和 AMD 兩種。前者用于服務器，后者用于瀏覽器。ES6 在語言標準的層面上，實現了模塊功能，而且實現得相當簡單，完全可以取代 CommonJS 和 AMD 規范，成為瀏覽器和服務器通用的模塊解決方案。
ES6 模塊的設計思想是盡量的靜態化，使得編譯時就能確定模塊的依賴關系，以及輸入和輸出的變量。CommonJS 和 AMD 模塊，都只能在運行時確定這些東西。比如，CommonJS 模塊就是對象，輸入時必須查找對象屬性。

// CommonJS模塊
let { stat, exists, readFile } = require("fs");

// ES6模塊
export { stat, exists, readFile };
import { stat, exists, readFile } from "fs";

ES6 的模塊功能主要由兩個命令構成：export和import。export命令用于規定模塊的對外接口，import命令用于輸入其他模塊提供的功能。當然現在瀏覽器還不支持

CommonJS(NodeJS)
require引入模塊是同步的,但script標簽引入JS是異步的, 因此CommonJS在瀏覽器環境下無法正常加載(無法處理依賴問題)。

   //模塊定義 myModule.js
   var name = "Byron";
   function printName(){
       console.log(name);
   }
   module.exports = {
       printName: printName,
   }
   //加載模塊
   var myModule = require("./myModule.js");
   myModule.printName();

AMD(RequireJS)
AMD: Asynchronous Module Definition(異步模塊定義)。AMD模塊中所有的依賴都前置，require指定的回調函數，只有前面的模塊都加載成功后，才會運行，解決了依賴性的問題。

   // 定義模塊 myModule.js
   //define([依賴的模塊]，定義模塊的代碼)
   define(function(){
       var name = "Byron";
       function printName(){
           console.log(name);
       }
       return {
           printName: printName
       };
   });
   
   // 加載模塊
   //require([依賴的模塊],callback(依賴名))
   
   require(["myModule.js"], function (myModule){
   　 myModule.printName();
   });

CMD(SeaJS)
CMD: Common Module Definition(通用模塊定義), 推崇依賴就近原則(也就是懶加載),模塊內部的依賴在需要引入的時候再引入.

// 定義模塊  myModule.js
define(function(require, exports, module) {
  var $ = require("jquery.js");
  var foo = require("foo");
  var out = foo.bar();
  $("div").addClass("active");
  module.exports = out;
});

// 加載模塊
seajs.use(["myModule.js"], function(myModule){

});

UMD
UMD: 兼容AMD、CMD和commonJS規范的同時，還兼容全局引用的方式 例子:

   //moduleName.js
   ;(function (global) {
       function factory () {
           var moduleName = {};
           return moduleName;
       }
       //CommonJS
       if (typeof module !== "undefined" && typeof exports === "object") {
           module.exports = factory();
       } else if (typeof define === "function" && (define.cmd || define.amd)) { //AMD || CMD
           define(factory);
       } else { //script標簽
           global.moduleName = factory();
       }
   })(typeof window !== "undefined" ? window : global);
   UMD模塊在不同環境引入:
   
   // Node.js
   var myModule = require("moduleName");
   // SeaJs
   define(function (require, exports, module) {
       var myModule = require("moduleName");
   });
   // RequireJs
   define(["moduleName"], function (moduleName) {
   
   });
   // Browse global
   

ES6模塊(import,export)
可以取代CommonJS和AMD規范,是瀏覽器和服務器通用的模塊解決方案。

   //模塊定義 myModule.js
   var name = "Byron";
   function printName(){
       console.log(name);
   }
   const myModule = {
       printName: printName,
   };
   export myModule;
   
   //加載模塊
   import myModule from "./myModule.js";
   myModule.printName();

js 中的繼承依賴于 原型鏈繼承。

function Fun(){};//聲明一個方法
Fun.prototype.toAuthor = ()=>console.log("linong");//在他的原型上綁定一個方法
var fun = new Fun();//實例化一下
fun.toAuthor()//調用方法，
fun.toAuthor = ()=>console.log("lilnong.top");//覆蓋這個方法
fun.toAuthor();//調用，這個時候在自己這里找到了，就不會去調用原型上的方法了

fun.__proto__ == Fun.prototype //實例上是__proto__ ，構造函數上是prototype

主講人文章-2019.04.11

ECMAScript 6 入門