JS中的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()

簡單的使用