javascript原生bind方法詳細

bind()方法は、javascript原生の関数類のプロトタイプの方法で、ieの低いバージョンを支持しません.
基本書式:
function.bind(Obj 1,Obj 2,Obj 3…)
ここで、functionは方法属性であり、Obj 1はこの方法を実行するthisコンテキストであり、Obj 2およびその後のパラメータは、functionを実行するときに入ってくるパラメータである.
 
bind方法は2つの用途がある:
1.functionメソッドのコンテキストを変更するために使用します.
2.functionメソッドにパラメータを入力します.
 
bind方法とappy方法、call方法の違い:
1.最大の違いは、bind方法は、functionを実行したのではなく、コンテキストとパラメータを変更した新しい方法を返すことである.
2.bindメソッドから入ってきたパラメータ(obj 2および以降のパラメータ)は、呼び出し時にこの2つのパラメータを使用しますが、呼び出し時にまた新しいパラメータを入力し、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>