Javascript kata kunci ini – Phppot

Programming

Oleh Vinci terakhir diubah pada 13 September 2022.

Aksara Jawa ini Kata kuncinya adalah merujuk ke objek dalam konteks saat ini. Jika tidak ada konteks di sekitarnya, defaultnya adalah konteks jendela.

Ada lebih banyak konteks yang dapat dirujuk oleh JavaScript ini kata kunci. Daftar berikut menunjukkan beberapa di antaranya.

  • Konteks global
  • Konteks metode
  • bidang pertunjukan
  • konteks kelas
  • konteks acara

Di bidang ini, JavaScript ini Kata kunci mengacu pada objek yang berbeda masing-masing.

Kode berikut menggunakan kata kunci “ini” untuk mencetak kategori utama dan subkategori di browser.

Contoh cepat

Contoh ini menggunakan “JavaScript this” dalam metode objek untuk membaca properti.


<script>
const category = {
  mainCategory: "Gadgets",
  subCategory: "Mobile phones",
  DisplayCategoryTree : function() {
	  return this.mainCategory + " -> " + this.subCategory;
  }
};
document.write(category.DisplayCategoryTree());
</script>

Ini adalah JavaScript

bagaimana itu bekerja

Perilaku menggunakan “ini” bervariasi berdasarkan beberapa faktor. Beberapa di antaranya adalah sebagai berikut.

  1. Bedakan antara pengikatan dinamis dan eksplisit.
  2. Ia bekerja secara berbeda dalam mode keras dan non-keras.
  3. Ini bervariasi menurut kandang.
  4. Ini bervariasi berdasarkan bagaimana dan di mana mereka dipanggil atau digunakan.

Secara umum, “ini” berperilaku dengan pengikatan dinamis. JavaScript mendukung pengikatan eksplisit dengan metode bind() untuk mengubah default.

Tanpa nilai default, JavaScript “ini” mengembalikan “tidak terdefinisi” dalam mode ketat.

Penggunaan yang berbeda dari “ini” dalam JavaScript

Ada penggunaan yang berbeda dalam JavaScript untuk menggunakan kata kunci “ini” untuk merujuk ke suatu konteks. Mari kita lihat tentang 2 berikut di antara metode tersebut.

  1. Tetapkan nilai default ke “ini”.
  2. Fungsi panah.

Secara default, “ini” mengacu pada konteks global. Namun, dalam kasus sulit, fungsi memerlukan nilai default untuk menggunakan “ini” sebagai referensi. Kelas JavaScript selalu ketat dan memerlukan referensi objek untuk menggunakan “ini”.

Fungsi panah JavaScript menyediakan kode terkompresi. Jadi kita bisa memilihnya untuk menulis kode terbatas dengan tujuan. Tapi, saya lebih suka menggunakan ekspresi tradisional saat coding.

Lebih banyak contoh menggunakan JavaScript di sini

Bagian ini memberikan lebih banyak contoh kata kunci ‘JavaScript this’. Ini menunjukkan bagaimana “itu” akan bekerja dalam skenario dan konteks yang berbeda.

Menyediakan kode untuk mengakses properti dari kelas atau blok const JavaScript.

Mengakses elemen HTML di event handler. Ini membantu memanipulasi objek DOM melalui JavaScript dengan merujuk kata kunci “ini”.

Contoh 1: Mengakses properti objek melalui ini Menggunakan fungsi JavaScript call()

Program ini mengikat properti dari satu objek dengan metode objek lain. Ini menggunakan panggilan JavaScript () untuk mendaftarkan properti dengan referensi ‘.ini’ Tujuan – objek.

ikat-objek-dan-dapatkan-properti-dengan-ini.html


<script>
const category = {
  DisplayCategoryTree : function() {
	  return this.mainCategory + " -> " + this.subCategory;
  }
};
const categoryData = {
  mainCategory: "Gadgets",
  subCategory: "Mobile phones",
};

console.log(category.DisplayCategoryTree.call(categoryData));
</script>

Contoh 2: JavaScript ini Dalam mode ketat

Dalam JavaScript yang ketat, kata kunci ini mengacu pada konteks jendela global. Tetapi, dalam suatu fungsi, ia mengembalikannya Tidak terdefinisi

javascript-this-in-strict-mode.html


<script>
"use strict";
let obj = this;
// 'this' is 'window' object
console.log(obj);

function getContext() {
  return this;
}
// In strict mode, JavaScript 'this' inside a funtion is 'undefined'
console.log(getContext());
</script>

Contoh 3: Tetapkan atau dapatkan properti objek menggunakan kata kunci ini

Contoh ini mendefinisikan properti suatu objek. juga. Itu membaca mereka menggunakan kata kunci JavaScript ini. Mendefinisikan fungsi untuk mendapatkan atau mengatur properti.

javascript-getter-setter-with-this-object-html.php


<script>
const Properties = {
    color: "Black",
    size: "Big",
    type: "2D",

    getColor: function() {
        return this.color;
    },
    setColor: function(newColor) {
        this.color = newColor;
    },
    getSize: function() {
        return this.size;
    },
    setSize: function(newSize) {
        this.size = newSize;
    },

    getType: function() {
        return this.type;
    },
    setType: function(newType) {
        this.type = newType;
    }
};
Properties.setColor("White");
Properties.setSize("small");
Properties.setType("3D");

document.write("Color: "+ Properties.getColor()+"<br>");
document.write("Size: "+ Properties.getSize()+"<br>");
document.write("Type: "+ Properties.getType());
</script>

Contoh 4: JavaScript objek ini dalam konteks yang berbeda

Skrip ini mendaftarkan objek “JavaScript this” dalam berbagai konteks. Program ini membuat dua kelas dan mendaftarkan objek “ini” dari konstruktornya. Mengembalikan instance pemilik yang sesuai dan memasukkannya ke dalam konsol pengembang.

Saya sudah menulis tutorial serupa tentang konstruktor dan destruktor PHP.

Mengembalikan ‘ini’ dari fungsi jQuery document.ready() Dokumen:[object HTMLDocument].

this-in-different-context.php


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var x = this;
console.log("Default:" + x);

class Cart {
    constructor() {
        console.log("Class:" + this + " of " + this.constructor.name);
    }
}
const cart = new Cart();

class Product {
    constructor() {
        console.log("Class:" + this + " of " + this.constructor.name);
    }
}
const product = new Product();

$(document).ready(function(){
    var x = this;
    console.log("Document:" + x);
});
</script>

Program ini mencatat hal berikut di konsol pengembang. Objek “ini” mengacu pada konteks yang berbeda.

Javascript referensi ini

Contoh 5: JavaScript kata kunci ini dalam konteks acara

Kode berikut berisi tombol HTML dengan event handler klik. Ini melewati objek “ini” untuk memanipulasi gaya elemen tombol. Di sini objek JavaScript mengacu pada elemen tombol.

Acara klik memanggil metode highlight(this). Mengubah warna latar belakang tombol saat diklik.

this-in-event-handler.html


<button onclick="highlight(this)">Button</button>
<script>
function highlight(obj) {
  obj.style.backgroundColor="#0099FF";
}
</script>

Contoh 6: Menggunakan fungsi Panah

Lihat contoh di bawah ini yang membuat kode pos untuk mendapatkan konteks global menggunakan “ini”.

Membuat fungsi yang terdiri dari satu baris kode untuk mengembalikan objek global. Baris ini menggunakan fungsi panah JavaScript untuk menggunakan “ini”.

panah-fungsi.html


<script>
var getGlobal = (() => this);
console.log(getGlobal());
</script>

Hasil

Saya harap Anda memiliki ide bagus tentang konsep JavaScript dasar ini. Kode contoh akan memandu Anda melalui cara menggunakan “ini” dalam JavaScript.

Contoh dengan event handler dan fungsi panah mengembalikan referensi ke objek terkait. Beri tahu saya komentar berharga Anda tentang artikel ini di bagian komentar.
Unduh

Kembali ke atas


Source link

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.