Find out this point is a long way

Really Want One day, I can see this is true, will not be nasty double closure or closure or self-executing function skull pain turn, I look forward to super-spicy one day God

Default binding:

var name = ' Tiboo ' 
function the sayHi () { 
  the console.log ( the this )                   // the Window Object 
} 
the sayHi (); // run in the global environment the sayHi

 

Implicit binding:

There is a context object position on the call function is triggered on an object, that is invoked

    var name = ' yangfu ' 
    function sayHi () { 
        console.log ( this )     // zhi_xiang testMan zhe_ge dui_xiang 
        console.log ( ' hello ' , this name)    // hello, Tiboo      
    }
     var testMan = { 
        name: ' Tiboo ' , 
        sayHi: sayHi 
    } 
    testMansayHi ()   

    // object properties, only the last one in the chain affect the call site 

    var name = ' yangfu ' 
    function the sayHi () { 
        the console.log ( ' Hello ' , the this .name) 
    } 
    var testMan1 = { 
        name: ' Tiboo1 ' , 
        man: testMan2 
    } 
    var testMan2 = { 
        name: ' Tiboo2 ' , 
        the sayHi: the sayHi 
    }

    testMan1.man.sayHi()
    console.log(testMan1.man) // hello, Tiboo2 

 

Binding lost:

   the sayHi function () { 
        the console.log ( the this )   // point Window object 
        the console.log ( ' Hello, ' , the this .name)   // Hello, yangfu 
    }
     var testMan = { 
        name: ' Tiboo ' , 
        the sayHi: the sayHi 
    } 
    / / In this case the man directly to sayHi, and have nothing testMan 
    var man = testMan.sayHi
     var name = " yangfu " 
    man ()

 

Show Binding:

   the sayHi function () { 
        the console.log ( ' the Hello, ' , the this .name);   // the Hello, Tiboo 
    }
     var testMan = { 
        name: ' Tiboo ' , 
        the sayHi: the sayHi 
    } 
    var name = ' yangfu ' 
    var man = testMan. the sayHi
     // by Apply, this refers to the set value of the function body, at this time point to testMan 
    man.apply (testMan)

 

The null or undefined as the binding target this incoming call, apply (  point to be ignored, the practical application of the default binding rules, the default binding is actually not thoroughly studied, to be supplemented)

 function sayHi(){

  console.log('Hello,', this.name); // Hello, yangfu

 }

 var testMan = {

  name: 'Tiboo',

  SayHi: SayHi

 }

 var name = 'yangfu'

 testMan.sayHi.call(null)

 

new bindings:

    var name = 'Tiboo'
    function sayHi(name){
       this.name = name;
    }
    var man = new sayHi('Tiboo2')
    console.log(man.name) // Tiboo2

 

Arrow function:

• Do not own this, this inheritance outer code
• You can not use call (), apply (), bind () methods to change this point of

  Arrow function is not used:
   var obj = { 
    Hi: function () { 
        the console.log ( the this );
         return function () { 
          the console.log ( the this ) 
        } 
    } 
  }   
  the let Hi = obj.hi ();   // output object obj 
  Hi ();                // window objects 

  after use the arrow functions:

    var obj = {

      hi: function(){

        console.log(this);

        return () => {

          console.log(this)

        }

       }

    }

    let hi = obj.hi (); // output object obj

    hi (); // output object obj

 

Self-executing function:

• Self-executing function inside this point window

 var obj = { 
    Hi: function () { 
        the console.log ( the this ); // output object obj 
        (function () { 
          the console.log ( the this ) // window objects 
        }) () 
    } 
  }   
  the let Hi = obj.hi ( );  

Basically this point on it so much, here are some of my face questions about this collection or think the more interesting question, Practice makes perfect, things are complicated by the most simple things stitching comes, so as long as willing to put in some effort, the problem is no longer a problem.

 

Case number one:

var number = 5;
  var obj = {
      number: 3,
      fn: (function () {
          var number;
          this.number *= 2;
          number = number * 2;
          number = 3;
          return function () {
              var num = this.number;
              this.number *= 2;
              console.log(num);
              number *= 3;
              the console.log (Number); 
          } 
      }) () 
  } 
  var myfun = obj.fn; // self-executing, this.number (window) = 10 
  myFun.call ( null ); // the this point window, resulting in the incoming null default binding, the this .number (window) = 20 is ; NUM = 10 ; number = 9 ; 
  obj.fn (); // the this point obj, num = 3; closure caused the last number is present in memory 9 , Number = 27 
  the console.log (window.number); // 20 is

 

Case II:

Pen questions encountered, then just felt all around a big head, she did not see, did not want a definition, it does not complain

  var fn = (function(a) {
    this.a = a;
    return function(a) {
      a += this.a;
      console.log(a)
    }
  }(function(a, b) {
    return a
  }(3, 4)))
  fn(7)

Problem-solving steps:

// simplified: 
  (function (A, B) {
     return A 
  } ( 3 , . 4 )) // Run Results obtained 

  // then the above function simplification 
  var Fn = (function (A) {
     the this II.A = A;
     return function (A) { 
      A + = this II.A; 
      the console.log (A) 
    } 
  } ( . 3 )) // from this point to execute a function window, after passing parameters. 3, this.a (window) =. 3; 
  Fn ( . 7 ) // Fn () operation is a closure, at this time point this window, a = a + this.a = 3 + 7 = 10

 

Case III: To be added