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

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

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

本文介紹ECMAScript基礎(chǔ)知識。

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

前端培訓(xùn)-初級階段（13） - ECMAScript （內(nèi)置對象、函數(shù)）

基礎(chǔ)內(nèi)容知識我們會用到。默認(rèn)已讀。

js 中的類

js 中的模塊

js 中的繼承實(shí)現(xiàn)

在 JavaScript 中，類的實(shí)現(xiàn)是基于原型繼承機(jī)制的。如果兩個實(shí)例都從同一個原型對象上繼承了屬性，我們說它們是同一個類的實(shí)例。
ES6 提供了更接近傳統(tǒng)語言的寫法，引入了 Class（類）這個概念。通過class關(guān)鍵字，可以定義類。
ES6 的 Class 可以看作是一個語法糖，它的絕大部分功能，ES5 都可以做到，新的class寫法只是讓對象原型的寫法更加清晰、更像面向?qū)ο缶幊痰恼Z法而已。。

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 其實(shí)也還是在prototype上

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

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

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

創(chuàng)建一個空對象

空對象綁在 this 上

然后調(diào)用

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

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

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

ES6 的模塊功能主要由兩個命令構(gòu)成：export和import。export命令用于規(guī)定模塊的對外接口，import命令用于輸入其他模塊提供的功能。當(dāng)然現(xiàn)在瀏覽器還不支持

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

   //模塊定義 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指定的回調(diào)函數(shù)，只有前面的模塊都加載成功后，才會運(yùn)行，解決了依賴性的問題。

   // 定義模塊 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(通用模塊定義), 推崇依賴就近原則(也就是懶加載),模塊內(nèi)部的依賴在需要引入的時候再引入.

// 定義模塊  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規(guī)范的同時，還兼容全局引用的方式 例子:

   //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標(biāo)簽
           global.moduleName = factory();
       }
   })(typeof window !== "undefined" ? window : global);
   UMD模塊在不同環(huán)境引入:
   
   // 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規(guī)范,是瀏覽器和服務(wù)器通用的模塊解決方案。

   //模塊定義 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();//實(shí)例化一下
fun.toAuthor()//調(diào)用方法，
fun.toAuthor = ()=>console.log("lilnong.top");//覆蓋這個方法
fun.toAuthor();//調(diào)用，這個時候在自己這里找到了，就不會去調(diào)用原型上的方法了

fun.__proto__ == Fun.prototype //實(shí)例上是__proto__ ，構(gòu)造函數(shù)上是prototype

主講人文章-2019.04.11

ECMAScript 6 入門