preface

The purpose of writing this series of articles on JavaScript simple meal is to record various knowledge points when reading and learning the book JavaScript advanced programming (4th Edition). Although it is a note and summary of reading, I hope it is light, concise and sharp, will not cause reading fatigue, and can take a light bath of knowledge points in fragmented time and leisure. Each article is only for a small part to explain and sort out, so as to achieve the purpose of personal review, summary and sharing knowledge.

1, Class

Languages such as C + + and JAVA have classes, which can be used to encapsulate their own types. JavaScript can't say no, but it has always been forced to support such a "class" with the features of function() and ES5, but it's always uncomfortable and doesn't feel very authentic! Because of this, the code to implement inheritance is also very lengthy and chaotic, like a pot of northeast iron pot stew. In order to solve these problems, the class keyword is newly introduced in ES6, which has the ability to formally define classes. Yes, the man is back. Although the class of ES6 seems to support formal object-oriented programming, in fact, it still uses the concepts of prototype and constructor, which is a new basic syntax sugar in ES.

2, Class definition

Similar to function types, there are two main ways to define classes: class declaration and class expression. Both methods use the class keyword to enlarge parentheses. As shown in the following code

class Person {}
const Person = class {}; // Fine

Like function expressions, class expressions cannot be referenced until they are evaluated. However, unlike function definitions, although function declarations can be promoted, class definitions cannot. The following example gives a demonstration:

console.log(FunctionDeclaration); // [Function: FunctionDeclaration]
function FunctionDeclaration() {}

console.log(ClassExpression);  // ReferenceError: Cannot access 'ClassExpression' before initialization
class ClassExpression {}

In this way, it is OK to use the function in advance, and relevant information will be printed. However, if the class is used before initialization, a ReferenceError error error will be reported.

Another difference between functions and classes is that functions are limited by scope, but classes are limited by block scope. As follows:

{
    function FunctionDeclaration() {}
    class ClassExpression {}
}

console.log(FunctionDeclaration); // [Function: FunctionDeclaration]
console.log(ClassExpression);  // ReferenceError: ClassExpression is not defined

Like this, if a class is defined in a block, the print information directly tells us that there is no class defined during external access to the block.

Let's take a look at the composition of a class. A class can contain constructor methods, instance methods, get functions, set functions and static class methods, but it is equally effective not to include these in the class. As follows:

class Person() {}; //Empty class definition, valid

class Person {
    constructor() {} // You can have constructors
}

class Person {
    sayName() {} // There can be instance methods
}

class Person {
    get myName() {} // Can have get function
}

class Person {
    set myName(name) {} // Can have setting function
}

class Person {
    static sayName() {} // There can be static methods
}

By default, the code in the class definition is executed in strict mode. It is recommended that class names be capitalized to distinguish them from instances created through them. (for example, create a person instance through Class Person {}).

Class expressions are optional. After assigning a class expression to a variable, you can obtain the name string of the class expression through the name attribute. However, this identifier cannot be accessed outside the scope of a class expression. As follows:

let Person = class PersonName {
    sayClassName () {
        console.log(Person.name, PersonName.name);
    }
}

let p = new Person();

p.sayClassName(); // PersonName PersonName

console.log(Person.name); // PersonName
console.log(PersonName.name); // ReferenceError: PersonName is not defined

3, Summary

The above is what we want to talk about today. Today, we briefly introduce the concept of class, the definition method of class, the promotion restrictions of class, the scope restrictions of class, the composition of class and the scope restrictions that we should pay attention to when obtaining name identifier. In the next article, let's introduce the class constructor. Sprinkle flowers~