ES6+ class中代码的真正样子

PascalXie 发布于2019-08-20 15:11 / 3394人阅读

摘要：一用定义一个空类在中在中结论这个结果很清晰，原来中的类在中也是定义一个构造函数，然后返回出来。

这篇文章用代码对比的方式解释ES6中的类如果用我们熟悉的ES5来看是什么样的。

一、用class定义一个空类
在ES6中：

class Person { 

}

在ES5中：

var Person = (function () {
    function Person() {
    }
    return Person;
}());

结论：这个结果很清晰，原来ES6中的class类在ES5中也是定义一个构造函数，然后返回出来。

二、定义属性
在ES6中：

class Person { 
  
  constructor(name,age) { 
    this.name = name;    //在constructor中定义属性
  }

  age = age;    //直接定义属性

}

在ES5中：

var Person = (function () {

    function Person(name, age) {
        this.age = age;    //在es6中定义的属性都在这里，而且传值也没问题
        this.name = name;
    }
    return Person;
    
}());

结论：在ES6中定义的属性，不管直接在class中定义，还是在constructor中都可以，但是在constructor中定义属性才是推荐写法，毕竟ES6转ES5也并不是100%合理。

三、定义方法
在ES6（传统写法、箭头函数写法）

class Person { 

  Run() {    //传统形式的函数写法
    this;
  }

  eat = () => {    //es6中的箭头函数写法
    this;
  }

}

在ES5中：

var Person = (function () {

    function Person() {
        var _this = this;
        this.eat = function () {    //箭头写法直接挂到Person的this下
            _this;
        };
    }
    Person.prototype.Run = function () {    //传统写法则挂到prototype中定义
        this;
    };
    
    return Person;
}());

结论：这里不仅展示了在方法的定义，还比较了在ES6中传统函数和箭头函数的区别，传统函数的this和es5函数的this指向完全一样，但箭头函数的this指向的是它外层对象的作用域，这里不细说，想了解请点这里。

四、static关键字
在ES7中：

class Person {

  static name = "Jack";    //对属性使用static

  static run() {     //对传统函数使用static
    console.log(22)
  }

  static see = () => {    //对箭头函数使用static
    
  }
};

在ES5中：

var Person = (function () {
    function Person() {
    }
    Person.run = function () {
        console.log(22);
    };
    return Person;
}());

Person.name = "Jack";
Person.see = function () {};

结论：在class中，如果在属性或方法前使用static关键字，则可以在外部访问，访问方式是Person.xxx或Person.xxx()

GPU云服务器云服务器 es6中的class es6class asp中代码缩进网络机柜样子

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82065.html

[零基础学python]永远强大的函数

摘要：莱布尼兹所指的函数现在被称作可导函数，数学家之外的普通人一般接触到的函数即属此类。中文的函数一词由清朝数学家李善兰译出。前面提供的维基百科中的函数词条，里面可以做一个概览。函数，对于人类来讲，能够发展到这个数学思维层次，是一个飞跃。可以说，它的提出，直接加快了现代科技和社会的发展，不论是现代的任何科技门类，乃至于经济学、政治学、社会学等，都已经普遍使用函数。下面一段来自维基百科（...

cangck_X 2019-07-24 17:34 评论0 收藏0
基于 Babel 的 npm 包最小化设置

摘要：翻译疯狂的技术宅原文本文首发微信公众号欢迎关注，每天都给你推送新鲜的前端技术文章本文描述了通过生成包的最小设置。是用于转换的预设。有关这两个属性的更多信息设置多平台包。表示使用上一节中的配置。结论以上是通过创建包最小库的方法。翻译：疯狂的技术宅原文：http://2ality.com/2017/07/npm... 本文首发微信公众号：jingchengyideng欢迎关注，每天都...

琛ｈ。 2019-08-23 15:39 评论0 收藏0
Babel 7 转码的正确姿势

摘要：转码的配置是每位前端童鞋在日常工作中都会遇到的。简单点来说就是在转码过程中，对于一些新语法，都会抽象一个个小的函数，在转码过程中完成替换。以上即是我总结的转码姿势，如果对本篇有疑问或建议，欢迎在这里提出。 Babel 转码的配置是每位前端童鞋在日常工作中都会遇到的。刚开始我也是在网上搜索各种配置方法，升级到 Babel 7 的时候又折腾了一把，所以决定把自己的心得和理解记录下来，希望能...

JohnLui 2019-08-26 14:01 评论0 收藏0
JS每日一题：函数式编程中代码组合(compose)如何理解?

摘要：期函数式编程中代码组合如何理解定义顾名思义，在函数式编程中，就是将几个有特点的函数拼凑在一起，让它们结合，产生一个崭新的函数代码理解一个将小写转大写的函数一个在字符后加的函数将两个函数组合起来这里假设我们实现了每日一题每日一题显示结果里上面 20190315期函数式编程中代码组合(compose)如何理解? 定义: 顾名思义，在函数式编程中，Compose就是将几个有特点的函数拼凑在...

Kaede 2019-08-23 16:08 评论0 收藏0
PHP后端组织项目结构的思考

摘要：介绍下一个新项目，后端该如何从零去搭建。我们先假设这个项目由两部组成提供给站点使用的提供给运营人员使用的管理后台。因此通过回顾，我们得出我们的后端项目需要一个的层次，来存放业务逻辑。这是后端开发者从零做一个移动应用的后端部分第二篇。介绍下一个新项目，后端该如何从零去搭建。我们先假设这个项目由两部组成提供给wap站点、app使用的api；提供给运营人员使用的管理后台。整个...

cikenerd 2019-06-28 13:23 评论0 收藏0