JavaScript class和function的区别

在 JavaScript 中，ES6 开始引入class的概念。实际上，JavaScript 中class的本质也是基于原型prototype的实现方式作了进一步的封装，其本质还是函数function。虽说如此，class和function还是有不同之处。

1. 相同点：都可作为构造函数

1. 函数作为构造函数

class和function都可以作为构造函数，通过new操作符来实例化。

如下代码，函数作为构造函数的写法。函数作为构造函数，通常首字母要大写。构造函数中的this指向构造函数创建出来的实例对象usr。

function Person(name) {
    this.name = name;
}

const usr = new Person('Jack');
console.log(usr); // Person { name: 'Jack' }

2. 类实现构造函数

类可以包含构造函数方法、实例方法、setter函数、getter函数和静态类方法，但这些都不是必须的。

如下代码所示，定义一个class，需要用class关键字加上类名，类名建议首字母大写。类中的constructor方法是一个特殊的方法，称为构造函数方法，用来初始化一个对象，在一个class中，只能有一个constructor方法，若定义多个constructor将会报错。

在用new操作符创建类的实例时，会自动调用这个constructor函数。若不定义constructor，相当于constructor为空函数。

class Person {
    constructor(name) {
        this.name = name;
    }
}

const usr = new Person('Jack');
console.log(usr); // Person { name: 'Jack' }

类实例化时，传入的参数会用作构造函数的参数，如果没有参数传递，则类名后面的括号可以省略：

class Person {
    constructor() {
        this.name = 'Jack';
    }
}

const usr = new Person;
console.log(usr); // Person { name: 'Jack' }

2. 不同点

1. class构造函数必须使用new操作符

class构造函数与function构造函数的主要区别为，调用class构造函数必须使用new操作符。而普通function构造函数如果不使用new调用，那么会以全局的this（在浏览器中是window）作为内部对象。

如下代码，普通function构造函数把window作为this来创建实例：

function Person() {}
const p = Person();

调用class构造函数时如果忘了使用new则会抛出错误：

class Animal {}
const a = Animal();
// TypeError: Class constructor Animal cannot be invoked without 'new'

2. class声明不可以提升

function构造函数声明存在提升，也就是定义构造函数的部分可以写在实例化对象的后面：

const usr = new Person('Jack');
console.log(usr); // Person { name: 'Jack' }

function Person(name) {
    this.name = name;
}

class声明不存在提升，声明类的部分不能写在实例化对象的后面，如下代码所示，报错信息显示Cannot access 'Person' before initialization。

const usr = new Person('Jack');
// ReferenceError: Cannot access 'Person' before initialization

class Person {
    constructor(name) {
        this.name = name;
    }
}

3. class不可以用call、apply、bind改变执行上下文

普通的function函数，调用时可以使用call、apply、bind改变其this指向，如下代码，调用sayName的同时，通过call改变其this指向为obj，打印出了obj对象中的name属性。

function sayName() {
    console.log(this.name);
}

const obj = {
    name: 'Jack',
};

sayName.call(obj); // Jack

call、apply、bind具体使用方式见「JavaScript call()、apply()、bind()的区别」。

若class也尝试用call改变其this指向时会报错：

class Person {
    constructor() {
        this.name = 'Tom';
    }
}

const obj = {
    name: 'Jack',
};

Person.call(obj); // TypeError: Class constructor Person cannot be invoked without 'new'

---

参考：

「MDN—class」

---

📘📘欢迎在我的博客上访问：
https://lzxjack.top/