this: in the function Simply put, this point in time there is a function call of the decision, who calls this function is the function of this points to who

E.g:

1, normal function is called when

fn() ---->   window

2, object calls

var obj = {}
obj.f = fn;
obj.f()
this ----> obj

3, call timers: because the underlying fn not our own hand-written code that calls this method is invoked window

setInterval( fn ， 1000)
fn()

this ----> window

4, registration event: The event handler called when the underlying browser and browse to find a box to let box.onclick () event fires

box.onclick = fn;

this ------> box

Note: es6 function of the arrow is not pointing to this problem, so in this function of the arrow come from? Its value depends on the outside of this function itself is not a function of the arrow

In the constructor if you go to a new instance, the new operator of this also creates a

Change the way this points:

By calling context mode, the mode of the calling context, we can make this point to point to who will come

     1、call() 

Role: 1 will call this function

2. The first argument to the function of this then who will point to who

Parameters: The first argument: context (context), who passed, the function of this points to who

The second argument: an argument passed in accordance with the order parameter transfer function values

Syntax: function .call (context, arguments);

E.g:

       function Person(name, age){
          this.name = name;
          this.age = age;
        }
        var obj = {type:'human'};
        Person.call(obj, 'zs', 18);
        console.log(obj);

  2、apply()

Role: 1, call this function

2, the first argument of this function who will point to who

Parameters: The first argument: context who passed the function of this points to who

The second argument: an array requires passed arguments stored in array

Syntax: function .apply (context, [arguments, arguments, argument ......])

E.g:

            function Person(name, age){
                  this.name = name;
                  this.age = age;
            }
            var obj = {type:'human'};
            Person.apply(obj,['ls', 20]);
            console.log(obj);

  3、bind()

Effect: 1, clone this function, then the function returns clone was out

2, so that the new function of this clone have certain fixed points

Parameters: The first argument: context who passed out of the new Clone function inside of this points to who

The second parameter: the parameter assigned according

Syntax: var = new function function .bind (obj)

E.g:

          var obj = {type:1}
          function Person(name, age){
                this.name = name;
                this.age = age;
          }

          var newfn = Person.bind(obj, 'zl', 47);
          newfn();
          console.log(obj);

to sum up:

Three points this point changed by the same method:

The first parameter context who passed the function of this points to who

difference:

It calls the function call and apply only bind does not call clone

bind and call transfer parameters are the same, apply the second array pass is required parameters

note:

  function fn(){
    console.log(this);
  }
  
  fn.bind(['a'])();

    var newfn = fn.bind(['a']);
    var f = new newfn();

Although the bind function was cloned after this point has changed is fixed down, but note that the new more powerful, after using new a new or a new object inside of this point will function;

Recall the way:

the new operator to do what things?

1, create a new object

2, so that this points to the new object

3, the constructor is executed

4, return to this new object

 

Today, the first on here, welcome everyone mutual exchange of learning.