Rumah  >  Artikel  >  hujung hadapan web  >  Artikel tentang konteks pelaksanaan dalam Javascript

Artikel tentang konteks pelaksanaan dalam Javascript

青灯夜游
青灯夜游ke hadapan
2023-02-14 19:41:062313semak imbas

Artikel ini akan membincangkan konteks pelaksanaan dalam Javascript dan berkongsi soalan pemikiran Melalui analisis soalan pemikiran, anda pasti akan mempunyai pemahaman yang lebih mendalam tentang konteks pelaksanaan.

Artikel tentang konteks pelaksanaan dalam Javascript

Dalam artikel sebelumnya, kami mempunyai pemahaman yang mendalam tentang tiga ahli penting konteks pelaksanaan: objek berubah-ubah, rantai skop dan ini adalah yang pertama Pengumpulan kandungan empat artikel mengagregatkan mata pengetahuan yang tersebar dan membuat penyatuan yang mudah. Saya tidak tahu sama ada sesiapa datang ke sini dari artikel kami yang lepas meninggalkan soalan Melalui analisis soalan, saya akan mempunyai pemahaman yang lebih mendalam tentang konteks pelaksanaan.

Soalan Berfikir

Untuk merumitkan sedikit kes, beberapa pengubahsuaian telah dibuat, tetapi perkara yang diperiksa dalam soalan asal tidak diubah.

function func(value){
    getValue = function(){
        console.log(value);
    };
    return this
}
            
function getValue(){
    console.log(5);
}

Func(1).getValue(); //为什么是1呢?

Analisis pelaksanaan khusus

Laksanakan kod global, cipta konteks pelaksanaan global dan konteks global ditolak ke dalam tindanan konteks pelaksanaan

ECStack = [ globalContext ];

Memulakan konteks global

globalContext = {
    VO: {
        func: reference to function func(){},
        getValue: reference to function getValue(){}
    },
    Scope: [globalContext.VO],
    this: globalContext.VO //全局上下文
}

Memulakan konteks global mencipta dua fungsi pada masa yang sama, jadi ia juga menyimpan rantai skop induk mereka dalam sifat dalaman mereka [[skop]]

func.[[scope]] = [
     globalContext.VO
];
getValue.[[scope]] = [
     globalContext.VO
];

Mula melaksanakan kod pada masa ini Apabila pernyataan terakhir dilaksanakan, fungsi func dilaksanakan terlebih dahulu, yang mewujudkan konteks pelaksanaan fungsi fungsi langkah demi langkah:

  • Fungsi salin [[skop]] penciptaan atribut Rantaian skop

  • Buat objek aktif dengan argumen

  • Mulakan objek aktif

  • Tukar objek aktif Tolak checksfunccope di bahagian atas rantai skop.

  • Buat analisis ringkas ini: Nilai MemberExpression ialah func, func ialah objek fungsi, sudah tentu Rujukan, di mana nilai asasnya ialah EnvironmentRecord, jadi nilai ini ialah ImplicitThisValue( ref) , nilai pulangan sentiasa tidak ditentukan Dalam mod tidak ketat, nilainya akan ditukar secara tersirat kepada objek global.

funcContext = {
    AO: {
        arguments: { // 数组
            0: 1,
            length: 1
        }
    },
    Scope: [AO, globalContext.VO],
    this: undefined
}

Sesetengah orang mungkin mempunyai soalan, bagaimana pula dengan getValue dalam func? , kerana ia tidak mempunyai pengisytiharan pembolehubah, jadi ia sebenarnya merupakan operasi penugasan atribut, yang akan dilaksanakan kemudian pada masa jalan.

Buat konteks pelaksanaan fungsi dan tolakkannya ke dalam tindanan konteks pelaksanaan

    ECStack = [
        funcContext,
        globalContext
    ];

Fungsi mula melaksanakan Ini adalah kunci kepada mengapa output akhir ialah 1 , operasi Tugasan ayat pertama, maka anda perlu mencari getValue pembolehubah di sepanjang konteks pelaksanaan, kemudian kita akan melihat skop dalam funcContext Mula-mula cari funcContext.AO Jelas sekali atribut getValue tidak wujud, kemudian cari di sepanjang skop rantai. GlobalContext.VO ditemui dan getValue ditemui Pada masa ini, atribut getValue di bawah skop global akan ditetapkan semula ialah versi baharu fungsi dan skop fungsi dibuat semula dan getValue baharu. fungsi ialah Rantaian skop induk disimpan dalam sifat dalaman mereka [[skop]]:

getValue .[[scope]] = [ funcContext.AO, globalContext.VO ];

Kemudian teruskan kembali ini dan cari funcContext ini, iaitu, kembalikan konteks pelaksanaan fungsi yang tidak ditentukan; tindanan

ECStack = [ globalContext ];

Teruskan melaksanakan Func(1).getValue(), separuh pertama kembali tidak ditentukan Pada masa ini, sistem secara tersirat menukar kepada objek pembolehubah global dan mencari atribut getValue daripada objek pembolehubah global. Pada masa ini, kami mendapati getValue bukan lagi budak lelaki itu Konteks pelaksanaan fungsi getValue baharu telah ditolak ke tindanan:

getValueContext = {
    AO: {
        arguments: { // 数组
            length: 0
        }
    },
    Scope: [ AO, funcContext.AO, globalContext.VO ],
    this: undefined
} ECStack = [
    getValueContext,
    globalContext
 ];

Fungsi mula dilaksanakan dan mendapati ia mahu untuk. output value, jadi kami mencari di sepanjang skop , tiada atribut sedemikian dalam getValueContext.AO Teruskan mencari ke bawah untuk mencari funcContext.AO (Perhatian!). parameter formal, nilai yang sepadan akan menjadi output, dan 1 akan menjadi output.

Pelaksanaan fungsi selesai, getValueContext dan globalContext muncul dari timbunan dan dimusnahkan satu demi satu, dan kod selesai.

Ringkasan

Filem ini menggunakan contoh yang mudah tetapi tidak mudah untuk menyambung empat artikel sebelumnya untuk menganalisis sepenuhnya konteks pelaksanaan apabila kod JS dilaksanakan mempunyai pemahaman yang lebih mendalam tentang proses kerja ini. Walau bagaimanapun, saya tertanya-tanya jika mana-mana pelajar yang prihatin telah mendapati bahawa dalam contoh di atas, semasa pelaksanaan fungsi getValue, dari langkah mencari nilai atribut (menandakan kedudukan), pada masa itu fungsi func jelas telah dilaksanakan, dan konteks pelaksanaannya telah dikeluarkan, mengapa kita masih boleh mencari atribut nilai daripada konteks pelaksanaannya? Ini sebenarnya prinsip penjanaan penutup Dalam artikel seterusnya, kita masih akan menggunakan contoh ini untuk mempelajari prinsip penjanaan penutupan.

[Pembelajaran yang disyorkan: Tutorial JavaScript Lanjutan]

Atas ialah kandungan terperinci Artikel tentang konteks pelaksanaan dalam Javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Artikel ini dikembalikan pada:juejin.cn. Jika ada pelanggaran, sila hubungi admin@php.cn Padam