สิ่งที่รองรับ JavaScript นี้สำนวน: var self = this?

ฉันเห็นสิ่งต่อไปนี้ในแหล่งที่มาสำหรับการสาธิตหมายเหตุการจัดเก็บ WebKit HTML 5 SQL :

function Note() {
  var self = this;

  var note = document.createElement('div');
  note.className = 'note';
  note.addEventListener('mousedown', function(e) { return self.onMouseDown(e) }, false);
  note.addEventListener('click', function() { return self.onNoteClick() }, false);
  this.note = note;
  // ...
}

ผู้เขียนใช้ตัวเองในบางสถานที่ (ร่างกายฟังก์ชั่น) และสิ่งนี้ในสถานที่อื่น ๆ (ร่างกายของฟังก์ชั่นที่กำหนดไว้ในรายการอาร์กิวเมนต์ของวิธีการ) เกิดอะไรขึ้น? ตอนนี้ฉันสังเกตเห็นครั้งหนึ่งฉันจะเริ่มเห็นมันทุกที่หรือไม่?

ดูนี้บทความเกี่ยวกับ alistapart.com (Ed: บทความได้รับการปรับปรุงตั้งแต่การเชื่อมโยงเดิม)

selfกำลังถูกใช้เพื่อรักษาการอ้างอิงถึงต้นฉบับthisแม้ว่าบริบทจะเปลี่ยนแปลง เป็นเทคนิคที่มักใช้ในตัวจัดการเหตุการณ์ (โดยเฉพาะอย่างยิ่งในการปิด)

แก้ไข:โปรดทราบว่าการใช้งานselfไม่ได้รับการสนับสนุนเท่าที่window.selfมีอยู่และมีโอกาสที่จะทำให้เกิดข้อผิดพลาดหากคุณไม่ระวัง

สิ่งที่คุณเรียกว่าตัวแปรนั้นไม่สำคัญเลย var that = this;ไม่เป็นไร แต่ไม่มีอะไรมหัศจรรย์เกี่ยวกับชื่อ

ฟังก์ชั่นที่ประกาศในบริบท (เช่นการเรียกกลับ, การปิด) จะสามารถเข้าถึงตัวแปร / ฟังก์ชั่นที่ประกาศในขอบเขตเดียวกันหรือสูงกว่า

ตัวอย่างเช่นการเรียกกลับเหตุการณ์อย่างง่าย:

function MyConstructor(options) {
  let that = this;

  this.someprop = options.someprop || 'defaultprop';

  document.addEventListener('click', (event) => {
    alert(that.someprop);
  });
}

new MyConstructor({
  someprop: "Hello World"
});

ฉันคิดว่าชื่อตัวแปร 'ตัวเอง' ไม่ควรใช้ด้วยวิธีนี้อีกต่อไปเนื่องจากเบราว์เซอร์ที่ทันสมัยให้ตัวแปรทั่วโลกที่selfชี้ไปที่วัตถุทั่วโลกของทั้งหน้าต่างปกติหรือ WebWorker

เพื่อหลีกเลี่ยงความสับสนและความขัดแย้งที่อาจเกิดขึ้นคุณสามารถเขียนvar thiz = thisหรือvar that = thisแทน

ใช่คุณจะเห็นมันทุกที่ that = this;ก็มักจะ

ดูวิธีการselfใช้งานภายในฟังก์ชั่นที่เรียกโดยเหตุการณ์ ผู้ที่จะมีบริบทของตัวเองเพื่อselfจะใช้ในการถือที่เข้ามาthisNote()

เหตุผลselfยังคงมีอยู่สำหรับฟังก์ชั่นแม้ว่าพวกเขาจะสามารถดำเนินการหลังจากNote()ฟังก์ชั่นเสร็จสิ้นการดำเนินการคือฟังก์ชั่นด้านในได้รับบริบทของฟังก์ชั่นด้านนอกเนื่องจากปิด

ควรสังเกตว่ามีรูปแบบพร็อกซีสำรองสำหรับการอ้างอิงกับต้นฉบับthisในการโทรกลับหากคุณไม่ชอบvar self = thisสำนวน

ในฐานะที่เป็นฟังก์ชั่นสามารถเรียกใช้กับบริบทที่กำหนดโดยใช้function.applyหรือfunction.callคุณสามารถเขียนเสื้อคลุมที่ส่งกลับฟังก์ชั่นที่เรียกใช้ฟังก์ชั่นของคุณด้วยapplyหรือcallใช้บริบทที่กำหนด ดูproxyฟังก์ชันของ jQuery สำหรับการนำรูปแบบนี้ไปใช้ นี่คือตัวอย่างของการใช้งาน:

var wrappedFunc = $.proxy(this.myFunc, this);

wrappedFuncสามารถถูกเรียกใช้และจะให้เวอร์ชันของคุณthisเป็นบริบท

ตามที่คนอื่นได้อธิบายไว้var self = this;อนุญาตให้ใช้โค้ดในการปิดเพื่ออ้างอิงกลับไปยังขอบเขตพาเรนต์

อย่างไรก็ตามตอนนี้ปี 2018 และ ES6 ได้รับการสนับสนุนอย่างกว้างขวางจากเว็บเบราว์เซอร์ที่สำคัญทั้งหมด var self = this;สำนวนไม่ได้ค่อนข้างเป็นสิ่งจำเป็นที่มันเคยเป็น

ตอนนี้มันเป็นไปได้ที่จะหลีกเลี่ยงการvar self = this;ผ่านการใช้ฟังก์ชั่นลูกศร

ในกรณีที่เราจะใช้var self = this:

function test() {
    var self = this;
    this.hello = "world";
    document.getElementById("test_btn").addEventListener("click", function() {
        console.log(self.hello); // logs "world"
    });
};

ตอนนี้เราสามารถใช้ฟังก์ชั่นลูกศรโดยไม่ต้องvar self = this:

function test() {
    this.hello = "world";
    document.getElementById("test_btn").addEventListener("click", () => {
        console.log(this.hello); // logs "world"
    });
};

ฟังก์ชั่นลูกศรไม่มีของตัวเองthisและเพียงแค่สมมติขอบเขตการล้อมรอบ

ตัวแปรถูกจับโดยฟังก์ชั่นอินไลน์ที่กำหนดไว้ในวิธีการ thisในฟังก์ชั่นจะอ้างถึงวัตถุอื่น ด้วยวิธีนี้คุณสามารถทำให้ฟังก์ชั่นถือการอ้างอิงถึงthisในขอบเขตด้านนอก

มันเป็นมุมแหลม JavaScript เมื่อฟังก์ชั่นเป็นคุณสมบัติของวัตถุเรียกว่า aptly มากขึ้นวิธีการนี้หมายถึงวัตถุ ในตัวอย่างของตัวจัดการเหตุการณ์วัตถุที่บรรจุเป็นองค์ประกอบที่ก่อให้เกิดเหตุการณ์ เมื่อมีการเรียกใช้ฟังก์ชั่นมาตรฐานสิ่งนี้จะอ้างถึงวัตถุทั่วโลก เมื่อคุณมีฟังก์ชั่นซ้อนอยู่ในตัวอย่างของคุณสิ่งนี้จะไม่เกี่ยวข้องกับบริบทของฟังก์ชั่นด้านนอกเลย ฟังก์ชั่นด้านในจะแชร์ขอบเขตกับฟังก์ชั่นที่มีดังนั้นนักพัฒนาจะใช้รูปแบบของvar that = thisเพื่อรักษาสิ่งที่พวกเขาต้องการในฟังก์ชั่นภายใน

ตัวตนที่แท้จริงคือการอ้างอิงไปยังหน้าต่าง ( window.self) ดังนั้นเมื่อคุณพูดว่าvar self = 'something'คุณแทนที่การอ้างอิงหน้าต่างกับตัวเอง - เพราะตนเองมีอยู่ในวัตถุหน้าต่าง

นี่คือเหตุผลที่นักพัฒนาซอฟต์แวร์ส่วนใหญ่ต้องการvar that = thisมากกว่าvar self = this;

อย่างไรก็ตาม; var that = this;ไม่สอดคล้องกับแนวปฏิบัติที่ดี ... สันนิษฐานว่ารหัสของคุณจะได้รับการแก้ไข / แก้ไขในภายหลังโดยผู้พัฒนารายอื่นคุณควรใช้มาตรฐานการเขียนโปรแกรมทั่วไปที่เกี่ยวข้องกับชุมชนนักพัฒนา

ดังนั้นคุณควรใช้สิ่งต่าง ๆ เช่น var oldThis/ var oThis/ etc - เพื่อให้ชัดเจนในขอบเขตของคุณ // .. ไม่มาก แต่จะประหยัดไม่กี่วินาทีและรอบสมองไม่กี่

ดังที่ได้กล่าวมาแล้วหลายครั้งข้างต้น 'ตัวตน' นั้นถูกใช้เพื่ออ้างอิงถึง 'สิ่งนี้' ก่อนที่จะเข้าสู่การทำงาน เมื่ออยู่ในฟังก์ชั่น 'this' หมายถึงอย่างอื่น

function Person(firstname, lastname) {
  this.firstname = firstname;

  this.lastname = lastname;
  this.getfullname = function () {
    return `${this.firstname}   ${this.lastname}`;
  };

  let that = this;
  this.sayHi = function() {
    console.log(`i am this , ${this.firstname}`);
    console.log(`i am that , ${that.firstname}`);
  };
}

let thisss = new Person('thatbetty', 'thatzhao');

let thatt = {firstname: 'thisbetty', lastname: 'thiszhao'};

thisss.sayHi.call (thatt);