Mengapa Saya Tidak Boleh Menggunakan Fungsi Anak Panah untuk Kaedah Objek dalam ES6?

Fungsi Anak Panah dalam Objek ES6

Dalam ES6, anda boleh mentakrifkan kaedah dalam objek menggunakan kedua-dua sintaks fungsi tradisional dan sintaks kaedah trengkas yang diperkenalkan dalam bahasa:

var chopper = {
    owner: 'Zed',
    getOwner: function() { return this.owner; }
};

var chopper = {
    owner: 'Zed',
    getOwner() { return this.owner; }
};

Walau bagaimanapun, anda mungkin menghadapi had apabila cuba menggunakan fungsi anak panah dalam kaedah objek. Sebagai contoh, menggunakan sintaks berikut akan mengakibatkan ralat:

var chopper = {
    owner: 'John',
    getOwner: () => { return this.owner; }
};

atau

var chopper = {
    owner: 'John',
    getOwner: () => (this.owner)
};

Penjelasan

Fungsi anak panah mempunyai ciri khusus yang menjadikannya tidak sesuai untuk digunakan sebagai kaedah objek.

• Leksikal Skop: Fungsi anak panah mewarisi nilai ini daripada skop leksikal sekeliling, bukan objek di mana ia ditakrifkan. Ini bermakna ini dalam fungsi anak panah merujuk kepada konteks di mana objek ditakrifkan, bukan objek itu sendiri.

Oleh itu, apabila anda mentakrifkan fungsi anak panah dalam objek ES6, ini dalam fungsi akan merujuk kepada konteks di mana objek itu dicipta. Contohnya, jika anda mentakrifkan pencincang objek dalam skop global, getOwner dalam ini akan merujuk kepada skop global, bukan objek pencincang.

Penyelesaian

Untuk menulis kaedah objek dalam ES6, anda harus menggunakan sintaks fungsi tradisional atau sintaks kaedah trengkas yang direka khusus untuk objek:

var chopper = {
    owner: 'Zed',
    getOwner: function() {
        return this.owner;
    }
};

// or

var chopper = {
    owner: 'Zed',
    getOwner() {
        return this.owner;
    }
};

Kaedah ini menggunakan pengikatan ini yang betul, yang merujuk kepada objek pencincang.

Atas ialah kandungan terperinci Mengapa Saya Tidak Boleh Menggunakan Fungsi Anak Panah untuk Kaedah Objek dalam ES6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!