JavaScript เข้าควบคุมสิ่งใหม่

วิธีเริ่มต้นอย่างรวดเร็วด้วย VUE3.0: เข้าสู่

คำนำ

มีอะไร new ?

ตัวดำเนินการ new จะสร้างอินสแตนซ์ของประเภทออบเจ็กต์ที่ผู้ใช้กำหนดหรือหนึ่งในประเภทออบเจ็กต์บิวท์อินที่มีตัวสร้าง

มันยังคลุมเครืออยู่เล็กน้อยเพียงแค่ดูคำจำกัดความ ลองดูตัวอย่างที่เฉพาะเจาะจงเพื่อทำความเข้าใจฟังก์ชันของ new ใน JavaScript

ตัวอย่างเช่น

// คุณไม่สามารถลดน้ำหนักได้ในชีวิตจริง แต่คุณต้องคงไว้ซึ่งฟังก์ชันออนไลน์ที่เพรียวบาง Thin_User(ชื่อ, อายุ) {
    this.name = ชื่อ;
    this.age = อายุ;
-

Thin_User.prototype.eatToMuch = ฟังก์ชั่น () {
    // ฝันกลางวันแล้วทิ้งน้ำตาให้อ้วน console.log('กินเยอะแต่ผอมมาก!!!');
-

Thin_User.prototype.isThin = จริง;

const xiaobao = ผู้ใช้ Thin_User ใหม่ ('zcxiaobao', 18);
console.log(xiaobao.name); // zcxiaobao
console.log(xiaobao.age); // 18
console.log(xiaobao.isThin); // จริง
// กินเยอะแต่ผอมมาก!!!
xiaobao.eatToMuch();

จากตัวอย่างข้างต้น เราจะพบ xiaobao สามารถ:

• เข้าถึงคุณสมบัติในตัวสร้าง Thin_User
• เข้าถึงคุณสมบัติใน Thin_User.prototype

และอธิบายให้ตรงไปตรงมามากขึ้น new ทำสิ่งเหล่านี้:

• สร้างวัตถุว่าง __proto__->Thin_User.prototype ของอ็อบเจ็กต์
• จะรัน Constructor และชี้ไปที่อ็อบเจ็กต์ this
• เพื่อส่งคืนอ็อบเจ็กต์ใหม่

:

เนื่องจาก new เป็นคีย์เวิร์ด เราจึงไม่สามารถแทนที่มันได้เหมือนกับวิธีการที่มีลำดับสูงในการจำลองอาร์เรย์ ดังนั้นเราจึงเขียน ฟังก์ชัน createObject เพื่อจำลองเอฟเฟกต์ new การใช้งานมีดังนี้:

ฟังก์ชั่น Thin_User(name, age) {}

const u1 = Thin_user ใหม่ (...)
const u2 = createObject(Thin_User, ...a)

การจำลองเบื้องต้น

จากการวิเคราะห์ข้างต้น ขั้นตอนทั่วไปในการเขียน createObject คือ:

• สร้างอ็อบเจ็กต์ใหม่ obj
• และตั้งค่า obj.__proto__->constructor.prototype ( แต่ JavaScript ไม่แนะนำ การแก้ไขแอตทริบิวต์ __proto__ โดยตรง วิธีการ setPrototypeOf มีไว้เพื่อแก้ไขต้นแบบโดยเฉพาะ )
• ใช้ constructor.call/apply(obj, ...) เพื่อเพิ่มแอตทริบิวต์ให้กับ obj และ
• ส่งคืน obj

__proto__和prototype คุณสามารถดู JavaScript เพื่อความเข้าใจที่สมบูรณ์ ต้นแบบและโซ่ต้นแบบ
call/apply คุณสามารถดูบทช่วยสอน JavaScript เมื่อมีการโทรและนำไปใช้

หลังจากเรียนรู้สิ่งเหล่านี้แล้ว เราสามารถเขียนโค้ดเวอร์ชันแรกได้:

function createObject(Con) {
    //สร้างวัตถุใหม่ obj
    // var obj = {}; ยังสามารถเป็น var obj = Object.create(null);

    // แปลง obj.__proto__ -> ตัวสร้างต้นแบบ // (ไม่แนะนำ) obj.__proto__ = Con.prototype
    Object.setPrototypeOf (obj, Con.ต้นแบบ);

    //ดำเนินการคอนสตรัคเตอร์ Con.apply(obj, [].slice.call(arguments, 1));

    // Return a new object return obj;}

Return value effect

ดังที่เราทราบกันดีว่าฟังก์ชันต่างๆ มีค่าที่ส่งคืน ดังนั้นหาก Constructor มีค่าที่ส่งคืน ผลลัพธ์ที่ได้จะส่งคืนหลังจากการดำเนินการขั้นสุดท้ายของ new ?

ค่าที่ส่งคืนเป็นประเภทพื้นฐาน

สมมติว่าค่าที่ส่งคืนของตัวสร้างเป็นประเภทพื้นฐาน ลองมาดูผลลัพธ์สุดท้ายที่ส่งคืน:

function Thin_User(name, age) {
    this.name = ชื่อ;
    this.age = อายุ;
    กลับมา 'ฉันจะผอมตลอดไป';
-

Thin_User.prototype.eatToMuch = ฟังก์ชั่น () {
    console.log('กินเยอะแต่ผอมมาก!!!');
-

Thin_User.prototype.isThin = จริง;

const xiaobao = ผู้ใช้ Thin_User ใหม่ ('zcxiaobao', 18);
console.log(xiaobao.name); // zcxiaobao
console.log(xiaobao.age); // 18
console.log(xiaobao.isThin); // จริง
// กินเยอะแต่ผอมมาก!!!
xiaobao.eatToMuch();

ผลลัพธ์สุดท้ายที่ส่งคืนดูเหมือนจะถูกรบกวนใดๆ ตัวสร้างไม่ประมวลผลค่าที่ส่งคืนใช่หรือไม่

ไม่ต้องกังวล มาทดสอบสถานการณ์ที่ค่าตอบแทนเป็นอ็อบเจ็กต์ต่อไป

ค่าที่ส่งคืนคือ

ฟังก์ชันวัตถุ Thin_User(name, age) {
    this.name = ชื่อ;
    this.age = อายุ;
    กลับ {
        ชื่อ: ชื่อ,
        อายุ: อายุ * 10,
        อ้วน: จริง
    -
-

Thin_User.prototype.eatToMuch = ฟังก์ชั่น () {
    // ฝันกลางวันแล้วทิ้งน้ำตาให้อ้วน console.log('กินเยอะแต่ผอมมาก!!!');
-

Thin_User.prototype.isThin = จริง;

const xiaobao = ผู้ใช้ Thin_User ใหม่ ('zcxiaobao', 18);
// ข้อผิดพลาด: xiaobao.eatToMuch ไม่ใช่ฟังก์ชัน
xiaobao.eatToMuch();

เมื่อฉันดำเนินการ eatToMuch คอนโซลรายงานข้อผิดพลาดโดยตรงและไม่มีฟังก์ชันปัจจุบัน ดังนั้นฉันจึงพิมพ์วัตถุ xiaobao :

พบว่า age ของวัตถุ xiaobao เปลี่ยนไป และมีการเพิ่มคุณลักษณะ fat ซึ่งเหมือนกับค่าที่ส่งคืนของตัวสร้างทุกประการ

หลังจากอ่านตัวอย่างทั้งสองนี้แล้ว คุณสามารถอธิบายสถานการณ์ได้โดยทั่วไปเมื่อ Constructor ส่งคืนค่า: เมื่อ Constructor ส่งคืนอ็อบเจ็กต์ อ็อบเจ็กต์จะถูกส่งคืนโดยตรง

การจำลองขั้นสุดท้าย

createObject(Con) {
    //สร้างวัตถุใหม่ obj
    // var obj = {}; ยังสามารถเป็น var obj = Object.create(null);

    // แปลง obj.__proto__ -> ตัวสร้างต้นแบบ // (ไม่แนะนำ) obj.__proto__ = Con.prototype
    Object.setPrototypeOf (obj, Con.ต้นแบบ);

    //ดำเนินการคอนสตรัคเตอร์และยอมรับค่าส่งคืนคอนสตรัคเตอร์ const ret = Con.apply(obj, [].slice.call(arguments, 1));

    // หากค่าที่ส่งคืนของ Constructor เป็นวัตถุ ให้ส่งคืนวัตถุโดยตรง // มิฉะนั้น ให้ส่งคืน obj
    return typeof (ret) === 'วัตถุ' ? ret: obj;}