current position：Home>How to learn high-order function "zero basis must see"

How to learn high-order function "zero basis must see"

2022-04-29 13:12:29【Xiao Zheng JS】

Higher order function

Understand what object orientation is ？

  1. object-oriented : yes A result oriented approach to problem solving Way of thinking Process oriented : It's about the process object-oriented : The focus is on the results

2. The difference between object-oriented and process oriented 

   Use someone else's object ：  Benefits high efficiency      Disadvantages are not conducive to maintenance 
   Write your own object ：  Benefits: easy maintenance    Disadvantages: low efficiency 
   How to use object-oriented development thinking in practical development in the future  
 Copy code

Tips ： How to use object-oriented development thinking in practical development in the future When you bring a demand , Don't rush to write , But go online to find out if there is a ready-made framework . If there is , Then download CV Get it done . If you don't write it yourself .

Object oriented code demonstration 

<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
</head>

<body>
  <div>div1</div>
  <div>div2</div>
  <div>div3</div>
  <p>p1</p>
  <p>p2</p>
  <p>p3</p>
  <p>p4</p>
  <script>

    // demand ：  Give each page div label   and  p label   Set the color   and   Frame 

    /* 1. Process oriented  :  Pay attention to the process  
       characteristic ： Code redundancy 
      */

    

    /* 2. object-oriented 
      (1) Function encapsulation  :
           Global variable pollution  : 
      (2) Object encapsulation : 
    */
    let obj = {
      setColor: function (list, color) {
        for (let i = 0; i < list.length; i++) {
          list[i].style.backgroundColor = color
        }
      },
      setBorder: function (list, border) {
        for (let i = 0; i < list.length; i++) {
          list[i].style.backgroundColor = border
        }
      }
    }

    obj.setColor(divList, "red")
    obj.setColor(pList, "cyan")
  </script>
</body>

</html>
 Copy code

Built-in objects

Factory function

Factory function （ understand ）.jpg

Array objects 

    <script>
        /*   Be sure to practice , Or you'll forget 
         Built-in objects : js The author encapsulates the object in advance  
        */

        // Declaration array 
        let arr = [10, 20, 30]
        //1.arr.concat( Array ), Linked array   Get a new array after connection 
        //  Application scenarios ： Pull down loads more often , Connect to the back of the original array .
        arr = arr.concat(40, 50, 60, )
        console.log(arr); //[10,20,30,40,50,60]

        // reverse()  : Flip array 
        //  Application scenarios   E-commerce   sales   Price   distance   After clicking, it will flip the display 
        arr.reverse()
        console.log(arr);

        //  Array sorting 
        // arr.sort()
        let newArr = [20, 50, 10, 3, 6, 4, 80, 7, 9]
        newArr.sort(function (a, b) {
            // return a - b // From small to large 
            return b - a // From big to small 
        })
        console.log(newArr);
    </script>

 Copy code

String object 

        /*  Be sure to practice , Or you'll forget  */

        let str = ' Dark horse programmer Wuhan big front end goddess festival happy !'
        //  Strings are similar to arrays ,  There are also lengths  +  Subscript 
        console.log(str.length)
        console.log(str[2])

        // str.indexOf(' character string ')  ： Returns a string in str First character subscript in 
        //  If there is , Returns the first character subscript    If it doesn't exist   Returns a fixed value  -1
        let index1 = str.indexOf(' wuhan ')
        console.log(index1); //5
        let index2 = str.indexOf(' The goddess ')
        console.log(index2); //10
        let index3 = str.indexOf(' Dry rice ')
        console.log(index3); //-1
        let index4 = str.indexOf(' Heida ')
        console.log(index4); //-1

        
    </script>
 Copy code

Prototype object 

    1. What is the prototype object ? :   When any function is created, the system will automatically create a corresponding object , Called prototype object 
    2. Prototype object function ? :  Memory waste  +  Variable pollution 
    3. There are three properties related to the prototype object  :  describe   Constructors   Prototype object    Instance object   The relationship between the three 
    1.prototype :   Belongs to the constructor , Point to the prototype object 
    * effect  ：  Solve the problem that constructors waste memory  +  Variable pollution 
    2._proto_ :  Belongs to instance object ,  Point to the prototype object 
    * effect  ：  Let the instance object directly use the members of the prototype  （ function  +  attribute ）
    3. constructor :  Belongs to the prototype object , Pointing constructor 
    * effect  ：  Let the instance object know who its constructor is 
 Copy code

Constructors new Keyword principle Interview questions

  1. Create new objects

  2. Constructors this Point to a new object

  3. Execute constructor code , modify this, Add new properties

  4. Return to new object

Built in constructors

stay JavaScript The main data types in are 6 Kind of ：

Basic data type ： character string 、 The number 、 Boolean 、undefined、null

Reference type : object

Understand the shortcomings of internal methods of prototype object functions : Waste memory resources

Code demonstration 

            this.name = name
            this.age = age
            this.cet = function () {
                console.log(' Eat elbow ');
            }
        }
        let p1 = new Person(' liu ', 19)
        let p2 = new Person(' Xiaohong ', 19)
        console.log(p1, p2);
        console.log(p1.cet === p2.cet)  // It's wrong.   because p1 and p2 Are all methods. 
         And the code is consistent. The reference type compares the address   Their addresses are different   The result is false
        
 Copy code

resolvent Use global variables disadvantages Cause variable pollution Use object ： Solve memory waste + Variable pollution

Code demonstration 2

        function Person(name, age) {
            this.name = name
            this.age = age
        }
        // 2. Prototype object 
        Person.prototype.eat = function () {
            console.log(' Eat something ');
        }
        // constructor  Belongs to the prototype object  ,  Pointing constructor 
        //  You can let the instance object only be created by which constructor 
        console.log(person.prototype.constructor);
        person
        //  Instance object 
        let p1 = new Person(' Monitor of the class ', 20)
        console.log(p1);

        //  see p1 Prototype 
        console.log(p1._proto_.constructor);
        console.log(p1._proto_ === Person.prototype);true
        
 Copy code

Built-in objects ： Belong to object type , yes js The object written in advance by the author , It stores some properties and methods , It is convenient for developers to use 

 Math： Mathematical objects 
 Date： Date object 
 Function： Function object 
 RegExp： Regular expressions 
 Array： Array objects 
 String ：string object 
 Boolean ：boolean object 
 Number ：number object 
 Copy code

Value type and reference type 

a. Value type （ Basic data type ）: What is stored in the stack is data , The assignment copies the data , The modified copied data has no impact on the original data 
b. Reference type （ Complex data type ）： In the stack is the address , The data is in the heap , The assigned copy is the address , Modify the copied data to the original data 
 Copy code

Constructors 、 Prototype object 、 The relationship between the instance object and the three 

1. The constructor has a property prototype, Point to your prototype object 
2. The instance object has a property __proto__ Point to your prototype object 
3. The prototype object has an attribute constructor, Point to your own constructor 
 Copy code

Prototype .jpg

There's no more , One less word is not enough , In the shortest time , Teach the most practical technology ！

copyright notice
author[Xiao Zheng JS],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/04/202204291312251650.html

The sidebar is recommended

guess what you like

Random recommended