class to es5

1.Class

众所周知js是没有class的，但是es6却给了我们“类”的概念；
我们先写一个es6的类：

class TMP{
  constructor(){
    this.init()
  }
  init(){
    console.log("INIT")
  }
  static getName (){
    console.log("小鸟游六花")
  }
}

查看其转为ES5的代码，类其实是由原型链机制来实现的；将非静态属性绑定到类原型链上，静态属性绑定到类本身上，从而来实现class效果。

"use strict";

var _createClass = function () {
  function defineProperties(target, props) {
    for (var i = 0; i < props.length; i++) {
      var descriptor = props[i];
      descriptor.enumerable = descriptor.enumerable || false; 
      descriptor.configurable = true; 
      if ("value" in descriptor) descriptor.writable = true; 
      Object.defineProperty(target, descriptor.key, descriptor); 
    } 
  }
  return function (Constructor, protoProps, staticProps) { 
    if (protoProps) defineProperties(Constructor.prototype, protoProps); 
    if (staticProps) defineProperties(Constructor, staticProps); 
    return Constructor;
  };
}();

function _classCallCheck(instance, Constructor) { 
  if (!(instance instanceof Constructor)) { 
    throw new TypeError("Cannot call a class as a function"); 
  } 
}

var TMP = function () {
  function TMP() {
    _classCallCheck(this, TMP);
    this.init();
  }
  _createClass(TMP, [{
    key: "init",
    value: function init() {
      console.log(“INIT”);
    }
  }], [{
    key: "getName",
    value: function getName() {
      console.log("小鸟游六花");
    }
  }],);

  return TMP;
}();

所以在我们使用TMP上的static的getName方法时不可将其实例化

new TMP.getName()   // 会报错 TypeError: TMP.getName is not a constructor
TMP.getName()  // 正确  输出 ("小鸟游六花"

扩展一下，下面代码会输出什么呢

(new TMP).getName()   // INIT   Uncaught TypeError: (intermediate value).getName is not a function
new TMP().init()    // INIT    INIT 
new TMP().getName()      // INIT    VM3425:1 Uncaught TypeError: (intermediate value).getName is not a function
new TMP.init()    // TMP.init is not a constructor

2.let & const

老生常谈，以下for循环中问你输出:

function test(){
    for(var i=0;i<3;i++){
      setTimeout(function(){
        console.log(i)
      },0)
    }
}
test() 

明显输出三个3，之后问你怎么做才能输出1、2、3；只需要利用let便可简单实现

function test(){
    for(let i=0;i<3;i++){
      setTimeout(function(){
        console.log(i)
      },0)
    }
}
test() 

那么转义成es5时是如何实现的呢？

function test(){
  var _loop = function _loop(i) {
    setTimeout(function () {
      console.log(i);
    }, 0);
  };
  for (var i = 0; i < 3; i++) {
    _loop(i);
  }
}
test() 

可以看到在函数test体内声明个函数表达式，在for内调用时传入i来实现。