ES6转换为ES5

Posted 2020-08-06 linyilong

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();