Inheritance between objects #1

Existing attributes are retained and non-existing attributes are inherited.

A function that encapsulates a copy inheritance between objects:

function extend(parent,child){
    for(var i in parent){
        if(child[i]){
        continue; } child[i] = parent[i]; }}Copy the code

Prototype inheritance #2

Full inheritance, I think

The classes at the top of the prototype chain are the broader classes, and the classes at the bottom are the differentiation of the classes at the top, which contain some common attributes inherited from the top.

Prototype = new Upper(a,b,c); In this way, the instance generated by Lower can be called to the Upper property.

Problems with this approach:

  • Need to redirect constructor

    Lower.prototype.constructor = Lower;
  • The inherited values will be the same

The call method of the function #3

Call is a method of executing a function. It does two things:

  • Change the this pointer inside the function
  • Call functions to execute internal code

Afunc. Call (toThis,a); The first argument of the call method is used to specify the internal this point, and the second and subsequent arguments are the original arguments of the function.

Borrow the constructor to inherit attribute #4

Further: write the upper-level constructor into the lower-level constructor, and use the call method to change this of the upper-level constructor to refer to this of the lower-level constructor (otherwise, it would refer to window).

function Lower (a,b,c,s) {
    Upper.call(this,a,b,c);
    this.special = s;
}
Copy the code

Constructor method inheritance #5

The foregoing only completes the inheritance of attributes; the methods of the upper-level prototype objects also need to be inherited. Similarly, methods can be inherited in two ways.

  1. Object copy inheritance 
    for (var i in Upper.prototype) {
    if(i === constructor) {continue;
    }
    Lower.prototype[i] = Upper.prototype[i];
}
Copy the code

    Copy all the prototype methods except constructor.

  2. Prototype inheritance (same as #2)

Combinatorial inheritance #6

Properties use constructor inheritance and methods use stereotype inheritance

Function definition method #7

Function definition method:

  1. Function f(){};

  2. Var f = function (){};

    The difference between the two is that when the function call statement is written before, the declared function will be called normally because the function declaration is promoted, while the assigned variable is only promoted but not assigned, calling undefined fails. Therefore, function declarations are recommended.

    However, there are compatibility issues with function declarations in if statements

    if(true) {function f(){ft()};
}else{
  function f(){ff()};
}
Copy the code

    Modern browsers consider this function assignment. Older browsers call it before the function declaration. Lower versions: ff() (called after the promoted), modern: ft() (logical); Lower version: ff() Therefore, this type of case uses the function assignment:

    var f;
if(true){
   f = ft;
}else{
   f = ff;
}
Copy the code

  3. #8 var f = new Function(); Var func = new Function(‘a’,’b’,’console.log(a+b)’); Function (a,b) {console.log(a+b)} function (a,b) {console.log(a+b)}

    [Note] Not recommended

The function is called and this refers to #9

  1. () operator execution; This points to window by default
  2. New keyword call, and add () execution; This points to the instance object to be created in the future
  3. Object method, call, and also add (); This points to an object
  4. Event functions are automatically executed when fired; This points to the event source
  5. Timer, delay function in the specified time automatically executed; This points to the window

The direction of this is closely related to how the function is executed.

Specify three methods of this within the function #10

  • call
    • Function:
    • Arguments: The first one specifies this, and the second and subsequent ones are arguments to the function
  • apply
    • Function: specifies the function this and calls it
    • Arguments: The first specifies this, and the second is an array of function arguments
  • bind
    • Function: Specifies this of the function, not the function
    • Arguments: The first one specifies this, and the second and subsequent ones are arguments to the function
    • Return value: Returns a new function that respecifies this

func.call(newThis); func.apply(newThis); func.bind(newThis)(); These three methods have the same effect, and each has its own application.

Call application #11

An object commonly used as an array.

E.g. Use Array method to process the object: Array. Prototype. Push. Call (aObj, 50); Where aObj is an object

Apply #12

Mostly used in arrays, save the trouble of splitting arrays.

Apply math.max (null,arr) to array math.max (null,arr); The math. Max method takes multiple parameters, and now uses Apply to maximize array arr directly. The first argument is passed null, indicating that this is not modified.

e.g. console.log.apply(null,arr); Output the array ARR as a single on the console.

Application of BIND #13

Usually used when you don’t want to execute a function.

SetInterval (function(){}.bind(this),1000);

Other members of the function #14

  • Arguments 【 双 语 释 义 】

    A class array consisting of all the arguments

    It is a keyword that can be used directly within a function and omittedfunction.

    Arguments also has attributes under arguments:
    • Callee refers to the function itself
    • Length Number of arguments
  • If the caller of a function is called in the same scope as the caller, the caller is invoked in the same scope as the caller
  • Length Specifies the number of parameters
  • Name the function name

Higher order function #15

Higher-order functions are those that can be arguments or return values to other functions.

Function Closure #16

The scope of a function definition and the closed environment formed by the function itself, called a closure, contains the function itself and its required variables.

No matter how or where a function is called, it is executed back inside the closure.

Variables inside closures can be changed by function calls.

Uses/benefits of closures:

  • Reads an internal function member outside of a function
  • Let members of a function always live in memory because of the retention of closures

Closure problems:

  • The function in the body of the loop, called after the end of the loop, cannot remember the intermediate value at that time, can only be the end of the loop

Workaround: Change a function inside the body of the loop to a self-calling function and pass in arguments. Its closure is self-calling and only relates to the arguments passed in, not the variables of the loop.