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。
<br>
<br>

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。
<br>
<br>

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

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

雖然上面的fooBind1和fooBind2都使用了foo.bind()進行了拷貝,但他們也並沒有任何關系,完全兩個獨立的函數。
<br>
<br>

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還在同一內存地址中嗎
<br>
<br>
<br>
<br>
# 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之后返回的一個新的函數
<br>
<br>

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

簡單的使用


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM