这篇文章用代码对比的方式解释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()
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。