js point in this issue (call, apply, bind)

call, apply, bind role is to change the function runs when this point .

If you pass a context to null or undefined, then the window object is the default context (default context is undefined in strict mode)

Function is running, there are three call methods.

Method call mode

 

 There are a = 1
  there obj1 = {
   a:2,
   fn:function(){
     console.log(this.a)
   }
 }
 Obj1.fn () // 2  

 

this means that the object obj1, obj1.fn()actuallyobj1.fn.call(obj1)；

Function call mode

There are a = 1
 there obj1 = {
    a:2,
    fn:function(){
        console.log(this.a)
    }
}
was fn1 = obj1.fn
fn1()//1

obj1.fn is a function function(){console.log(this.a)} , that function fn1 this time without any modification of the call, function(){console.log(this.a)}.call(undefined)

Callback functions are also part of the function call

setTimeout(function() {
    console.log(this)//window
    function fn(){
        console.log(this)//window
    }
    fn()
}, 0);

Constructor call mode

When a new function that will create a new object secretly a member connected to a prototype, but this will be bound to the new object

function the Person (name, Age) {
 // here this point instances 
    this .name = name
     this .age = Age
     this .sayAge = function () {
        console.log(this.age)
    }
}

var dot = new Person('Dot',2)
dot.sayAge () // 2

The above three methods can be understood

obj1.fn () 
obj1.fn.call (obj1); // to point to the current object

fn1()
fn1.call ( null ) // point to the window object

f1(f2)
f1.call ( null , F2) // point to the new target

call

The first method call is the value of this parameter is to be bound, the incoming followed by a list of parameters. When the first argument is null, undefined, and pointing to the default window.

var arr = [1, 2, 3, 89, 46]
var max = Math.max.call(null, arr[0], arr[1], arr[2], arr[3], arr[4])//89

It can be understood:

obj1.fn () 
obj1.fn.call(obj1);

fn1()
fn1.call(null)

f1(f2)
f1.call(null,f2)

 

Look at an example:

There obj = {
    message: 'My name is: '
}

function getName(firstName, lastName) {
    console.log(this.message + firstName + ' ' + lastName)
}

getName.call(obj, 'Dot', 'Dolby')

apply

apply accepts two parameters, the first parameter is the value of this was bound to, the second parameter is a parameter array. When the first argument is null, undefined, and pointing to the default window.

var arr = [1,2,3,89,46]
var max = Math.max.apply(null,arr)//89

It can be understood:

obj1.fn () 
obj1.fn.apply(obj1);

fn1()
fn1.apply(null)

f1(f2)
f1.apply(null,f2)

 

Is not that written in front of the call and can be used like, in fact, apply and call usage is almost the same, the only difference is that: When the function need to pass multiple variables, you can apply to accept an array as an input parameter, a call is accepted series of separate variables.
Look at an example:

There obj = {
    message: 'My name is: '
}

function getName(firstName, lastName) {
    console.log(this.message + firstName + ' ' + lastName)
}

getName.apply(obj, ['Dot', 'Dolby'])// My name is: Dot Dolby

 

Can be seen, the object obj as a function of context, this refers to the function getName in the object obj. Parameters firstName and lastName are placed in the array passed getName function.

It can be used to call and apply methods borrowed from other objects, here to call () Example:

was PERSON1 = function () {
     this .name = 'dot' ;
}
var Person2 = function () {
    this.getname = function () {
        console.log(this.name);
    }
    Person1.call(this);
}
was person = new Person2 ();
person.getname();       // Dot

 

From the above we can see, Person2 instantiated objects person got out of the name by Person1 getname method. Because in Person2, the role of Person1.call (this) is to use Person1 objects instead of this object, Person2 have all the attributes and methods of Person1, which is equivalent Person2 inherits the properties and methods of Person1.

For when to use what method, in fact, do not tangle. If your parameters already exist in an array, then naturally use apply, if the argument is nothing more scattered association between each other, use call. Like the above example to find the maximum value in a set of numbers, of course, it is reasonable apply.

 

Call and is similar to the first parameter is this point, starting from the second argument is a list of parameters received. Bind method except that the function and the return value is a list of parameters using the received bind.

• The return value is a function bind

There obj = {
    name: 'Dot'
}

function printName() {
    console.log(this.name)
}

var dot = printName.bind(obj)
console.log(dot) // function () { … }
dot()  // Dot

 

bind method is not performed immediately, but the function returns after a context change this. The primary function of this printName has not been changed, still points to the global object window.