基本概念
基本上,ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
JS语言的传统方法是通过构造函数定义并生成新对象的。是一种基于原型的面向对象系统。举例来说:
const Foo = function(a,b) {
this.a = a;
this.b = b;
return this;
}
Foo.prototype = {
constructor: Foo,
print: function() {
console.log(this.a + '' + this.b);
}
}
const foo = new Foo('hello','world').print();//hello world
以上就是es5的写法,下面用ES6对它进行改写来熟悉class的基本用法:
class Foo {
constructor(a,b){
this.a = a;
this.b = b;
return this;
}
print() {
console.log(this.a +''+ this.b);
}
}
const foo = new Foo('hello','world').print();//hello world
下面来简要的的说明一下:
- Foo 中的constructor方法是构造方法,this关键字则代表实例对象。也就是说,ES5的构造函数Foo,对应ES6的Foo这个类的构造方法。
2.Foo这个类除了构造方法还有一个print方法。注意定义‘类’的方法的时候,前面是不需要加上function这个关键字的。直接把函数定义放进去就好。方法之间是不需要加逗号的,加了都好会报错。
3.构造函数的prototype属性,在ES6的类上面继续存在。而且类的所有方法都定义在类的prototype属性上面。
console.log(Foo.prototype); //Object {constructor: function, print: function}
4.定义在类中的方法都是不可被枚举的。
console.log(Object.keys(Foo.prototype));//[]
5.constructor方法是类的默认方法,通过new命令生成的对象实例时,自动调用该方法。一个类必须有constructor方法。如果没有显式的定义,一个空的constructor方法会被默认添加。
class Y{}; const y = new Y(); console.log(y);//function(){}一个空函数被创建就是因为默认添加了constructor
6.生成类的实例对象的写法,与ES5完全一样,也是实用new命令。如果忘记添加new,直接调用class,将会报错。
以上都是个人理解如有不对之处还望指正交流!