JS advanced prototype, inheritance, closure

Advanced JavaScript

first day

1. The process-oriented and object-oriented

• Process-oriented: as a performer, every step of the process is concerned, everything themselves.

• Object-oriented: As a commander, is concerned that the object can do, what objects need

• Note: For the object itself, inside the object or process

2. Object-Oriented Programming

A clear division of objects demand → → → Object Object division of labor cooperation → completion target

3. Objects and Classes

Objects, specific examples, also known instance of an object.

• Properties: static features

• Method: functional characteristics. To assign a function.

Execution 4.new keyword

Execution: var zs = new Obj ( 'zs', 18)

1. To apply for a memory space to store objects

2. Into the interior of the constructor, so this (porters) points to an object currently created (the current space applications)

3. By way this.key = value, to heap handling properties and methods.

4. Variables to open up space in the stack, make this point at this time variable assignment operator

5. new keyword finished, will return to the memory address of the variable name.

5. Recognizes prototype

Why study a prototype?

Premise: When creating an object, if the object's properties change, methods change, when you create multiple objects will add many ways, take up memory

Solution: The same method is proposed to share

• Is the prototype of an object, the system as a function of automatically assigned.

  • A constructor prototype comes to related functions

• Gets Prototype: == constructor name .prototype ==

• Use: Method name == prototype object = function () {//} == program execution.

• Action: in the prototype method, may be shared == instance constructor creates the object-related ==

• When an object instance to call a property or method, the search process is this:

  • Start with the instance of the object itself to find, if not to find

  • The system will be through to the __proto__prototype address stored into the prototype looks

• Constructor and prototype of the relationship:

  • The constructor may be obtained by prototype prototype

  • Prototype constructor may be acquired by constructors

6. prototype chain

• Nature: an object instance is to call a property or method of process

• Prototype chain process is as follows:

  • Start with the instance of the object itself to find, if not to find

  • The system will be through to the __proto__prototype address stored into the prototype looks, if the prototype can not find

  • The prototype will pass ___proto__to the prototype of the prototype will find, and so on

     

     

     

    Object is the constructor 
    prototype of Object: Object.prototype 
    Object is the ancestor class 
    reason: all objects, regardless of any type, belong to the Object 
    finally understand Everything Is an Object

     

the next day

1. Inheritance

• The relationship between the parent class and subclass: Inheritance

• Role: reduce code redundancy

2. prototypal inheritance

• How prototypal inheritance?

  • Change subclass prototype parent class point to a specific example. 子类.prorotype= new 父类()The method prototype point to the new object, you can use its properties, call the new prototype, and the prototype of the new prototype method

  • Add to sub-class constructor on the new prototype. 子类.prorotype.constructor=子类

• Advantages and disadvantages:

  • // Pros: Perfect inherited method

  • // Cons: not perfect inherited property, when the property changes need not meet the requirements

3. Borrowing inheritance

Use of the method call

• Objective: borrowing operations in other functions

• Implementation: Change the point of this internal function

• grammar:函数名.call(借用者,实参，实参...)

• How to borrow inheritance?

  • In sub-class constructor is called by the parent class constructor method call,

  • Ways: parent .call (this sub-address of an object, arguments ...)

• Advantages and disadvantages:

  • Advantage: Perfect inherit property

  • Disadvantages: The method can not be inherited

Method of use apply

.Apply function name (borrower, [argument ....]) (call and use the same, except that the argument into the required array)

The method of using the bind

• Syntax: function name .bind (borrower, arguments ....)

• : Will not executed immediately returns a new function, you need to call the new function

 

 

 

 

 

. the Fn the bind ( obj, 10, 20) (); function need to call it, the effect of the Call, the Apply the same

​

Method dummy array array borrowing

Array.prototype.push.call(obj,xx);

 var R & lt = the Math. max. Apply ( ARR, ARR); borrow math object extraction method of the maximum array

 

 

4. The combination of inheritance

Prototype + Borrowing

• process:

  • Prototypal inheritance to borrow to make up for the shortcomings inherited method can not be inherited.

  • Borrowing inherited prototype inheritance can not make up for the shortcomings of perfect inherited property.

• Disadvantages: the excess will prototype chain properties

The third day

1 as a function of function parameters - callback

Common syntax:

• function 函数名(v){ v() }

• function 函数名(v){ v(实参，实参) }

• principle:

  • Arguments and parameters of the relationship, the argument is assigned to the formal parameter

• Practical application scenarios: When an internal function, you need to accept the incoming external a program using a callback function

2 as a function of return value of a function

• Syntax:

  • function 函数名(){ return function(){ // 执行代码 }; }

  • function 函数名(){ var i = function(){ // 执行代码 }; return i }

• Principle: the use of the return keyword Valley. return data

• Scenario: the closure is applied

Closure

Closures are the internal bridge function and the function of connecting external

to sum up:

• Life-cycle variables: variables in memory of creation and destruction

  • Global variables: when Shisheng → open the program, when the program is closed destroy →

  • Local variables: when Shisheng → function is called when the execution after the end of the function call to destroy →

• GC: Full name G arbage C ollection

  • Data garbage collection, recycling and destruction of no use.

  • No data, the data is not used.

• Closure: internal function subroutine, the bridge

• effect:

  • Extend the life cycle of local variables

  • Maintain the security of local variables

• How to detect whether there is a program closure:

  • Debugging: set breakpoints within the subroutine, refresh detect the right if there is closure

  • Rules:

    1. The outer function and sub-function

    2. The outer function must have local variables

    3. To operate a local variable outer Functions Function

    4. Let Functions and external associate.

 

 

 

 

 

function xp(){

  There are a = 10;

  function dp () {

    console.log(a)

  }

  return dp;

}

was bs = xp ();

bs();

External subroutine calls, subroutine outer function call local variables, generating closure

 

Js a function of the parameter is a local variable, the function may be used in internal, not external function

 

 

 

 

 

Closure Classic Case

There are a set of elements on the page (such as a button), Click on the index which element which element on the show

var btns = document.querySelectorAll('button');

    for (var i = 0; i < btns.length; i++) {

      (function (i) {

        // var i; nested local variable generating function, the parameter is a local variable, the inner layer function uses a function of variables

        btns[i].onclick = function () {

          alert(i);

        }

      })(i);

    }