在 ES6 中，我们可以使用 Class 和 Hoisted variables 来更方便地编写代码。然而，这些语法在一些旧版的浏览器中并不被支持，因此我们需要使用 Babel 来将其转换成 ES5 代码，以便能够在低版本的浏览器中运行。
Class 属性转换
在 ES6 中，我们可以使用 Class 来定义一个类。例如：
class MyClass {
constructor() {
this.myProperty = 'hello';
}
}这段代码定义了一个名为 MyClass 的类，该类有一个 constructor 方法，它会在类实例化时被调用。在 constructor 方法中，我们定义了一个名为 myProperty 的属性，并将其赋值为 'hello'。
然而，在 ES5 中并没有类的概念，因此我们需要将其转换成一个构造函数。Babel 会将上面的代码转换成以下形式：
function MyClass() {
this.myProperty = 'hello';
}可以看到，Babel 将类转换成了一个构造函数，并将构造函数中的属性赋值语句放在了构造函数中。
Hoisted variables 转换
在 ES6 中，我们可以使用 let 和 const 来定义块级作用域的变量。例如：
function myFunction() {
console.log(myVariable); // undefined
let myVariable = 'hello';
}这段代码定义了一个名为 myFunction 的函数，在函数中定义了一个名为 myVariable 的变量，并将其赋值为 'hello'。由于 let 定义的变量是块级作用域的，因此在变量声明之前使用该变量会导致 ReferenceError。
然而，在 ES5 中并没有块级作用域的概念，因此我们需要将其转换成一个函数作用域的变量。Babel 会将上面的代码转换成以下形式：
function myFunction() {
var myVariable;
console.log(myVariable); // undefined
myVariable = 'hello';
}可以看到，Babel 将 let 定义的变量转换成了一个函数作用域的变量，并将变量声明提升到了函数的顶部。
总结
Babel 可以将 ES6 的 Class 属性和 Hoisted variables 转换成 ES5 代码，以便能够在低版本的浏览器中运行。我们需要注意的是，转换后的代码可能会与原始代码有所不同，因此需要进行测试以确保转换后的代码能够正常运行。
示例代码
下面是一个使用了 Class 和 Hoisted variables 的示例代码：
-- -------------------- ---- -------
----- ------- -
------------- -
--------------- - --------
-
---------- -
--- ---------- - --------
--------------------------- - - - - ------------
-
-
----- ---------- - --- ----------
----------------------运行上面的代码会输出 'hello world'。我们可以使用 Babel 将其转换成 ES5 代码：
-- -------------------- ---- ------- -------- --------- - --------------- - -------- - -------------------------- - -------- -- - --- ---------- - -------- --------------------------- - - - - ------------ -- --- ---------- - --- ---------- ----------------------
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657431c4d2f5e1655dd76366