前端培训-初级阶段（13） - 类、模块、继承

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。

该文为前端培训-初级阶段（13、18）的补充内容 (介绍了 ECMAScript 历史，ES6 常用点)。

本文介绍ECMAScript基础知识。

前端培训-初级阶段（13） - ECMAScript （语法、变量、值、类型、运算符、语句）
前端培训-初级阶段（13） - ECMAScript （内置对象、函数）

基础内容知识我们会用到。默认已读。

我们要讲什么

js 中的类
js 中的模块
js 中的继承实现

类

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的时候系统做了几步操作
1. 创建一个空对象
2. 空对象绑在 this 上
3. 然后调用

模块

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

// ES6模块
export { stat, exists, readFile };
import { stat, exists, readFile } from 'fs';

ES6 的模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。当然现在浏览器还不支持

模块规范（CommonJSAMDCMDUMD）

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
   <script src="moduleName.js"></script>

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 入门