JavaScript: Call and Apply

call 與 apply 兩者皆是執行某個 function,並將這個 function 的 context(即物件)替換成第一個代入的參數。其差異在於 call 必須將參數一一代入,而 apply 除了第一個參數代入 context 外,其餘的參數只要包在一個陣列裡面即可。註:第二個參數不是必須的(optional)。

例如

var person = {
  'firstName': 'Summer',
  'lastName': 'Tang'
};

function getName (a, b) {
  var name = this[a] + ' ' + this[b];
  console.log(name);
}

call 的使用方式

getName.call(person, 'firstName', 'lastName'); // Summer Tang

apply 的使用方式

var args = ['firstName', 'lastName'];
getName.apply(person, args); // Summer Tang

範例

function Project(id, title, owner_id) {
  this.id = id;
  this.title = title;
  this.owner_id = owner_id;
}

Project.prototype.get_owner = function(callback) {
  var self = this;

  // 製造假的 web service
  $.ajax.fake.registerWebservice('/owners/' + this.owner_id, function(data) {
    return {
      "owner": "Jimmy"
    }
  });

  $.ajax({
    type:'GET',
    dataType:'json',
    fake: true,
    url:'/owners/' + this.owner_id,
    error: function(){
      console.log('Error!');
    },
    success:function(data) {
      callback && callback.call(self, data.owner);
    }
  });
};

var proj = new Project(999, 'proj_1', 2);

proj.get_owner(function(owner) {
  console.log('The project ' + this.title + ' belongs to ' + owner);
});

Demo / Source Code,參考自文章 Javascript call 以及 apply

備註

推薦閱讀


這篇文章的原始位置在這裡-JavaScript - Call and Apply

由於部落格搬遷至此,因此在這裡放了一份,以便閱讀;部份文章片段也做了些許修改,以期提供更好的內容。
標籤: javascript
comments powered by Disqus