This is the 8th day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021.

In JavaScript, ES6 began to introduce the concept of class. In fact, the nature of class in JavaScript is further encapsulated based on the prototype implementation, and its essence is still function. That said, there are some differences between class and function.

1. Similarities: Both can be constructors

1. Function as constructor

Both class and function can be constructors, instantiated with the new operator.

The following code, written as a constructor function. Function constructors are usually capitalized. This in the constructor refers to the instance object usr created by the constructor.

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

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

2. Class implementation constructor

Classes can contain constructor methods, instance methods, setter functions, getters, and static class methods, but these are not required.

To define a class, use the class keyword followed by the class name, as shown in the following code. The constructor method is a special method, called a constructor method, that initializes an object. Within a class, there can only be one constructor method, and defining more than one constructor will raise an error.

This constructor function is automatically called when an instance of a class is created using the new operator. If constructor is not defined, constructor is equivalent to an empty function.

class Person {
    constructor(name) {
        this.name = name; }}const usr = new Person('Jack');
console.log(usr); // Person { name: 'Jack' }
Copy the code

When a class is instantiated, the arguments passed in are used as arguments to the constructor. If no arguments are passed, the parentheses after the class name can be omitted:

class Person {
    constructor() {
        this.name = 'Jack'; }}const usr = new Person;
console.log(usr); // Person { name: 'Jack' }
Copy the code

2. The difference between

1. Class constructors must use the new operator

The main difference between the class constructor and the function constructor is that the class constructor must be called using the new operator. The normal function constructor, if not called with new, takes the global this (window in the browser) as its internal object.

The normal function constructor creates an instance of window as this:

function Person() {}
const p = Person();
Copy the code

If you forget to use new when calling the class constructor, an error will be thrown:

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

2. The class declaration cannot be promoted

The function constructor declares that there is promotion, that is, the part that defines the constructor can be written after the instantiated object:

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

function Person(name) {
    this.name = name;
}
Copy the code

Class: Cannot access ‘Person’ before Initialization. Initialization: Cannot access ‘Person’ before initialization.

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

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

3. Class cannot change the execution context with call, apply, or bind

If you call sayName, you can change this to obj via call. If you call sayName, you can change this to obj via call and print out the name attribute in obj.

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

const obj = {
    name: 'Jack'}; sayName.call(obj);// Jack
Copy the code

For details on how to use call, apply, and bind, see “The difference between JavaScript Call (), apply(), and bind()”.

An error will occur if the class also tries to change its this reference with call:

class Person {
    constructor() {
        this.name = 'Tom'; }}const obj = {
    name: 'Jack'}; Person.call(obj);// TypeError: Class constructor Person cannot be invoked without 'new'
Copy the code

---

Reference:

“MDN – class”