关于ES6 class的编译，Class static的实现

现有代码如下:

class  Router{
	 constructor(router) {
     }
     static a(){
     }
    static c(){
     }
    b(){
      
    }
 
}

Router.b()

因为我们想通过Router.a,Router.b这种方式来调用方法a，和方法b，所以给ta添加了static

在JAVA里面，static修饰的方法属于类本身，不属于类的实例对象,可以通过类名直接调用static修饰的方法

如果我们需要把Class的static编译成ES2015会怎么处理呢，处理后代码如下：

"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 Router = function () {
  function Router(router) {
    _classCallCheck(this, Router);
  }

  _createClass(Router, [{
    key: "b",
    value: function b() {}
  }], [{
    key: "a",
    value: function a() {}
  }, {
    key: "c",
    value: function c() {}
  }]);

  return Router;
}();

Router.b();

可以发现添加了static的方法和其他并没有什么区别，static无效，在线查看

我们添加es5loose后，代码如下:在线查看

"use strict";

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

var Router = function () {
  function Router(router) {
    _classCallCheck(this, Router);
  }

  Router.a = function a() {};

  Router.c = function c() {};

  Router.prototype.b = function b() {};

  return Router;
}();

Router.b();

注意事项：

方法a和方法B成了Function的实例Router的属性，是一个实例的方法，
如果我们“let R=new Router()”的时候是无法通过“R.a(),R.b()”来获取到实例的方法的
实例方法属于某个“对象特有”
不要在static里面使用this，因为static理论上属于“类”而不属于实例，所有this指向的是类，

扫描二维码关注公众号，回复： 2139385 查看本文章

关于Function 实例：https://blog.csdn.net/xiaomogg/article/details/80088047

关于Class编译:https://babeljs.io/docs/plugins/transform-es2015-classes/

关于ES6 class的编译，Class static的实现

猜你喜欢