JavaScript mengambil kendali yang baru

Cara cepat memulai VUE3.0: Masuk ke

kata pengantar

Apa yang new ?

Operator new membuat sebuah instance dari tipe objek yang ditentukan pengguna atau salah satu tipe objek bawaan yang memiliki konstruktor.

Masih agak kabur hanya dengan melihat definisinya. Mari kita lihat contoh spesifik untuk memahami fungsi new di JavaScript .

Misalnya

// Anda tidak bisa menurunkan berat badan di kehidupan nyata, tetapi Anda harus tetap langsing secara online function Thin_User(nama, umur) {
    ini.nama = nama;
    this.usia = usia;
}

Thin_User.prototype.eatToMuch = fungsi () {
    // Melamun dan meninggalkan air mata yang menggembung console.log('aku makan banyak, tapi aku sangat kurus!!!');
}

Thin_User.prototype.isThin = benar;

const xiaobao = new Thin_User('zcxiaobao', 18);
console.log(xiaobao.nama); // zcxiaobao
konsol.log(xiaobao.usia); // 18
console.log(xiaobao.isThin); // benar
// aku makan banyak sekali, tapi aku sangat kurus!!!
xiaobao.eatToMuch();

Melalui contoh di atas, kita dapat menemukan xiaobao dapat:

• mengakses properti di konstruktor Thin_User
• mengakses properti di Thin_User.prototype ,

dan mendeskripsikannya dengan lebih lugas, new melakukan hal-hal berikut:

• membuat objek kosong, __proto__->Thin_User.prototype objek
• mengeksekusi konstruktor dan this ke objek baru
• untuk mengembalikan objek baru.

Instruksi tambahan:

Karena new adalah kata kunci, kami tidak dapat menimpanya seperti metode simulasi array tingkat tinggi, jadi kami menulis fungsi createObject untuk mensimulasikan efek new . Penggunaannya sebagai berikut:

function Thin_User(nama, umur) {}

const u1 = pengguna_tipis baru(...)
const u2 = createObject(Thin_User, ...a)

Simulasi awal

Berdasarkan analisis di atas, langkah umum untuk menulis createObject adalah:

• Buat objek baru obj
• dan setel obj.__proto__->constructor.prototype ( tetapi JavaScript tidak menyarankan langsung memodifikasi Atribut __proto__, metode setPrototypeOf disediakan untuk secara khusus memodifikasi prototipe )
• Gunakan constructor.call/apply(obj, ...) untuk menambahkan atribut ke obj dan
• mengembalikan obj

__proto__和prototype prototipe dan rantai prototipe.
call/apply , Anda dapat melihat tutorial JavaScript tentang panggilan dan penerapan.

Setelah mempelajari ini, kita dapat menulis kode versi pertama:

function createObject(Con) {
    //Buat objek objek baru
    // var obj = {}; bisa juga var obj = Object.create(null);

    // Konversi obj.__proto__ -> prototipe konstruktor // (tidak disarankan) obj.__proto__ = Con.prototype
    Objek.setPrototypeOf(obj, Con.prototype);

    //Jalankan konstruktor Con.apply(obj, [].slice.call(arguments, 1));

    // Mengembalikan objek baru return obj;}

Efek nilai kembalian

Seperti yang kita ketahui, fungsi memiliki nilai kembalian, jadi jika konstruktor memiliki nilai kembalian, apa hasil yang dikembalikan setelah eksekusi akhir new ?

Nilai kembalian adalah tipe dasar.

Dengan asumsi bahwa nilai kembalian konstruktor adalah tipe dasar, mari kita lihat hasil akhir pengembalian:

function Thin_User(name, age) {
    ini.nama = nama;
    this.usia = usia;
    kembalikan 'aku akan tetap kurus selamanya';
}

Thin_User.prototype.eatToMuch = fungsi () {
    console.log('saya makan banyak, tapi saya sangat kurus!!!');
}

Thin_User.prototype.isThin = benar;

const xiaobao = new Thin_User('zcxiaobao', 18);
console.log(xiaobao.nama); // zcxiaobao
konsol.log(xiaobao.usia); // 18
console.log(xiaobao.isThin); // benar
// aku makan banyak sekali, tapi aku sangat kurus!!!
xiaobao.eatToMuch();

Hasil pengembalian akhir tampaknya mengalami gangguan apa pun.

Jangan khawatir, mari kita terus menguji situasi di mana nilai yang dikembalikan adalah sebuah objek.

Nilai yang dikembalikan adalah

fungsi objek Thin_User(name, age) {
    ini.nama = nama;
    this.usia = usia;
    kembali {
        nama: nama,
        usia: usia * 10,
        gemuk: benar
    }
}

Thin_User.prototype.eatToMuch = fungsi () {
    // Melamun dan meninggalkan air mata yang menggembung console.log('aku makan banyak, tapi aku sangat kurus!!!');
}

Thin_User.prototype.isThin = benar;

const xiaobao = new Thin_User('zcxiaobao', 18);
// Kesalahan: xiaobao.eatToMuch bukan sebuah fungsi
xiaobao.eatToMuch();

Ketika saya mengeksekusi eatToMuch , konsol melaporkan kesalahan secara langsung dan tidak ada fungsi saat ini, jadi saya mencetak objek xiaobao :

Ditemukan bahwa age objek xiaobao telah berubah, dan atribut fat telah ditambahkan, yang persis sama dengan nilai kembalian konstruktor.

Setelah membaca dua contoh ini, pada dasarnya Anda dapat memperjelas situasi ketika konstruktor mengembalikan nilai: ketika konstruktor mengembalikan sebuah objek, objek tersebut dikembalikan secara langsung.

simulasi akhir

createObject(Con) {
    //Buat objek objek baru
    // var obj = {}; bisa juga var obj = Object.create(null);

    // Konversi obj.__proto__ -> prototipe konstruktor // (tidak disarankan) obj.__proto__ = Con.prototype
    Objek.setPrototypeOf(obj, Con.prototype);

    //Jalankan konstruktor dan terima nilai kembalian konstruktor const ret = Con.apply(obj, [].slice.call(arguments, 1));

    // Jika nilai kembalian dari konstruktor adalah sebuah objek, kembalikan objek tersebut secara langsung // Jika tidak, kembalikan objek
    kembalikan typeof(ret) === 'objek' ?