Apa kata kunci this dalam javascript?

ini dalam JavaScript

Meningkatkan Artikel

Simpan Artikel

Seperti Artikel

  • Tingkat Kesulitan. Sedang
  • Terakhir Diperbarui. 29 Sep, 2022

  • Membaca
  • Membahas
  • Kursus
  • Praktik
  • Video
  • Meningkatkan Artikel

    Simpan Artikel

    kata kunci ini dalam javascript selalu menyimpan referensi ke satu objek, yang menentukan baris konteks eksekusi kode saat ini. Fungsi, dalam JavaScript, pada dasarnya adalah objek. Seperti objek, mereka dapat ditugaskan ke variabel, diteruskan ke fungsi lain, dan dikembalikan dari fungsi. Dan seperti halnya objek, mereka memiliki propertinya sendiri. Salah satu properti ini adalah ini

    Nilai yang disimpan ini adalah konteks eksekusi saat ini dari program JavaScript. Jadi, ketika digunakan di dalam suatu fungsi, nilai ini akan berubah tergantung pada bagaimana fungsi itu didefinisikan, bagaimana itu dipanggil dan konteks eksekusi default. kata kunci ini akan merujuk ke objek yang berbeda tergantung bagaimana kata kunci itu digunakan.  

    Fungsi, dalam JavaScript, dapat dipanggil dengan berbagai cara

    ini dengan pemanggilan fungsi

    Pemanggilan fungsi mengacu pada proses memanggil fungsi menggunakan namanya atau ekspresi yang mengevaluasi objek fungsi diikuti dengan serangkaian tanda kurung buka dan tutup pertama (dimasukkannya tanda kurung menunjukkan bahwa kami meminta mesin JavaScript untuk segera menjalankan fungsi
    Contohnya.  
     

    JavaScript




    <!DOCTYPE html>

    <html>

    <body>

    undefined
    undefined 
    0

    undefined
    undefined 
    1
    undefined
    undefined 
    2
    undefined
    undefined 
    3

    undefined
    undefined 
    4
    undefined
    undefined 
    5

    undefined
    undefined 
    1
    undefined
    undefined 
    7

     

    undefined
    undefined 
    _8

    undefined
    undefined 
    _9

    John is 31 years old 
    _0

    John is 31 years old 
    _1

    John is 31 years old 
    _2

    ini di dalam fungsi doSomething, jika dipanggil melalui pemanggilan fungsi seperti di atas, memiliki nilai objek global, yang merupakan objek jendela di lingkungan browser
     

    JavaScript




    <!DOCTYPE html>

    <html>

    <body>

    undefined
    undefined 
    0

    undefined
    undefined 
    1
    undefined
    undefined 
    2
    John is 31 years old 
    9

     

    [object Object] 1
    [object Object] 2 
    0
    [object Object] 1
    [object Object] 2 
    1

    undefined
    undefined 
    4
    [object Object] 1
    [object Object] 2 
    3
    [object Object] 1
    [object Object] 2 
    4
    [object Object] 1
    [object Object] 2 
    5
    [object Object] 1
    [object Object] 2 
    6

    undefined
    undefined 
    1
    undefined
    undefined 
    7

     

    undefined
    undefined 
    _8

    undefined
    undefined 
    _9

    [object Object] [object Window] NaN
    [object Object] [object Window] NaN 
    1

    John is 31 years old 
    _0

    John is 31 years old 
    _1

    [object Object] [object Window] NaN
    [object Object] [object Window] NaN 
    4

    Keluaran.   

    test value 

    Namun, ini tidak selalu terjadi. Jika fungsi doSomething() berjalan dalam mode ketat, itu akan mencatat tidak terdefinisi alih-alih objek jendela global. Ini karena, dalam mode ketat (ditunjukkan oleh garis. 'gunakan ketat';), nilai default ini, untuk objek fungsi apa pun, disetel ke tidak ditentukan alih-alih objek global.  

    Sebagai contoh.   

    JavaScript




    <!DOCTYPE html>

    <html>

    <body>

    undefined
    undefined 
    0

    undefined
    undefined 
    1
    undefined
    undefined 
    2
    undefined
    undefined 
    3

    undefined
    undefined 
    4
    [object Object] [object Object] 1
    [object Object] [object Object] 2 
    3

    undefined
    undefined 
    4
    [object Object] [object Object] 1
    [object Object] [object Object] 2 
    5
    [object Object] 1
    [object Object] 2 
    6

     

    [object Object] 1
    [object Object] 2 
    0
    [object Object] [object Object] 1
    [object Object] [object Object] 2 
    8

    undefined
    undefined 
    4
    John is 21 years old 
    0
    [object Object] 1
    [object Object] 2 
    3
    John is 21 years old 
    2
    John is 21 years old 
    3
    John is 21 years old 
    4

    John is 21 years old 
    5
    undefined
    undefined 
    2
    John is 21 years old 
    7

    John is 21 years old 
    8
    John is 21 years old 
    9

    John is 21 years old 
    8<!DOCTYPE html>1

    <!DOCTYPE html>2

    John is 21 years old 
    0
    [object Object] 1
    [object Object] 2 
    3
    John is 21 years old 
    4

    John is 21 years old 
    5
    undefined
    undefined 
    7

    undefined
    undefined 
    4<!DOCTYPE html>9

    undefined
    undefined 
    1
    undefined
    undefined 
    7

     

    undefined
    undefined 
    _8

    undefined
    undefined 
    _9

    John is 31 years old 
    _0

    John is 31 years old 
    _1

    <html>_6

    Keluaran.   

    undefined
    undefined 

    ini dengan pemanggilan metode

    Fungsi, ketika didefinisikan sebagai bidang atau properti objek, disebut sebagai metode.  

    JavaScript




    <!DOCTYPE html>

    <html>

    <body>

    undefined
    undefined 
    0

    undefined
    undefined 
    1<body>2

    undefined
    undefined 
    4<body>4<body>5<body>6

    undefined
    undefined 
    4<body>8

    undefined
    undefined 
    4
    undefined
    undefined 
    00
    undefined
    undefined 
    2
    undefined
    undefined 
    02

    John is 21 years old 
    5
    John is 21 years old 
    0
    [object Object] 1
    [object Object] 2 
    3
    undefined
    undefined 
    06
    undefined
    undefined 
    07
    John is 21 years old 
    2
    [object Object] 1
    [object Object] 2 
    3
    undefined
    undefined 
    10
    undefined
    undefined 
    11________0______12

    undefined
    undefined 
    4
    undefined
    undefined 
    7

    undefined
    undefined 
    1
    undefined
    undefined 
    7

    [object Object] 1
    [object Object] 2 
    0
    undefined
    undefined 
    18

    [object Object] 1
    [object Object] 2 
    0
    undefined
    undefined 
    20

    undefined
    undefined 
    21
    John is 31 years old 
    0

    John is 31 years old 
    _1

    undefined
    undefined 
    _24

    Keluaran.   

    John is 31 years old 

    Dalam contoh kode di atas, logInfo() adalah metode dari objek person dan kita memanggilnya menggunakan pola pemanggilan objek. Yaitu, kami menggunakan pengakses properti untuk mengakses metode yang merupakan bagian dari objek
    Doa semacam itu membutuhkan penggunaan ekspresi yang mengevaluasi objek yang merupakan bagian dari metode kami, dan pengakses properti (Misalnya. orang. logInfo()) diikuti dengan satu set tanda kurung buka dan tutup. Penting untuk memahami perbedaan fungsi pemanggilan dan pemanggilan metode.  

    Ini pada gilirannya akan membantu kita memahami apa konteks ini dalam fungsi tertentu karena, dalam setiap pemanggilan ini, nilai this berbeda
    Di dalam metode seperti itu, yang telah dipanggil menggunakan pengakses properti, ini akan memiliki nilai dari objek pemanggilan, yaitu ini akan menunjuk ke objek yang digunakan bersama dengan pengakses properti untuk melakukan panggilan

    Sebagai contoh.   

    JavaScript




    undefined
    undefined 
    0

    undefined
    undefined 
    1
    undefined
    undefined 
    27

    undefined
    undefined 
    4________0______29

    undefined
    undefined 
    4
    undefined
    undefined 
    31
    undefined
    undefined 
    2
    undefined
    undefined 
    02

    undefined
    undefined 
    _1

    John is 21 years old 
    5
    undefined
    undefined 
    36

    John is 21 years old 
    5
    John is 21 years old 
    0
    [object Object] 1
    [object Object] 2 
    3
    John is 21 years old 
    2
    undefined
    undefined 
    41
    John is 21 years old 
    4

    ________294

    undefined
    undefined 
    _17_______3
    undefined
    undefined 
    45

    <!DOCTYPE html>_2

    undefined
    undefined 
    47

    John is 21 years old 
    5
    undefined
    undefined 
    49
    [object Object] 1
    [object Object] 2 
    3
    undefined
    undefined 
    51

    undefined
    undefined 
    4
    undefined
    undefined 
    7

    undefined
    undefined 
    1
    undefined
    undefined 
    55

    undefined
    undefined 
    _1

    undefined
    undefined 
    1
    undefined
    undefined 
    58

    undefined
    undefined 
    1
    undefined
    undefined 
    60
    John is 21 years old 
    3
    undefined
    undefined 
    12

    undefined
    undefined 
    1
    undefined
    undefined 
    64

    undefined
    undefined 
    1
    undefined
    undefined 
    66

    undefined
    undefined 
    _67

    Keluaran.   

    [object Object] 1
    [object Object] 2 

    Dalam contoh di atas, calc() adalah metode objek tambahan dan karena itu dipanggil menggunakan aturan pemanggilan metode pada baris 9 dan 10.  
    Dan kita tahu, ketika pola pemanggilan metode digunakan, nilai this disetel ke objek pemanggil. Di dalam metode calc() ini, nilai this disetel ke objek pemanggil, yang dalam kasus kita ditambahkan. dan dengan demikian kita dapat berhasil mengakses properti num add.  

    Namun, mari kita lihat satu titik kebingungan utama. Apa yang terjadi pada fungsi yang bersarang di dalam metode objek?

    JavaScript




    undefined
    undefined 
    0

    undefined
    undefined 
    1
    undefined
    undefined 
    27

    undefined
    undefined 
    4________0______29

    undefined
    undefined 
    4
    undefined
    undefined 
    31
    undefined
    undefined 
    2
    undefined
    undefined 
    02

    undefined
    undefined 
    _1

    undefined
    undefined 
    4
    undefined
    undefined 
    36

    undefined
    undefined 
    4
    John is 21 years old 
    0
    [object Object] 1
    [object Object] 2 
    3
    John is 21 years old 
    2
    undefined
    undefined 
    41
    John is 21 years old 
    4

    undefined
    undefined 
    _1

    undefined
    undefined 
    4
    undefined
    undefined 
    2
    undefined
    undefined 
    89

    John is 21 years old 
    5
    [object Object] 1
    [object Object] 2 
    3
    undefined
    undefined 
    92

    undefined
    undefined 
    _1

    undefined
    undefined 
    4
    undefined
    undefined 
    95

    undefined
    undefined 
    4
    John is 21 years old 
    0
    [object Object] 1
    [object Object] 2 
    3
    John is 21 years old 
    2
    undefined
    undefined 
    41
    undefined
    undefined 
    12

    undefined
    undefined 
    _1

    undefined
    undefined 
    4
    undefined
    undefined 
    49
    [object Object] 1
    [object Object] 2 
    3
    undefined
    undefined 
    45

    undefined
    undefined 
    _1

    undefined
    undefined 
    1
    undefined
    undefined 
    7
    undefined
    undefined 
    49
    John is 31 years old 
    11

    John is 31 years old 
    12
    undefined
    undefined 
    7

    undefined
    undefined 
    1
    undefined
    undefined 
    55

    undefined
    undefined 
    _1

    undefined
    undefined 
    1
    John is 31 years old 
    18

    undefined
    undefined 
    1
    undefined
    undefined 
    60
    John is 21 years old 
    3
    undefined
    undefined 
    12

    undefined
    undefined 
    _1

    undefined
    undefined 
    1
    John is 31 years old 
    18

    undefined
    undefined 
    1
    undefined
    undefined 
    66

    undefined
    undefined 
    _67

    Keluaran.   

    [object Object] [object Window] NaN
    [object Object] [object Window] NaN 

    Mari kita coba memahami apa yang baru saja terjadi. Saat kita memanggil calc() di baris 14 dan 15 kita menggunakan pemanggilan metode yang menyetel ini untuk ditambahkan di calc(). Ini dapat diverifikasi menggunakan pernyataan log pada baris 4
    Namun, innerfunc() dipanggil dari dalam metode calc() menggunakan pemanggilan fungsi sederhana(baris 11 ). Ini berarti, di dalam innerfunc() ini diatur ke objek global, yang tidak memiliki properti num, dan karenanya output NaN diperoleh

    Bagaimana kita memecahkan masalah ini?

    Salah satu solusinya adalah dengan menetapkan nilai ini dari fungsi luar ke variabel yang akan digunakan dalam fungsi bersarang seperti itu.  

    JavaScript




    undefined
    undefined 
    0

    undefined
    undefined 
    1
    undefined
    undefined 
    27

    undefined
    undefined 
    4________0______29

    undefined
    undefined 
    4
    undefined
    undefined 
    31
    undefined
    undefined 
    2
    undefined
    undefined 
    02

     

    John is 21 years old 
    5
    undefined
    undefined 
    36

    John is 21 years old 
    5
    John is 21 years old 
    0
    [object Object] 1
    [object Object] 2 
    3
    John is 21 years old 
    2
    undefined
    undefined 
    41
    John is 21 years old 
    4

     

    John is 31 years old 
    _46
    John is 31 years old 
    47

    John is 31 years old 
    _46
    John is 31 years old 
    49

    John is 31 years old 
    _46
    John is 31 years old 
    51
    [object Object] 1
    [object Object] 2 
    3
    [object Object] 1
    [object Object] 2 
    6

     

    John is 21 years old 
    5
    undefined
    undefined 
    2
    John is 31 years old 
    56

    John is 21 years old 
    5
    John is 31 years old 
    58

     

    John is 31 years old 
    _59
    John is 31 years old 
    60

    John is 31 years old 
    _59
    John is 31 years old 
    62

    ________294

    undefined
    undefined 
    _10_______64

     

    John is 31 years old 
    _65
    undefined
    undefined 
    36

    <!DOCTYPE html>2

    John is 31 years old 
    68
    undefined
    undefined 
    41
    undefined
    undefined 
    12

    <!DOCTYPE html>2

    undefined
    undefined 
    49
    John is 31 years old 
    73

    John is 21 years old 
    5
    undefined
    undefined 
    7

    John is 21 years old 
    5
    undefined
    undefined 
    49
    John is 31 years old 
    11

    undefined
    undefined 
    4
    undefined
    undefined 
    7

    undefined
    undefined 
    1
    undefined
    undefined 
    55

    undefined
    undefined 
    1
    undefined
    undefined 
    58

    undefined
    undefined 
    1
    undefined
    undefined 
    60
    John is 21 years old 
    3
    undefined
    undefined 
    12

     

    undefined
    undefined 
    1
    undefined
    undefined 
    64

    undefined
    undefined 
    1
    undefined
    undefined 
    66

    John is 31 years old 
    _93

    Keluaran.   

    [object Object] [object Object] 1
    [object Object] [object Object] 2 

    Solusi lain untuk masalah ini melibatkan penggunaan bind(), call(), atau apply(), yang akan segera kita bahas

    ini dengan doa konstruktor

    Doa konstruktor dilakukan ketika kata kunci baru diikuti oleh nama fungsi, dan satu set tanda kurung buka dan tutup (dengan atau tanpa argumen)

    Sebagai contoh. biarkan person1= Orang baru('John', 21);

    Di sini, person1 adalah objek yang baru dibuat dan People adalah fungsi konstruktor yang digunakan untuk membuat objek ini. Pemanggilan konstruktor adalah salah satu dari beberapa cara untuk membuat objek dalam JavaScript. Apa yang sebenarnya terjadi saat kita menggunakan kata kunci baru bersamaan dengan nama fungsi? .  

    Mari kita mempelajarinya dengan contoh berikut.  

    JavaScript




    undefined
    undefined 
    0

    undefined
    undefined 
    1
    John is 31 years old 
    96
    undefined
    undefined 
    2
    John is 31 years old 
    98

    John is 31 years old 
    _59
    [object Object] 1
    [object Object] 2 
    3
    [object Object] 1
    [object Object] 2 
    01

    John is 31 years old 
    _59
    [object Object] 1
    [object Object] 2 
    3
    [object Object] 1
    [object Object] 2 
    04

    undefined
    undefined 
    _1

    undefined
    undefined 
    4
    [object Object] 1
    [object Object] 2 
    3
    [object Object] 1
    [object Object] 2 
    08
    undefined
    undefined 
    2
    undefined
    undefined 
    02

    John is 31 years old 
    46
    John is 21 years old 
    0
    [object Object] 1
    [object Object] 2 
    3
    undefined
    undefined 
    06
    undefined
    undefined 
    07
    John is 21 years old 
    2
    [object Object] 1
    [object Object] 2 
    3
    undefined
    undefined 
    10
    [object Object] 1
    [object Object] 2 
    19________0______12

    Apakah kata kunci ini penting dalam JavaScript?

    Tetapi ini sangat penting untuk menulis kode JavaScript yang lebih canggih . Dalam JavaScript, kata kunci ini memungkinkan kita untuk. Gunakan kembali fungsi dalam konteks eksekusi yang berbeda. Artinya, suatu fungsi yang pernah ditentukan dapat dipanggil untuk objek yang berbeda menggunakan kata kunci ini.

    Apakah kata kunci atau variabel ini dalam JavaScript?

    kata kunci ini mendefinisikan objek, objek yang mengeksekusi bit kode JavaScript saat ini. Dalam JavaScript, variabel “ini” adalah variabel yang didapat setiap konteks eksekusi, dalam pemanggilan fungsi reguler. Setiap fungsi JavaScript memiliki referensi ke konteks eksekusi saat ini saat mengeksekusi, disebut ini.

    Apa artinya ini => dalam JavaScript?

    Ini adalah fitur baru yang diperkenalkan di ES6 dan disebut fungsi panah . Bagian kiri menunjukkan input dari suatu fungsi dan bagian kanan menunjukkan output dari fungsi itu.

    Apa kata kunci ini di ES6?

    Sementara di ES5 'ini' merujuk ke induk fungsi, di ES6, fungsi panah menggunakan pelingkupan leksikal — 'ini' mengacu pada cakupan sekitarnya saat ini dan tidak lebih jauh< . Jadi fungsi batin tahu untuk mengikat fungsi batin saja, dan bukan metode objek atau objek itu sendiri. . Thus the inner function knew to bind to the inner function only, and not to the object's method or the object itself.