Es6浅析

本文作者:IMWeb 朱灵子 原文出处:IMWeb社区 未经同意,禁止转载

Es6浅析

Babel 是一个 JavaScript编译器,它可以把我们编写的符合 ECMAScript 6 标准的代码完美地转换为 ECMAScript 5 标准的代码,并且可以确保转换后的语言良好地运行在所有主流 JavaScript引擎中。我们可以把babel简单地理解为从源代码到源代码的编译器

以下是ES6新特性在Babel下的兼容性列表

今天我就使用babel编译器这个强大的工具来理解Es6的一些语法,主要从以下几个方面的对比来进行理解:

  • Let、const与var
  • 箭头函数与普通函数
  • 原型方法静态方法

let、const与var

使用babel编译工具我们发现let const编译以后都变成了var,那他们和var到底有哪些方面的区别呢?

我们通过几个小小的栗子来进行区别,首先请看这段es5代码:

function testLet(){ 
var i=1; 
console.log(i); 
console.log(j); 
var j=2; 
} 
testLet(); 
console.log(i);

使用es5的语法第一个console输出的是1,第二个输出是undefine,第三个输出1

接下来请看使用es6语法编译后的代码:

function testLet(){ 
let i=1; 
console.log(i); 
console.log(j); 
let j=2; 
} 
testLet(); 
console.log(i);

代码执行完后,我们会发现第一个仍然输出1,但是第二个和第三个产生了ReferenceError的错误。

通过对比这两个小例子我们发现let的作用域比var更加严格了,有点类似于java中的变量定义

  • 必须先定义再使用
  • 有着严格的作用域,变量只作用域当前隶属的代码块

下面我们通过babel来理解let的块级作用域

let a1 = 1;
{
    let a1 = 2;
    {
        let a1 = 3;
    }
}
a1 = 4;

这段代码我们使用Babel编译以后变成了

var a1 = 1;
{
    var _a = 2;
    {
        var _a2 = 3;
    }
}
a1 = 4;

通过对比这两个例子我们可以发现let块级作用域的实质就是改变一下变量名,使变量名与外层不同。

那const关键字又如何理解呢?

const代表一个值的常量索引,也就是说变量名字在内存中的指针不能够改变,但是指向这个变量的值可能改变。

下面举一个简单的小例子:

const testConst=[] ; 
testConst.push(“1”) ; 
console.log (testConst) ;

我们创建了一个拥有常量索引的数组变量,然后添加值到这个数组中,但并不改变它的索引,所以上面的代码可以运行。

const testConst= [ ] ; 
testConst=[];

在上面的例子中我们想修改索引到一个新的数组,所以会报出TypeError的错误。

箭头函数与普通函数

箭头函数相当于匿名函数,并且简化了函数定义。 箭头函数有两种格式,一种只包含一个表达式,连{ ... }和return都省略掉了,另外一种可以包含多条语句,这时候就不能省略{ ... }和return。箭头函数看上去是匿名函数的一种简写,但实际上,箭头函数和匿名函数有个明显的区别,那就是箭头函数内部的this是词法作用域,由上下文确定。

下面我们通过一个简单的小栗子来进行理解哦~

var testObj = {
    prop: 1,
    func: function() {
        var innerFunc = () => {
            this.prop = 1;
        };

        var innerFunc1 = function() {
            this.prop = 1;
        };
    },
};

这段小代码我们通过babel进行编译以后如下所示

var testObj = {
    prop: 1,
    func: function func() {
        var _this = this;

        var innerFunc = function innerFunc() {
            _this.prop = 1;
        };

        var innerFunc1 = function innerFunc1() {
            this.prop = 1;
        };
    }
};

对比箭头函数与普通函数定义的方法编译后函数内this的指向,我们就可以发现剪头函数可以让我们直接使用外层的this而不用担心context切换的问题。

原型方法与静态方法;

ES6中定义类是这样的方式:首先定义一个class,每一个使用class方式定义的类默认都有一个constructor函数, 这个函数是构造函数的主函数,该函数体内部的this指向生成的实例, 我们可以在这个类上定义我们的原型方法与静态方法。

那这两者有什么区别呢?我们举一个简单的栗子来进行区分

class testStaticfunc {
    constructor(name) {
        this.name = name;
    }
    sayHi () {
        console.log("say hi");
    }
    static sayHello () {
        console.log("say hello");
    }
};

在这里我们定义了一个类testStaticfunc,并在这个类上面定义了一个原型方法sayHi以及静态方法sayHello ,我们将这段代码使用babel进行编译,编译以后的结果如下所示:

var testStaticfunc = function () {
    function testStaticfunc(name) {
        _classCallCheck(this, testStaticfunc);

        this.name = name;
    }

    testStaticfunc.prototype.sayHi = function sayHi() {
        console.log("say hi");
    };

    testStaticfunc.sayHello = function sayHello() {
        console.log("say hello");
    };

    return testStaticfunc;
}();

我们可以这样调用原型方法

var  instance = new testStaticfunc (); 
 instance.sayHi ()

但是我们可以直接这样调用静态方法

testStaticfunc.sayHello ()

调用静态方法我们不需要再new一个实例,可以直接调用方法,因此静态方法一般用来提供一些工具方法。

参考资料

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Es6浅析

    Es6浅析 Babel 是一个 JavaScript编译器,它可以把我们编写的符合 ECMAScript 6 标准的代码完美地转换为 ECMAScript 5 ...

    IMWeb前端团队
  • Babel下的ES6兼容性与规范

    ES6标准发布后,前端人员也开发渐渐了解到了es6,但是由于兼容性的问题,仍然没有得到广泛的推广,不过业界也用了一些折中性的方案来解决兼容性和开发体系问题,但大...

    IMWeb前端团队
  • Babel下的ES6兼容性与规范

    ES6标准发布后,前端人员也开发渐渐了解到了es6,但是由于兼容性的问题,仍然没有得到广泛的推广,不过业界也用了一些折中性的方案来解决兼容性和开发体系问题,但大...

    IMWeb前端团队
  • 10个JavaScript难点

    为了保证可读性,本文采用意译而非直译,并且对示例代码进行了大量修改。另外,本文版权归原作者所有,翻译仅用于学习。

    Fundebug
  • 前端基础-JavaScript函数进阶

    这种写法将一个匿名函数赋值给变量。这时,这个匿名函数又称函数表达式(Function Expression)

    cwl_java
  • Es6浅析

    Es6浅析 Babel 是一个 JavaScript编译器,它可以把我们编写的符合 ECMAScript 6 标准的代码完美地转换为 ECMAScript 5 ...

    IMWeb前端团队
  • 28个JavaScript 编程黑科技:还有这种操作!

    从来不需要声明一个变量的值是undefined,因为JavaScript会自动把一个未赋值的变量置为undefined。所有如果你在代码里这么写,会被鄙视的

    前朝楚水
  • 14招搞定JavaScript调试

    译者按: 很多时候,大家可能只是依靠 console.log 来调试 JavaScript 代码,这样做的局限性不言而喻,这篇博客将教你几招实用的调试技巧。

    Fundebug
  • es6(三):es6中函数的扩展(参数默认值、rest参数、箭头函数)

    1.函数可以设置参数默认值 1 function test1(x,y=1){ 2 console.log(x,y) 3 } 4 te...

    用户1149564
  • [第13期] 掌握前端面试基础系列一: ES6

    这里我们可以看到, 第一行中的a虽然还没声明, 但是我们用起来却不会报错。这种情况, 就是变量声明的提升。

    用户6900878

扫码关注云+社区

领取腾讯云代金券