ES6+ class中代码的真正模样

2019年8月31日 180次阅读 来源: alwaysVe

这篇文章用代码对照的体式格局诠释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()

    原文作者：alwaysVe
    原文地址: https://segmentfault.com/a/1190000008732290
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞