JavaScript: Kenapa this jadi self ?

Tagged as: ,

Anda mungkin pernah terjumpa kod JavaScript yang mungkin kelihatan seperti berikut:-

app = new App({
    newMessage: '',
    connect: function() {
        var socket = new WebSocket(url);
        var self = this;
        socket.onmessage = function(msg) {
            self.newMessage = msg;
        }
    }
});

Dan anda tertanya-tanya kenapa perlu ada self = this ?

Ini kerana this dalam function, sekiranya function tersebut dipanggil menggunakan cara invocation biasa seperti getfunctionName(), adalah merujuk kepada global object Window (jika dalam persekitaran browser). Ini mungkin agak kurang intuitif jika anda datang daripada bahasa Java atau PHP di mana this merujuk kepada current instance.

Nilai this ini boleh di’customize’ dengan menggunakan function function.apply. Cara invokasi biasa function:-

doSomething(myName);

Adalah bersamaan dengan:-

doSomething.apply(null, [myName]);

Secara asasnya, sintaks function.apply boleh diringkaskan seperti berikut:-

theFunction.apply(theValueThatWillBecomethis, [theArgumentsToPass])

Dalam contoh di atas, oleh kerana nilai argument yang pertama adalah null, maka this merujuk kepada objek Window. Untuk menukar this kepada nilai yang kita kehendaki, kita boleh memanggil function tadi seperti berikut:-

doSomething.apply(doSomething, [myName]);

Sekarang this adalah merujuk kepada function itu sendiri. Selain itu, penggunaan keyword new juga akan menukar nilai this kepada object kosong {}.

Bagaimana ini menjawab soalan berkaitan self di atas ? Kita rujuk kembali contoh pertama di atas. Dalam function onmessage di atas, kita tidak tahu bagaimana function tersebut akan dipanggil, jadi kita juga tidak tahu apa nilai this dalam function tersebut. Untuk mengekalkan this kepada this yang diluar onmessage, maka kita bind nilai this itu kepada variable baru yang kita namakan self.

Ada yang berpendapat nama self sepatutnya tidak digunakan lagi kerana dalam implementasi yang terkini, nama self turut digunakan sebagai built-in object. Selain self ada yang lebih gemar menggunakan nama that:-

var that = this;

Bagaimana pun ia terpulang kepada anda nama apa yang hendak digunakan.

Written on March 28, 2016 by kamal
About author

Lead Engineer at Xoxzo Inc. Develop web applications in Python/Django. Interested in open source and tech talent development.

Xoxzo.com provide API services for developer to develop messaging and voice based application. The postings on this site are my own and don't necessarily represent my employer's positions, strategies or opinions. I can be reached via Twitter @k4ml.

Ikuti perkembangan terkini melalui twitter kami @koditi atau FB Page fb.me/koditi.