JavaScript - Call and Apply

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

實際應用範例

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

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

Note

  • jQuery.ajax.fake - 如果web service尚未準備好，使用這個plugin來製造假的web service於開發或測試階段真的滿方便的。
  • 關於「this」，這個this即context，在本例中也就是即物件proj。

推薦閱讀

由於部落格搬家了，因此在新落格也放了一份，未來若有增刪會在這裡更新-JavaScript: Call and Apply。

留言

張貼留言