javascript中的bind應該怎麼用?

bind() 函數會建立一個新函數(稱爲綁定函數),新函數與被調函數(綁定函數的目標函數)具備相同的函數體(在 ECMAScript 5 規範中內置的call屬性)。當新函數被調用時 this 值綁定到 bind() 的第一個參數,該參數不能被重寫。綁定函數被調用時,bind() 也接受預設的參數提供給原函數。一個綁定函數也能使用new操做符建立對象:這種行爲就像把原函數當成構造器。提供的 this 值被忽略,同時調用時的參數被提供給模擬函數。javascript

綁定函數

當建立一個對象時,調用對象裏的方法,那麼this值即爲這個對象。當把這個方法賦值給某個變量後,經過這個變量調用方法,this值則會指向這個變量所在的對象。java

this.x=9;
var module={
  x:1,
  getX:function(){
    console.log(this.x);
  }
}

module.getX();  //輸出 1

var retrieveX=module.getX;
retrieveX();    //輸出9

var boundGetX = retrieveX.bind(module);
boundGetX();    //輸出1

偏函數

綁定函數擁有預設的初始值,初始參數做爲bind函數的第二個參數跟在this對象後面,調用bind函數傳入的其餘參數,會跟在bind參數後面,這句話不太好理解,仍是直接看代碼吧。dom

var list=function(){
  var args= Array.prototype.slice.call(arguments);
  console.log(args);
  return args
};

var boundList=list.bind(undefined,37);
boundList();   //[3,7]
boundList(2,3,4);

配合setTimeout或者setInterval

當使用setTimeout或者setInterval的時候,回調方法中的this值會指向window對象。咱們能夠經過顯式的方式,綁定this值。函數

function LateBloomer() {
  this.petalCount = Math.ceil(Math.random() * 12) + 1;
}

LateBloomer.prototype.bloom = function() {
  window.setTimeout(this.declare.bind(this), 1000);
};

LateBloomer.prototype.declare = function() {
  console.log('I am a beautiful flower with ' +
    this.petalCount + ' petals!');
};

var flower = new LateBloomer();
flower.bloom();

bind的用法介紹到這裏就結束了,更多資料請參考 MDNthis

相關文章
相關標籤/搜索