JavaScript menguasai baharu

Artikel ini membawakan anda pengetahuan yang berkaitan tentang javascript, yang terutamanya memperkenalkan isu berkaitan tentang baharu Operator baharu mencipta contoh jenis objek yang ditentukan pengguna atau mempunyai salah satu pembina jenis objek, saya harap ia akan membantu semua orang.

[Cadangan berkaitan: tutorial video javascript]

Kata Pengantar

Apakah itu new? Pengendali

new mencipta contoh jenis objek yang ditentukan pengguna atau salah satu jenis objek terbina dalam yang mempunyai pembina.

Melihat definisi masih agak kabur Mari kita lihat contoh khusus untuk memahami fungsi yang dilaksanakan oleh JavaScript dalam new.

Sebagai contoh

// 现实中瘦不了，但网络中一定要保持苗条
function Thin_User(name, age) {
    this.name = name;
    this.age = age;
}

Thin_User.prototype.eatToMuch = function () {
    // 白日做梦吧，留下肥胖的泪水
    console.log('i eat so much, but i\'m very thin!!!');
}

Thin_User.prototype.isThin = true;

const xiaobao = new Thin_User('zcxiaobao', 18);
console.log(xiaobao.name);   // zcxiaobao
console.log(xiaobao.age);    // 18
console.log(xiaobao.isThin); // true
// i eat so much, but i'm very thin!!!
xiaobao.eatToMuch();

Melalui contoh di atas, kita dapati bahawa xiaobao boleh:

• mengakses pembina Thin_User atribut tengah
• mengakses Thin_User.prototype atribut tengah

untuk menerangkannya dengan lebih jelas, new melakukan perkara ini:

• Objek kosong dicipta, objek __proto__->Thin_User.prototype
• melaksanakan pembina dan menunjuk this ke objek baharu
• mengembalikan objek baharu

Nota Tambahan

Memandangkan new ialah kata kunci, kami tidak boleh mengatasinya seperti kaedah tertib tinggi untuk mensimulasikan tatasusunan, jadi kami menulis fungsi createObject untuk mensimulasikan kesan new. Penggunaan khusus adalah seperti berikut:

function Thin_User(name, age) {}

const u1 = new Thin_user(...)
const u2 = createObject(Thin_User, ...a\)

Simulasi awal

Menurut analisis di atas, langkah umum untuk menulis createObject ialah:

• Penciptaan Objek baharu obj
• menetapkan obj.__proto__->constructor.prototype( tetapi JavaScript tidak mengesyorkan mengubah suai atribut __proto__ secara langsung dan menyediakan kaedah setPrototypeOf untuk mengubah suai prototaip secara khusus )
• digunakan constructor.call/apply(obj, ...), tambah atribut pada obj
• kembalikan obj

__proto__和prototype, anda boleh melihat JavaScript untuk pemahaman yang menyeluruh tentang prototaip dan rantaian prototaip
call/apply, anda boleh melihat panggilan JavaScript dan memohon

Selepas mempelajarinya, kami boleh menulis versi pertama kod:

function createObject(Con) {
    // 创建新对象obj
    // var obj = {};也可以
    var obj = Object.create(null);

    // 将obj.__proto__ -> 构造函数原型
    // (不推荐)obj.__proto__ = Con.prototype
    Object.setPrototypeOf(obj, Con.prototype);

    // 执行构造函数
    Con.apply(obj, [].slice.call(arguments, 1));

    // 返回新对象
    return obj;}

Kesan nilai pulangan

Seperti yang kita sedia maklum, fungsi mempunyai nilai pulangan Jadi jika pembina mempunyai nilai pulangan, apakah hasil yang akan dikembalikan selepas pelaksanaan akhir new?

Nilai pulangan ialah jenis asas

Dengan mengandaikan bahawa nilai pulangan pembina ialah jenis asas, mari kita lihat hasil pulangan akhir:

function Thin_User(name, age) {
    this.name = name;
    this.age = age;
    return 'i will keep thin forever';
}

Thin_User.prototype.eatToMuch = function () {
    console.log('i eat so much, but i\'m very thin!!!');
}

Thin_User.prototype.isThin = true;

const xiaobao = new Thin_User('zcxiaobao', 18);
console.log(xiaobao.name);   // zcxiaobao
console.log(xiaobao.age);    // 18
console.log(xiaobao.isThin); // true
// i eat so much, but i'm very thin!!!
xiaobao.eatToMuch();

Hasil pulangan akhir nampaknya telah diganggu dalam apa jua cara. Tidakkah pembina memproses nilai pulangan?

Jangan tergesa-gesa, mari teruskan menguji keadaan di mana nilai pulangan adalah objek.

Nilai pulangan ialah objek

function Thin_User(name, age) {
    this.name = name;
    this.age = age;
    return {
        name: name,
        age: age * 10,
        fat: true
    }
}

Thin_User.prototype.eatToMuch = function () {
    // 白日做梦吧，留下肥胖的泪水
    console.log('i eat so much, but i\'m very thin!!!');
}

Thin_User.prototype.isThin = true;

const xiaobao = new Thin_User('zcxiaobao', 18);
// Error: xiaobao.eatToMuch is not a function
xiaobao.eatToMuch();

Apabila saya melaksanakan eatToMuch, konsol terus melaporkan ralat bahawa tiada fungsi semasa, jadi saya mencetak objek xiaobao :

mendapati xiaobao objek age telah berubah dan atribut fat telah ditambah, yang betul-betul sama dengan pulangan nilai pembina.

Selepas membaca dua contoh ini, anda pada asasnya boleh menjelaskan keadaan apabila pembina mengembalikan nilai: Apabila nilai pulangan pembina ialah objek, objek dikembalikan secara langsung.

Simulasi versi akhir

function createObject(Con) {
    // 创建新对象obj
    // var obj = {};也可以
    var obj = Object.create(null);

    // 将obj.__proto__ -> 构造函数原型
    // (不推荐)obj.__proto__ = Con.prototype
    Object.setPrototypeOf(obj, Con.prototype);

    // 执行构造函数，并接受构造函数返回值
    const ret = Con.apply(obj, [].slice.call(arguments, 1));

    // 若构造函数返回值为对象，直接返回该对象
    // 否则返回obj
    return typeof(ret) === 'object' ? ret: obj;}

[Cadangan berkaitan: tutorial video javascript]

Atas ialah kandungan terperinci JavaScript menguasai baharu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!