javascript - وظائف السهم وهذا




this ecmascript-6 (4)

هذا السؤال لديه بالفعل إجابة هنا:

أحاول الخروج من ES6 وأريد تضمين خاصية داخل وظيفتي هكذا

var person = {
  name: "jason",

  shout: () => console.log("my name is ", this.name)
}

person.shout() // Should print out my name is jason

ومع ذلك ، عندما أقوم بتشغيل وحدة التحكم في التعليمات البرمجية هذه يسجّل فقط my name is . ما الخطأ الذي افعله؟


إجابة مختصرة: يشير this إلى أقرب حد this - في الكود بشرط أن يوجد في النطاق المغلق.

إجابة أطول: وظائف السهم ربط this عندما يتم إنشاؤها لا تملك this ، أو arguments أو أسماء خاصة أخرى مرتبطة على الإطلاق - عندما يتم إنشاء الكائن ، يوجد this الاسم في النطاق المحيط ، وليس الكائن person . يمكنك رؤية ذلك بوضوح أكبر عن طريق تحريك الإعلان:

var person = {
  name: "Jason"
};
person.shout = () => console.log("Hi, my name is", this);

وحتى أكثر وضوحًا عند ترجمتها إلى تقريب مبهم حول بناء جملة السهم في ES5:

var person = {
  name: "Jason"
};
var shout = function() {
  console.log("Hi, my name is", this.name);
}.bind(this);
person.shout = shout;

في كلتا الحالتين ، تشير this (لوظيفة الصراخ) إلى نفس النطاق person تم تعريف person ، وليس النطاق الجديد الذي ترتبط به الوظيفة عند إضافتها إلى كائن person .

لا يمكنك جعل وظائف الأسهم تعمل بهذه الطريقة ، ولكن ، كما يشير @ kamituel في إجابته ، يمكنك الاستفادة من نمط إعلان الطريقة الأقصر في ES6 للحصول على توفيرات مماثلة في المساحة:

var person = {
  name: "Jason",
  // ES6 "method" declaration - leave off the ":" and the "function"
  shout() {
    console.log("Hi, my name is", this.name);
  }
};

الإجابة المقبولة ممتازة وموجزة وواضحة ، لكنني سأشرح قليلاً ما قاله شون فييرا:

لا تملك وظائف السهم هذه الوسائط أو أسماء خاصة أخرى مرتبطة على الإطلاق.

لأن وظيفة السهم لا تحتوي على "هذا" ، فهي تستخدم الوالد "هذا". يشير "هذا" دائمًا إلى الأصل ، ويكون أصل كائن الشخص هو النافذة (إذا كنت في متصفح).

لإثبات أنه يعمل هذا في وحدة التحكم الخاصة بك:

var person = {
    name: "Jason",
    anotherKey: this
}
console.log(person.anotherKey)

ستحصل على كائن النافذة.

أجد أن هذه طريقة مفيدة حقًا للتفكير في الأمر. إنها ليست القصة الكاملة ، حيث أن "هذا" الكائن الحرفي هو مناقشة أخرى.


متفق عليه معSean Vieira - في هذه الحالة ، يكون this مرتبطًا بالكائن العام (أو ، كما هو موضح في التعليق ، بشكل أعم نطاق مغلق).

إذا كنت ترغب في الحصول على بناء جملة أقصر ، فهناك خيار آخر - تدعم القيم الحرفية للكائنات بناء جملة قصير لوظائف الممتلكات. سيكون this ملزما كما تتوقع هناك. انظر shout3() :

window.name = "global";

var person = {
    name: "jason",

    shout: function () {
        console.log("my name is ", this.name);
    },
    shout2: () => {
        console.log("my name is ", this.name);
    },
    // Shorter syntax
    shout3() {
        console.log("my name is ", this.name);
    }
};

person.shout();  // "jason"
person.shout2(); // "global"
person.shout3(); // "jason"

هنا يتم تحديد قيمة هذا داخل الوظيفة من حيث يتم تحديد وظيفة السهم وليس حيث يتم استخدامها.

لذلك يشير this إلى كائن / نافذة العالمية إذا لم يتم التفاف في مساحة الاسم الأخرى





arrow-functions