首页 > 代码库 > ES6转换为ES5

ES6转换为ES5

1.静态函数

  1.什么是静态函数

  静态函数最重要的就是不用创建一个实例变量就可以进行调用,在C++里面,无法访问this对象,

  而在JS里面由于js的this对象支持,是可以访问this对象,只是this对象有所不同

  2.ES6静态函数代码

classtestClass{    static staticFunc(){    console.log("instatic")    }}

将会被babel转换为:

"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;            //利用defineProperty来创建函数            Object.defineProperty(target, descriptor.key, descriptor);        }    }    //创建函数,根据传入的数组创建成员函数和静态函数    return function (Constructor, protoProps, staticProps)    {        //注意这里,传入的是Constructor.prototype和Constructor        //所以可以区分是静态函数还是成员函数        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 testClass = function () {    function testClass() {        /*         *这是是为了保证这个class只能new出来,在usestrict模式下,this是undefined,         *正常模式下,this为window,也就是说我们这直接调用这个函数,_classCallCheck的时候将会抛出异常         **/        _classCallCheck(this, testClass);    }    _createClass(testClass, null, [{        key: "staticFunc",        value: function staticFunc() {            console.log("instatic");        }    }]);    return testClass;}();testClass.staticFunc();

2.=>符号

=>符号的出现是为了解决this作用域改变的问题

function test(){    this.x = 5;    this.f = function(){        console.log(this.x)    }}    let xx = new test();xx.f.call(this);    

在上面的代码里面,本来是期望回调的时候log输出5的,但是此时call的时候this被修改为全局,所以将会产生错误,因为全局里面并没有x

function test(){    this.x = 5;    this.f = ()=>{        console.log(this.x)    }}let xx = new test();xx.f.call(this);

将代码修改为上面的代码后,即可正常输出5

"use strict";function test() {    var _this = this;     //通过创建一个临时的_this变量来规避this改变的问题    this.x = 5;    this.f = function () {        console.log(_this.x);    };}    var xx = new test();xx.f.call(undefined);     //在babel默认的use strict模式下,是不会有默认的全局this的

3.解构参数

/*这里只是单纯地翻译* var a=arr[0]* var b=arr[1]* var c=arr[2]* */let arr = [1,2,3];let [a, b, c] = arr;/** 这里也只是由编译器自动生成分割的语法,有点类似于erlang的语法* var head = 1;* var second = 2;* var tail = [3, 4]* */{    let [head,second, ...tail] = [1, 2, 3, 4];}{    /**     * 这里暂时不管yiled是怎么转换的,转换完的代码后:     * var first = _fibs[0]     * var second = _fibs[1]     * var three = _fibs[2]     * 还是自动生成与语法糖     */    function* fibs() {        var a = 0;        var b = 1;        while (true) {            yield a;            [a, b] = [b, a + b];        }    }    var [first, second, third, fourth, fifth, sixth] = fibs();}{    /*    * 跟之前的大同小异,    * var _foo$bar = { foo: “lorem", bar: "ipsum" };    * var bar = _foo$bar.bar;    * var foo = _foo$bar.foo;    * */    var { bar, foo } = { foo: "lorem", bar: "ipsum" };    function t(a){        if(a == 0 ){            return [1, 2, 3];        }        else{            return [];        }    }    let [a, b, c] = t(0);    let [d=1, e=2, f] = t(1);    console.log(d)}

4.默认参数,不定参数,扩展参数

/** 主要是利用arguments取得所有的参数,然后从1开始,把参数都取出来,如果是a, b,...tail则会从2开始*  for (var _len = arguments.length, needles = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {*   needles[_key - 1] = arguments[_key];*  }* */function containsAll(haystack,...tail) {    console.log(arguments.length)}containsAll(1, 2,3,4);//判断arguments的[0]是否为undefined//var a = arguments.length <= 0 || arguments[0] === undefined ? ‘11‘ : arguments[0];function containsAll2(a = ‘11‘){    console.log(a)}containsAll2(2)

5.yield

/*//这个regeneratorRuntime估计是polyfill的东西var _marked = [fu].map(regeneratorRuntime.mark);function fu() {    var i;    //这里讲函数内部的变量声明在这里,然后利用闭包一直保持住这些变量的改变的改变,再通过switch来选择执行到那一段    //跟C++里面的无堆栈routine的实现比较相似    return regeneratorRuntime.wrap(function fu$(_context) {        while (1) {            switch (_context.prev = _context.next) {                case 0:                    i = 9;                    i++;                    _context.next = 4;                    return i;                case 4:                    i++;                    _context.next = 7;                    return i;                case 7:                case "end":                    return _context.stop();            }        }    }, _marked[0], this);}*/function *fu(){    let i = 9;    i++;    yield i;    i++;    yield i;}fu();fu();

 

ES6转换为ES5