JavaScript的bind方法

bind的机制

 

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

对象有属性和方法，函数也是对象的一种，我们也可以称之为函数对象，既然是对象那么就有熟悉和方法，bind就是函数对象下面的一个方法。
我们都知道对象是引用类型，引用的是内存中的一个地址，上面的callback1 === callback2这两个指针就指向了一个地址所以为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()的返回值是一个新的函数，其实是将foo拷贝了一份，他们两个已经没有了任何关系，也就是说foo和fooBind已经不在同一个内存地址中了，所以返回了false。

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

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

虽然上面的fooBind1和fooBind2都使用了foo.bind()进行了拷贝，但他们也并没有任何关系，完全两个独立的函数。

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

有人就会这么想了，bind方法的主要目的是为了改变函数内的this指向，那如果我用bind方法拷贝了一个fooBind1和一个fooBind2让他们中的this都指向obj这个对象，那这fooBind1和fooBind2还在同一内存地址中吗

bind的用法

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)()         //也可以这样

让foo中的this指向obj。注意：foo已经并不是foo本身了，而是调用了bind之后返回的一个新的函数

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()

简单的使用