Advance JavaScript 7 - this pada arrow function

-
Advance JavaScript 7 - this pada arrow function

Kita disini masih membahas seputar arrow function,yang dimana Kali ini Kita akan membahas koneks dari this jika Kita menggunakan arrow function.





Kita semua sudah Tau bahwa di dalam function declaration maupun expression itu mempunyai konteks this ,nah jika Kita mengubah sebuah function expression menjadi arrow function  maka konteks this nya itu menjadi berbeda.



Contoh code nya


Constructur function

const mahasiswa = function () {
this.nama = 'gimasn'
this.umur = 33,
this.sayhello = function (){
console.log('hallo nama saya, ${this.nama}, Dan saya ${this.umur}, tahun';
}


}


const gimasn = new mahasiswa()




Ini kalau dijalankan tidak Ada masalah normal normal Saja namun jangan gunakan arrow function untuk membuat constructur function karena tidak bisa Dan akan error jadi tidak bisa semua function itu diubah begitu saja menjadi arrow function. Tetapi kalau methode bisa 




Constructur function

const mahasiswa = function () {
this.nama = 'gimasn'
this.umur = 33,
this.sayhello =  () => {
console.log('hallo nama saya, ${this.nama}, Dan saya ${this.umur}, tahun';
}


}


const gimasn = new mahasiswa()

Seperti ini ,kalau ini dijalankan ga error ,kelihatan nya sama saja ketika memakai function expression Dan arrow function Tapi sebetulnya pada saat Kita gunakan arrow function  ,arrow function sebetulnya tidak menyimpan konteks this ,ini akan berbeda ketika Kita bikin object nya tidak menggunakan constructur function Tapi pake object literal.


const murid  = {
nama : "gimasn,
umur: 32,
sayhello : function () {
console.log('hallo, nama saya ${nama } saya ${umur}, tahun')
}


}


Kalau dijalankan ini masih normal Saja namun ini akan beda jika method nya Kita ganti menjadi arrow function

const murid  = {
nama : "gimasn,
umur: 32,
sayhello :  () => {
console.log('hallo, nama saya ${nama } saya ${umur}, tahun')
}


}

Ini kalau dijalankan akan memunculkan undefined, sekarang this ini tidak mencari ke lexical scope nya , karena tadi arrow function tidak mempunyai konsep this, maka dia akan nyari ke atas nya ada this ga kalau ga Ada dia nyari ke atas nya lagi sampai di window, di window kalau ga Ada this maka maka tampilkan undefined





Contoh kasus 

const mahasiswa () {
this.nama = 'gimasn';
this.umur = 33;
this.sayhello = function () {
console.log('hallo nama saya, ${this.nama}, saya ${this.umur}, tahun');
}

setinterval(function () {
console.log(this.umur++);

},500);




}


const gimas = new mahasiswa ()




Ini akan menghasilkan NaN, kenapa NaN  Karena yang dia jumlahin bukan 33 window, 


Untuk mengatasi ini Kita bisa memakai arrow function tadi


const mahasiswa () {
this.nama = 'gimasn';
this.umur = 33;
this.sayhello = function () {
console.log('hallo nama saya, ${this.nama}, saya ${this.umur}, tahun');
}

setinterval(()  => {
console.log(this.umur++);

},500);




}


const gimas = new mahasiswa ()


Pahami logika nya sekarang kalau ini dijalankan arrow function tidak punya konsep this ,maka this nya akan mencari ke lexical scope nya ,jadi sekarang this nya yaitu mahasiswa sehingga Kita kasih this umur ++ angkanya nambah 


Jadi tidak semua function itu bisa diganti dengan menggunakan arrow function

Komentar

Posting Komentar

Postingan populer dari blog ini

ethical hacking part 14 membuat malware Trojan

-
Gambar
ethical hacking part 14 membuat malware Trojan Di tutorial Kali ini Kita akan belajar membuat virus Trojan , apa itu Trojan ,Trojan ini adalah sebuah malicious software (malware) Yang merupakan file exe Yang berbahaya Yang dimana didalam file exe tersebut Kita memasukan payloads Yang Kita gunakan untuk memperoleh akses pada target mesin Untuk menggunakan Trojan ini Kita harus memasukan sendiri Trojan kedalam target mesin ,caranya bisa saja Kita gunakan USB,kirim melalui email apapun caranya Yang penting Trojan ini bisa masuk kedalam target  mesin Dan user dari target mesin nya harus menjalankan Trojan tersebut ,Cara nya bisa saja Kita masukan Trojan nya kedalam sebuah program Dan ketika user mendownload,menginstall Dan menjalan program tersebut Trojan nya akan memberi Kita akses ataupun Kita sisipkan kedalam sebuah gambar (image) Dan ketika usernya membuka gambarnya maka Kita Akan memperoleh akses ,membutuhkan skill sosial engineering tinggi untuk melakukan exploit i...
Baca selengkapnya

CSS layouting - box model: CSS reset

-
Gambar
CSS layouting -  box model: CSS reset Ketika kalian membuat sebuah box itu terkadang terdapat ruang kosong di sisi Kiri element nya ,padahal Kita belum tidak atau belum menambahkan style padding/margin . Supaya Kita dapat kendali penuh untuk styling element nya itu Kita gunakan yang namanya CSS reset. Metode CSS reset sederhana * { padding:0; margin:0; } Atau jika ingin lebih komplek bisa search di browser CSS reset nanti akan banyak CSS reset yang sudah dibuat oleh orang lain Dan Kita tinggal copy Dan paste .
Baca selengkapnya

ethical hacking part 3 reconnaissance & information gethering

-
Gambar
  ethical hacking part 3 reconnaissance &    information gethering Saya sudah sampaikan tentang reconnaissance Dan information gethering ini sebelum nya Dan sekarang Kita akan mempraktekan nya Ada 2 Cara untuk melakukan information gethering ini Yang ke satu active information gethering Dan Yang kedua passive information gethering Active information gethering ini adalah Kita mengumpulkan informasi dengan Cara berinteraksi langsung dengan si target. Passive information gethering ini adalah Kita mengumpulkan informasi tentang si target dengan melalui pihak ketiga atau melalui middle source  misal nya Kita browser di internet dengan Google untuk mencari informasi tentang si target. Apapun Cara nya tujuan nya Sama yaitu mencari informasi tentang target Tools tools Yang bisa Kita pakai untuk melakukan information gethering ini ada banyak yaitu ping,whois,nslookup,whatweb,theHarvester, Hunter.io Dan Sherlock. Kita akan mulai dengan melakukan active...
Baca selengkapnya