JavaScript's bind method

bind mechanism

 

var foo = function(){}
var bar = foo;

console.log(foo === bar) //true

/*--------------------------------------*/

var foo = function(){}
var bar = function(callback1,callback2){
    console.log(callback1 === callback2)  //true
}

bar(foo,foo)

/*--------------------------------------*/

var foo = function(){}
var bar = function(){}

console.log(foo === bar) //false    //两个函数，不在同一内存地址中，所以返回了false

Objects have properties and methods, but also a functional object, we can also call the function object, since it is an object then it is familiar and methods, bind the following method is a function object.
We all know that the object is a reference type, reference is a memory address, the above callback1 === callback2 two pointer pointing to an address it is true.

var foo = function(){}
var fooBind = foo.bind()

console.log(foo === fooBind) // false

/*--------------------------------------*/

var foo = function(){}
var fooBind = foo.bind()

var bar = function(callback1,callback2){
    console.log(callback1 === callback2)  //false
}

bar(foo,fooBind)

foo.bind above code () return value is a new function, in fact, is a copy foo, the two of them did not have any relationship, that foo and fooBind has not in the same memory address , so returns false.

var foo = function(){}
var fooBind1 = foo.bind()
var fooBind2 = foo.bind()

console.log(fooBind1 === fooBind2) //false

While the above fooBind1 and fooBind2 are used foo.bind () it has been copied, but they also did not have any relationship, two completely separate functions.

var obj = {key:"value"}
var foo = function(){
    return this;
}
var fooBind1 = foo.bind(obj)
var fooBind2 = foo.bind(obj)

console.log(  fooBind1() === fooBind2 ()   )    //true   他们都指向了同一个obj
console.log(  fooBind1 === fooBind2         )    //false     他们分别是存在两个不同内存地址中的，与函数中的this无关，所以返回了false

Some people will think the main purpose is to bind methods to change this point in the function, that if I copy a fooBind1 and bind with a fooBind2 way for them this point the object obj, then this fooBind1 and fooBind2 it is still the same memory address

bind usage

var obj = {key:"value"}
var foo = function(){
    console.log(this)    //obj
}.bind(obj)

foo()

/*--------------------------------------*/

var obj = {key:"value"}
var foo = function(){
    console.log(this)    //obj
}

foo.bind(obj)()         //也可以这样

Let foo in this point obj. A new function has not returned after foo foo itself, but rather a call to bind: Note

var obj = {

    method:function(){

        setTimeout(function(){

            console.log(this)    //obj     注意：function(){console.log(this)}.bind(this) 返回值是一个函数

        }.bind(this),1000)
    }
}

obj.method()

/*--------------------------------------*/

var obj = {
    method:function(){

        var arg = function(){
              console.log(this)     //obj
        }

        var argBind = arg.bind(this)    //返回来的argBind函数与arg函数完全没有任何关系。

        setTimeout(argBind,1000)      //与上面的写法完全相等
    }
}

obj.method()

Simple to use

 

bind mechanism

 

var foo = function(){}
var bar = foo;

console.log(foo === bar) //true

/*--------------------------------------*/

var foo = function(){}
var bar = function(callback1,callback2){
    console.log(callback1 === callback2)  //true
}

bar(foo,foo)

/*--------------------------------------*/

var foo = function(){}
var bar = function(){}

console.log(foo === bar) //false    //两个函数，不在同一内存地址中，所以返回了false

Objects have properties and methods, but also a functional object, we can also call the function object, since it is an object then it is familiar and methods, bind the following method is a function object.
We all know that the object is a reference type, reference is a memory address, the above callback1 === callback2 two pointer pointing to an address it is true.

var foo = function(){}
var fooBind = foo.bind()

console.log(foo === fooBind) // false

/*--------------------------------------*/

var foo = function(){}
var fooBind = foo.bind()

var bar = function(callback1,callback2){
    console.log(callback1 === callback2)  //false
}

bar(foo,fooBind)

foo.bind above code () return value is a new function, in fact, is a copy foo, the two of them did not have any relationship, that foo and fooBind has not in the same memory address , so returns false.

var foo = function(){}
var fooBind1 = foo.bind()
var fooBind2 = foo.bind()

console.log(fooBind1 === fooBind2) //false

While the above fooBind1 and fooBind2 are used foo.bind () it has been copied, but they also did not have any relationship, two completely separate functions.

var obj = {key:"value"}
var foo = function(){
    return this;
}
var fooBind1 = foo.bind(obj)
var fooBind2 = foo.bind(obj)

console.log(  fooBind1() === fooBind2 ()   )    //true   他们都指向了同一个obj
console.log(  fooBind1 === fooBind2         )    //false     他们分别是存在两个不同内存地址中的，与函数中的this无关，所以返回了false

Some people will think the main purpose is to bind methods to change this point in the function, that if I copy a fooBind1 and bind with a fooBind2 way for them this point the object obj, then this fooBind1 and fooBind2 it is still the same memory address

bind usage

var obj = {key:"value"}
var foo = function(){
    console.log(this)    //obj
}.bind(obj)

foo()

/*--------------------------------------*/

var obj = {key:"value"}
var foo = function(){
    console.log(this)    //obj
}

foo.bind(obj)()         //也可以这样

Let foo in this point obj. A new function has not returned after foo foo itself, but rather a call to bind: Note

var obj = {

    method:function(){

        setTimeout(function(){

            console.log(this)    //obj     注意：function(){console.log(this)}.bind(this) 返回值是一个函数

        }.bind(this),1000)
    }
}

obj.method()

/*--------------------------------------*/

var obj = {
    method:function(){

        var arg = function(){
              console.log(this)     //obj
        }

        var argBind = arg.bind(this)    //返回来的argBind函数与arg函数完全没有任何关系。

        setTimeout(argBind,1000)      //与上面的写法完全相等
    }
}

obj.method()

Simple to use