4
这篇文章用代码对比的方式解释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中传统函数和箭头函数的区别,传统函数的thises5函数的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
1.9k 声望162 粉丝

前进