60. 类和函数的不同之处
1. 创建方式不同
函数
可以通过函数表达式或函数声明来创建:
// 函数声明
function greet(name) {
console.log(`Hello, ${name}!`);
}
// 函数表达式
const add = function (x, y) {
return x + y;
};
类
则是通过class
关键字来创建:
class Person {
constructor(name) {
this.name = name;
}
sayHello() {
console.log(`Hello, my name is ${this.name}.`);
}
}
2. 对象创建方式不同
- 通过
函数
创建的对象可以使用函数调用运算符()
来创建:
function Person(name) {
this.name = name;
}
const person1 = new Person('Alice');
const person2 = Person('Bob');
- 而通过
类
创建的对象必须使用new
运算符来创建:
class Person {
constructor(name) {
this.name = name;
}
sayHello() {
console.log(`Hello, my name is ${this.name}.`);
}
}
const person1 = new Person('Alice');
const person2 = Person('Bob'); // 报错:Class constructor Person cannot be invoked without 'new'
3. 继承方式不同
- 在
JavaScript
中,函数
使用原型链来实现继承:
function Animal(name) {
this.name = name;
}
Animal.prototype.sayHello = function () {
console.log(`Hello, I am ${this.name}.`);
}
function Cat(name) {
Animal.call(this, name);
}
Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;
Cat.prototype.meow = function () {
console.log(`Meow, I am ${this.name}.`);
}
const cat = new Cat('Tom');
cat.sayHello(); // 输出 "Hello, I am Tom."
cat.meow(); // 输出 "Meow, I am Tom."
- 而类使用
extends
关键字来实现继承,并且还可以使用super
关键字来访问父类的方法和属性:
class Animal {
constructor(name) {
this.name = name;
}
sayHello() {
console.log(`Hello, I am ${this.name}.`);
}
}
class Cat extends Animal {
constructor(name) {
super(name);
}
meow() {
console.log(`Meow, I am ${this.name}.`);
}
}
const cat = new Cat('Tom');
cat.sayHello(); // 输出 "Hello, I am Tom."
cat.meow(); // 输出 "Meow, I am Tom."
4. 构造函数不同
- 在
函数
中,可以使用构造函数来创建对象,但是这个构造函数与函数名称相同:
function Person(name) {
this.name = name;
}
const person = new Person('Alice');
- 而在
类
中,类名称本身就是构造函数,使用new
关键字来创建对象时,会调用该类的构造函数:
class Person {
constructor(name) {
this.name = name;
}
}
const person = new Person('Alice');
5. 方法定义方式不同
- 在
函数
中,可以使用函数表达式或函数声明来定义方法:
function Person(name) {
this.name = name;
}
Person.prototype.sayHello = function () {
console.log(Hello, my name is ${this.name}.);
};
const person = new Person('Alice');
person.sayHello();
- 而在
类
中,可以直接在类体中定义方法:
class Person {
constructor(name) {
this.name = name;
}
sayHello() {
console.log(Hello, my name is ${this.name}.);
}
}
const person = new Person('Alice');
person.sayHello();
6. 静态方法定义方式不同
- 在
函数
中,可以使用对象字面量来定义静态方法:
function Person(name) {
this.name = name;
}
Person.sayHello = function () {
console.log('Hello, world!');
};
const person = new Person('Alice');
Person.sayHello();
- 而在
类
中,可以使用static
关键字来定义静态方法:
class Person {
constructor(name) {
this.name = name;
}
static sayHello() {
console.log('Hello, world!');
}
}
const person = new Person('Alice');
Person.sayHello();
7. 类中的属性和方法默认为不可枚举
在类中,定义的属性和方法默认情况下是不可枚举的,而在函数中,定义的属性和方法默认是可枚举的。这意味着,使用 for...in
循环无法遍历类中的属性和方法,需要使用 Object.keys()
方法获取类中的属性和方法。
例如,在下面的代码中,我们定义了一个类和一个函数,它们都包含一个属性和一个方法:
class Person {
constructor(name) {
this.name = name;
}
sayHello() {
console.log(`Hello, my name is ${this.name}.`);
}
}
function PersonFunc(name) {
this.name = name;
}
PersonFunc.prototype.sayHello = function () {
console.log(`Hello, my name is ${this.name}.`);
};
const person = new Person('Alice');
const personFunc = new PersonFunc('Bob');
console.log(Object.keys(person)); // []
console.log(Object.keys(personFunc)); // ['name']
for (const key in person) {
console.log(key); // undefined
}
for (const key in personFunc) {
console.log(key); // 'name' 和 'sayHello'
}
在类中,属性和方法默认是不可枚举的,因此使用 Object.keys()
方法无法获取属性和方法。而在函数中,属性和方法默认是可枚举的,因此使用 for...in
循环可以遍历所有的属性和方法。
8. 类不能被调用
在 JavaScript
中,函数可以被当做构造函数使用,通过使用 new
运算符可以创建一个新的对象。而类不能被直接调用,必须通过使用 new
运算符来创建对象。
例如,在下面的代码中,我们尝试直接调用类:
class Person {
constructor(name) {
this.name = name;
}
sayHello() {
console.log(`Hello, my name is ${this.name}.`);
}
}
Person('Alice'); // TypeError: Class constructor Person cannot be invoked without 'new'
运行上面的代码会抛出一个 TypeError
错误,因为类不能被直接调用。
9. 类方法是严格模式下执行
在类
中,所有的方法(包括静态方法和实例方法)都是在严格模式下执行,而在函数
中,如果不显式声明为严格模式,方法就会在非严格模式下执行。
总之,类
和函数
在 JavaScript
中都扮演着重要的角色,各有不同的特点和用途。需要根据实际情况选择使用哪个。