本教程操作环境：windows7系统、ECMAScript 6版、Dell G3电脑。
es6 class是函数。
在ES6中，class (类)作为对象的模板被引入，可以通过 class 关键字定义类。
class 的本质是 function。
它可以看作一个语法糖，其底层还是通过 构造函数 去创建的，让对象原型的写法更加清晰、更像面向对象编程的语法。
复制代码1
2
3
4
5
6
7
8
9
10
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.sayName = function() {
return this.name;
}
const xiaoming = new Person('小明', 18);
console.log(xiaoming);
登录后复制上面代码用ES6的class实现，就是下面这样
复制代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayName() {
return this.name;
}
}
const xiaoming = new Person('小明', 18)
console.log(xiaoming);
// { name: '小明', age: 18 }
console.log((typeof Person));
// function
console.log(Person === Person.prototype.constructor);
// true
登录后复制constructor方法，这就是构造方法，this关键字代表实例对象。 类的数据类型就是函数，类本身就指向构造函数。
类的所有方法都定义在类的prototype属性上面。
复制代码1
2
3
4
5
6
7
8
9
10
11
class A {
constructor() {}
toString() {}
toValue() {}
}
// 等同于
function A () {
// constructor
};
A.prototype.toString = function() {};
A.prototype.toValue = function() {};
登录后复制在类的实例上面调用方法，其实就是调用原型上的方法。
复制代码1
2
let a = new A();
a.constructor === A.prototype.constructor // true
登录后复制类的实例
实例的属性除非显式定义在其本身（即定义在this对象上），否则都是定义在原型上（即定义在class上）。
注意：
1、class不存在变量提升
复制代码1
2
new A(); // ReferenceError
class A {}
登录后复制因为 ES6 不会把类的声明提升到代码头部。这种规定的原因与继承有关，必须保证子类在父类之后定义。
复制代码1
2
3
4
{
let A = class {};
class B extends A {}
}
登录后复制上面的代码不会报错，因为 B继承 A的时候，A已经有了定义。但是，如果存在 class提升，上面代码就会报错，因为 class 会被提升到代码头部，而let命令是不提升的，所以导致 B 继承 A 的时候，Foo还没有定义。
2、this的指向 类的方法内部如果含有this，它默认指向类的实例。但是，必须非常小心，一旦单独使用该方法，很可能报错。
继承
Class 可以通过extends关键字实现继承
复制代码1
2
class Animal {}
class Cat extends Animal { };
登录后复制上面代码中 定义了一个 Cat 类，该类通过 extends关键字，继承了 Animal 类中所有的属性和方法。 但是由于没有部署任何代码，所以这两个类完全一样，等于复制了一个Animal类。 下面，我们在Cat内部加上代码。
复制代码1
2
3
4
5
6
7
8
9
10
class Cat extends Animal {
constructor(name, age, color) {
// 调用父类的constructor(name, age)
super(name, age);
this.color = color;
}
toString() {
return this.color + ' ' + super.toString(); // 调用父类的toString()
}
}
登录后复制constructor方法和toString方法之中，都出现了super关键字，它在这里表示父类的构造函数，用来新建父类的this对象。
子类必须在 constructor 方法中调用 super 方法，否则新建实例就会报错。 这是因为子类自己的this对象，必须先通过 父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象。
复制代码1
2
3
4
5
6
7
8
9
class Animal { /* ... */ }
class Cat extends Animal {
constructor() {
}
}
let cp = new Cat();
// ReferenceError
登录后复制Cat 继承了父类 Animal，但是它的构造函数没有调用super方法，导致新建实例报错。
如果子类没有定义constructor方法，这个方法会被默认添加，代码如下。也就是说，不管有没有显式定义，任何一个子类都有constructor方法。
复制代码1
2
3
4
5
6
7
8
9
10
class Cat extends Animal {
}
// 等同于
class Cat extends Animal {
constructor(...args) {
super(...args);
}
}
登录后复制另一个需要注意的地方是，es5 的构造函数在调用父构造函数前可以访问 this, 但 es6 的构造函数在调用父构造函数(即 super)前不能访问 this。
复制代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
class A {
constructor(x, y) {
this.x = x;
this.y = y;
}
}
class B extends A {
constructor(x, y, name) {
this.name = name; // ReferenceError
super(x, y);
this.name = name; // 正确
}
}
登录后复制上面代码中，子类的constructor方法没有调用super之前，就使用this关键字，结果报错，而放在super方法之后就是正确的。
父类的静态方法，也会被子类继承。
复制代码1
2
3
4
5
6
7
8
9
10
class A {
static hello() {
console.log('hello world');
}
}
class B extends A {
}
B.hello() // hello world
登录后复制【相关推荐：javascript视频教程、web前端】
以上就是es6 class是函数吗的详细内容，更多请关注靠谱客其它相关文章！
最后
以上就是忐忑石头最近收集整理的关于es6 class是函数吗的全部内容，更多相关es6内容请搜索靠谱客的其他文章。
发表评论 取消回复