类和函数的不同之处-Toy模板网

这篇具有很好参考价值的文章主要介绍了类和函数的不同之处。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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'