Arrow function

ES6 allows the use of arrows (=>) to simplify the definition of functions.

// function func(){ // console.log("hello"); Var func = () => {console.log("hello"); }; func();Copy the code
// if the number of parameters is 1, you can omit the parentheses. If there is only one statement in the function body, the braces can be omitted, and it will return the data after the => symbol by default. // 3. If the function body has more than one statement, do not omit the curly braces. // if the function body has only one statement and returns an object, it is recommended not to use the shorthand method.Copy the code

Example:

// Let func11 = () => console.log('func11'); func11(); // Let func22 = () => 'func22'; console.log(func22()); // Let func33 = x => console.log('func33', x); func33(2); Let func44 = (x, y) => {let sum = x + y; return sum + 'func44'; }; console.log(func44(1, 2));Copy the code

Note: If a return is a single object, braces and return are required, for example:

// let func55 = x => {a:10, b:20}; Let func66 = x => {return {a:10, b:20}};Copy the code

This in the arrow function

The arrow function has no scope of its own, that is, the arrow function this points to its outer scope

function People(name,age){ this.name=name; this.age=age; this.say = function () { // console.log(this.name); setTimeout(function () { console.log(this.name); }, 1000); } } var p1 = new People("zhangsan", 15); p1.say(); // undefined function People2(name,age){ this.name=name; this.age=age; this.say = function(){ // console.log(this.name); setTimeout(()=>{ console.log(this.name); }, 1000); } } var p2 = new People2("lisi", 15); p2.say(); Let obj1 = {name:"nodejs", age:"11", say:()=>{console.log(this.name); //this does not refer to obj}; obj1.say(); // undefinedCopy the code

Use arrow functions in DOM manipulation

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 200px; height: 200px; background-color: pink; } </style> </head> <body> <div id="odiv" class="box"></div> <script> var obj = document.getElementById("odiv"); Obj. Onclick = function(){// setTimeout(function(){// this.style.width="300px",1000); SetTimeout (()=>{this.style.width="300px"},1000); } </script> </body> </html>Copy the code

Third, object-oriented

In most object-oriented languages, there are concepts like classes, instance objects. We get the instance object by instantiating the class.

Class: Defines a class that uses the class keyword, but in ES5, uses the constructor (uppercase) to implement it.

Inheritance: The extends keyword is normally used for inheritance, but in ES5 there is no extends inheritance. It is done using the Prototype inheritance.

Written before ES6:

// Define classes with functions
function Animal(name){
    this.name = name;
}
// Define a method for an instance of a class
Animal.prototype.showName = function(){
    console.log(this.name);
}
// Define static methods for the class
Animal.eat = function(){
    console.log('eat');
}

// Instantiate objects according to functions
var a = new Animal("Tom");
// Call the method of the object
a.showName();
// Call the static method of the class
Animal.eat();
Copy the code

ES6:

class Animal{

    // Define the constructor
    constructor(name){
        // console.log("constructor");
        this.name = name
    }

    // Define a method
    showName(){
        console.log(this.name);
    }

    // Define static methods
    static eat(){
        console.log("Eat -"); }}let obj = new Animal("Tom");

obj.showName();
Animal.eat();
Copy the code

Fourth, about inheritance

Writing before ES6 (for understanding)

function Animal(name){
    this.name = name;
}
Animal.prototype.showName = function(){
    console.log(this.name);
}
Animal.eat = function(){
    console.log('eat');
}

// Define subclasses
function Mouse(name, color){ 
    // Subclasses inherit attributes from their parent class by referring this to name in the parent class
    Animal.call(this, name);  
    this.color = color;
}
// Subclasses inherit methods from their parent class
Mouse.prototype = new Animal(); 
// Add a new method to the subclass instance
Mouse.prototype.showInfo = function(){
    console.log(this.name, this.color);
}

var m = new Mouse('Jerry'.'gray');
m.showName();
m.showInfo();
Animal.eat();
Copy the code

ES6:

Constructor (name){// console.log("constructor"); this.name = name; } // Define a method showName(){console.log(this.name); } static eat(){console.log(" eat --"); } } class Cat extends Animal{ } let cat1 = new Cat("Tom"); cat1.showName(); Cat.eat();Copy the code

The inheriting subclass constructor is written like:

When inheritance is used in ES6, the super() method must be called from constructor, essentially calling the constructor method of the parent class. Property inheritance is achieved in this way

Constructor (name){console.log("constructor"); this.name = name; this.age = 0; this.color = "white"; } // Define a method showName(){console.log(this.name); } static eat(){console.log(" eat --"); }} class Cat extends Animal{// Note: When using inheritance in ES6, the constructor must call the super() method, which essentially calls the constructor method of the parent class. Constructor (name){super(name); // console.log("constructor"); this.color = "yellow"; } catchMouse(){console.log(" catchMouse "); } // Override the superclass method showName(){console.log(this.name, "meow meow "); } } let cat1 = new Cat("Tom"); console.log(cat1.color); console.log(cat1.age); console.log(cat1.name); cat1.catchMouse(); cat1.showName();Copy the code

Static properties and methods

Math.max(10, 20, 30, 16) calls a constructor as if it were a normal object. This method is called a static method. If it is a property, we call it a static property.

Define static methods by adding the static keyword to the class.

As for static attributes, there is no keyword to define at present. If you want to achieve this, you can add attributes directly to the class after defining the class, and obtain this attribute through the class name. As for static attributes, there is no keyword to define at present. If you want to achieve this, you can add attributes directly to the class after defining the class, and obtain this attribute through the class name.

Constructor (name){// console.log("constructor"); This.name = name} // Define a method showName(){console.log(this.name); } static eat(){console.log(" eat --"); static eat(){console.log(" eat --"); } } let obj = new Animal("Tom"); obj.showName(); Animal.eat(); Animal.type = "Animal "; animal.type =" Animal "; animal.type = "Animal "; console.log(Animal.type);Copy the code

Global objects

There is a special Object in JavaScript called a Global Object that, with all its properties, can be accessed from anywhere in the program, called a Global variable.

In browser JavaScript, normally window is the global object, while the global object in Node.js is global, and all global variables (except global itself) are properties of the Global object.

As you will see later, all global variables, such as Console, setTimeout, and process, are members of the global variable. We can even add members to global variables to make them available anywhere.

// 1. There is no window global object in nodejs, but there is a gloabal global object. Before using console. setTimeout these global functions are properties of global // console.log(window); // ReferenceError: window is not defined // console.log(global); // 2. Node interprets the variables declared in the file and does not mount the global object let b = 20; console.log(global.b); Global. A = 10; //undefined // 3. console.log(a); //10 // 4. This is also present in the nodejs file, but this is not equal to global. console.log(global === this); //false // In fact, this in nodejs stands for the current JS module.Copy the code

7. Use of modules

7.1 why modularity (Understand)

In the development of computer programs, as more code is written, the code in a file becomes longer and harder to maintain. In order to write maintainable code, we group many functions into separate files so that each file contains relatively little code. Many programming languages organize code this way. (A JS file is a module)

What are the benefits of using modules?

  • The biggest benefit is that the code is much more maintainable. Second, you don’t have to write code from scratch. When a module is written, it can be referenced elsewhere. We often refer to other modules when we write programs, including modules built into Node.js and modules from third parties.
  • Using modules also avoids function and variable name conflicts. Functions and variables with the same name can exist in separate modules, so we don’t have to worry about the name conflicts with other modules when we write our own modules.

Get to the point: The main reason is to facilitate the development and maintenance of the project.

7.2 Definition of module specification

  1. A JS file is a module whose scope is private, internally defined variables or functions that can only be used in the current file (module)

  2. If someone else needs to use our Modules, there are two things to do (take CommonJS Modules specification: Node.js as an example).

    1. Self-written modules, because the module scope is private, by default, external use is not available; If you want others to use it, you need to export itexportsormodule.exports. When exporting, export as an object
    2. If others want to use a module, they need to import the module and use itrequireImport, which requires a variable to receive the imported object.

A detailed description of the writing format and interaction rules is the Module Definition Specification:

  • AMD specification: require.js
  • CMD specification: sea-.js
  • CommonJS Modules specification: NodeJs
  • ES6 modular specification import… from …

7.3. Modular use

Data Export Method 1:

exports.num = num;
exports.sum = sum;
exports.Animal = Animal;
Copy the code

Data Export Method 2:

Module. exports = {num, sum, Animal}; // exports = {num, sum, Animal}; // exports = {num, sum, Animal};Copy the code

Import data:

// Note 1: If you want to use data from a module, you need to import it using the require keyword. // Note 2: When importing user-developed modules, add path (1. 2. Absolute path) Note:./ must write // Note 3: the extension of the module file can be written or not written // Note 4: Exported modules generally need to use a variable to receive the received quantity is defined as a constant // Note 5: Const m1 = require("./modules/m1.js");Copy the code

Complete code:

// m1.js: let num = 10; Constructor (){constructor(){this.age=0}} // exports. // exports.sum = sum; // exports.Animal = Animal; Module. exports = {num, sum, Animal}; // exports = {num, sum, Animal}; // exports = {num, sum, Animal};Copy the code
Js const m1 = require("./modules/m1.js"); console.log(m1); //{ num: 10, sum: [Function: sum], Animal: [Function: Animal] } console.log(m1.sum(10, 20)); const obj = new m1.Animal(); //30 console.log(obj.age); / / 0Copy the code

8. The orientation of this in the module

Exports is actually a reference to module.exports,

This in NodeJS represents the current module, which is the exports object

console.log(exports); //{} console.log(module.exports); //{} console.log(exports === module.exports); //true exports is actually a reference to console.log('this', this); //true exports is a reference to console.log('this', this); // this {} console.log(this === exports); // true // This in nodejs represents the current module, which is the exports object. In interactive mode, there is no exports object console.log(global === this); //false this does not point to a global objectCopy the code