了解Babel以及它将如何帮助你编写JavaScript

DebugUsery
93 阅读5分钟

了解Babel以及它将如何帮助你编写JavaScript

Babel使程序员能够将边缘JavaScript转换为普通的ES5 JavaScript，可以在任何浏览器中运行，包括旧的浏览器。由于新的ES6而添加到JavaScript中的最常见的语法糖是类、胖箭头和多行字符串。

本教程将介绍Babel以及它在编写JavaScript代码时的作用。

实施

Babel是以Node.js节点模块的形式发布的，其安装是通过npm完成的。要安装Babel，你需要在终端运行以下命令。

$ npm install – D babel-cli

这里有Webpack、Gulp、Grunt、Sublime、Webstorm和其他各种技术的插件。因此，Babel很可能能够与你可能使用的任何开发工具链集成。

类

JavaScript没有任何类。然而，对象之间直接继承的事实意味着，任何对象都可以成为系统中任何其他对象的父类（超类）。

任何函数都可以是一个构造函数，用new 关键字来调用它将会创建一个新的对象。

这在JavaScript中都是很神奇的，但它让C#和Java开发者感到紧张，这也是可以理解的。所以ES6引入了class 关键字。这使得我们可以定义只能作为构造函数使用的函数，而不是其他。

class 这个词指的是一个特定的模板，可以用来定义其他对象，我们都知道。这是对原型继承规则的一个例外。

因此，我们限制自己只从函数中构造对象，我们已经特别确定它应该如何以这种方式使用。

Babel中的类

这个片段类似于一个ES6类。

class Person {}
var dave = new Person

当我们通过Babel运行它时，除了一个构造函数和一些额外的装饰外，我们没有收到其他东西。

"use strict";
function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}
var Person = function Person() {
  _classCallCheck(this, Person);
};
var dave = new Person();

Person function ，它可以作为一个标准的原型构造函数使用，已经可以使用。通过_classCallCheck 函数，我们也可以进行安全检查。

这个方法在Person constructor 中被调用，它将抛出一个错误，除非Person function 被当作一个构造函数，在这种情况下它将返回true 。

多行字符串

此外，ES6引入了一种新的、更简洁的定义字符串的方式。你可以通过使用回车键符号来构造多行字符串。

在JavaScript中创建模板时，使用这种方法是非常有益的。下面是一个简单的Angular模板的例子。

例子

var template = `
<div>
  <h1>hello {{name}}</h1>
</div>
`

结果

var template = "
  <div>
    <h1>hello {{name}}</h1>
  </div>
  ";

脂肪箭头

Fat Arrows 也被称为 。它们是一种相对较新的编写简明JavaScript函数的方式。ECMAScript 6规范引入了它们，此后它们成为ES6的一个广泛使用的特性。arrow Functions

胖箭头=> 操作符允许我们使用箭头函数快速定义带或不带参数的JavaScript函数。使用Fat arrows ，我们可以用一种可读的方式定义匿名函数。

例如，我们可以写一个像下面这样的函数。

例子

 (x, y) => {return x + y};

结果

(function (x, y) {
  return x + y;
});

应该注意的是，这个函数还没有被调用。如果我们想调用它，我们把它存储到一个变量中，或者为回调或承诺提供一个参数。

调用该函数

(x, y) => {return x + y} (1,2);

结果

(function (x, y) {
  return x + y;
})(1, 2);

有确切单一参数的胖箭头

当我们正好有一个参数时，我们可以省略箭头前面的大括号。

x => {return x + 1};

结果

(function (x) {
  return x + 1;
});

恰好有一行代码的胖箭头

如果我们的函数正好包含一行代码（假设一行以分号结束），我们可以完全省略大括号。

x => x + 1;

结果

(function (x) {
  return x + 1;
});

实践中的胖箭头

让我们用其中的一个来输出一个数组中的所有元素。

[1, 2, 99].map(num => console.log(num));

结果

[1, 2, 99].map(function (num) {
  return console.log(num);
});

胖箭头和这个（词法范围）

当一个函数被调用时，JavaScript中的this 关键字被配置为返回紧接在点之前的对象。这是明智的，但有时可能会很不方便，因为它必须在这样的上下文中存储this 。

绕过this is to use a fat arrow ，保持this'的当前值的方法。这被称为lexical scoping 。

x = {
  y: function() {
    () => {console.log(this)}();
  }
}

结果

x = {
  y: function y() {
    var _this = this;
    (function () {
      console.log(_this);
    })();
  }
};
  • 我们可以看到，this的值，已经被存储在闭包内的一个变量中。

结论

在ES5 上面的一个含糖层构成了大部分的ES6 。JavaScript编程语言保持了其作为原型列表处理语言的地位。

除了一些优秀的语法之外，ES6还提供了一个转译器，最后转换为相当朴素的、正规的JavaScript。提供这些糖的一个原因是为了让Java/C#开发者更容易接受。

他们可能首先会发现原型继承的理解具有挑战性。例如，胖箭头可以帮助我们写出更简洁、看起来更现代的代码，同时也改善了JavaScript的功能。

avatar
文章
阅读
粉丝