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 中都扮演着重要的角色，各有不同的特点和用途。需要根据实际情况选择使用哪个。
