JavaScript: Call and Apply

03 May 2015

JavaScript

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);
});