javascript原生bind方法詳解

bind()方法,是javascript原生的函數類的一個原型方法(即Function.prototype里的方法),不支持ie低版本.

 

基本格式:

function.bind(obj1,obj2,obj3...);

其中,function是一個方法屬性

obj1是執行此方法的this上下文

obj2及之后的參數,是執行function時傳入的參數

 

bind方法有兩個用處:

1.用來改變function方法中的上下文

2.給function方法傳入參數

 

bind方法和apply方法,call方法的區別:

1.最大的區別是,bind方法是返回一個改變了上下文和參數的新方法,而不是執行了function

2.bind方法傳入的參數(obj2及之后的參數),調用的時候會使用這兩個參數,但是調用的時候還可以再接着傳入新的參數,與bind時候的參數一起被傳入並執行

 

下面說說具體的用法:

用法1: 無參數,僅僅改變方法的上下文:

<script type="text/javascript">

var Class = function(name,job){
    this.name = name;
    this.job = job;
};
var jyh = new Class('jyh','web-front-end');
var zxg = new Class('zxg','php');
//給jyh實例添加私有方法:
jyh.intro = function(){console.log(this.name)};
//給jyh實例添加一個相同私有方法,但是使this上下文指向zxg實例:
//注意,使用bind方法,是不執行方法的,只是改變方法里的上下文,返回一個新的方法;
jyh.introOther = jyh.intro.bind(zxg);
jyh.intro(); //指針指向自己
jyh.introOther(); //指針指向zxg

</script>

 

用法2: 改變方法的上下文,並且帶有參數:

<script type="text/javascript">
var Class = function(name){
    this.name = name;
};
var jyh = new Class('jyh');
var zxg = new Class('zxg');
//給jyh實例添加私有方法:
jyh.intro = function(job){console.log(this.name+','+job)};
//給jyh實例添加一個相同私有方法,但是使this上下文指向zxg實例:
//注意,使用bind方法,是不執行方法的,只是改變方法里的上下文,並且傳入執行該方法時的參數
//注意,參數是在bind的同時定義的,而不是執行的時候定義的,詳細參考bing-3.html
jyh.introOther = jyh.intro.bind(zxg,'php');
jyh.intro('web-front-end');    //指針指向自己,傳入參數
jyh.introOther();
</script>

 

用法3: 改變方法的上下文,並且傳入的參數中帶有this:

<script type="text/javascript">

var Class = function(name){
    this.name = name;
};
var jyh = new Class('jyh');
var zxg = new Class('zxg');
//給jyh實例添加私有方法:
jyh.intro = function(job){console.log(job)};
//給jyh實例添加一個相同私有方法,但是使this上下文指向zxg實例:
//注意,bind方法,第二個參數開始,this指向決定於bind的時候,而非調用的時候,
//如果在這里使用bind,無論在何處執行jyh.introOther,得到的結果都是 zxg,[object Window]
jyh.introOther = jyh.intro.bind(zxg,this);
jyh.intro('web-front-end');    //指針指向自己,傳入參數

var Klass = function(name){
    this.name=name;
    this.init();
};
Klass.prototype.init=function(){
    console.log(this);
    //如果在這里使用bind,this指向就是Klass的實例;
    //打開注釋,this指向klass,關閉注釋,根據第22行定義的,this指向window
//    jyh.introOther = jyh.intro.bind(zxg,this);
    //和在哪里調用沒有關系
    jyh.introOther();
};
//將Klass實例化時,調用jyh.introOther(),this指向就是klass;
var klass = new Klass('klass');

</script>

 

用法4: 改變方法的上下文,有參數,並且執行的時候再添加新傳入的參數: 

<script type="text/javascript">

var Class = function(name){
    this.name = name;
};
var jyh = new Class('jyh');
var zxg = new Class('zxg');
//給jyh實例添加私有方法:
jyh.intro = function(job,love,appearance){console.log(this.name+','+job+','+love+','+appearance)};
//給jyh實例添加一個相同私有方法,但是使this上下文指向zxg實例:
//注意,使用bind方法,是不執行方法的,只是改變方法里的上下文,並且傳入執行該方法時的參數
jyh.introOther = jyh.intro.bind(zxg,'php');
jyh.intro('web-front-end','rabbit','bad');    //指針指向自己,傳入參數
//除了bind時候傳入的參數,執行的時候還可以繼續傳入參數,bind時傳入的參數和執行時傳入的參數,依次作為參數被傳入執行
jyh.introOther('dog','handsome');

</script>

 

用法5: 不改變上下文,僅僅為了傳參而使用bind:

<script type="text/javascript">
var Class = function(name){
    this.name = name;
};
var jyh = new Class('jyh');
//給jyh實例添加私有方法:
jyh.intro = function(job,love){console.log(job+','+love)};
//尤其適合用在setInterval方法,需要傳入空對象{}在第一個參數的位置
var t = setInterval(jyh.intro.bind({},'web-front-end','rabbit'),3000)
</script>

 

這就是原生的bind方法,下一篇文章會講到如何在低版本ie瀏覽器里對它進行兼容處理.