คุณสามารถผูก 'this' ในฟังก์ชันลูกศรได้หรือไม่?

ฉันได้ทดลอง ES6 มาระยะหนึ่งแล้วและเพิ่งพบปัญหาเล็กน้อย

ฉันชอบใช้ฟังก์ชันลูกศรมากและเมื่อใดก็ตามที่ทำได้ฉันก็ใช้มัน

อย่างไรก็ตามดูเหมือนว่าคุณไม่สามารถผูกมันได้!

นี่คือฟังก์ชั่น:

var f = () => console.log(this);

นี่คือวัตถุที่ฉันต้องการผูกฟังก์ชันเข้ากับ:

var o = {'a': 42};

และนี่คือวิธีที่ฉันจะผูกfกับo:

var fBound = f.bind(o);

จากนั้นฉันสามารถโทรfBound:

fBound();

ซึ่งจะส่งออกสิ่งนี้ ( oวัตถุ):

{'a': 42}

เย็น! น่ารัก! ยกเว้นว่าใช้ไม่ได้. แทนที่จะส่งออกoอ็อบเจ็กต์มันจะส่งออกwindowอ็อบเจ็กต์

ฉันอยากรู้ว่า: คุณผูกฟังก์ชันลูกศรได้ไหม (และถ้าเป็นเช่นนั้นอย่างไร)

ฉันได้ทดสอบโค้ดด้านบนใน Google Chrome 48 และ Firefox 43 แล้วผลลัพธ์ก็เหมือนกัน

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

จากข้อมูลจำเพาะ ECMAScript 2015 :

การอ้างอิงถึงอาร์กิวเมนต์ super this หรือ new.target ภายใน ArrowFunction ต้องแก้ไขการผูกในสภาวะแวดล้อมที่ปิดด้วยคำศัพท์ โดยทั่วไปนี่จะเป็นสภาพแวดล้อมของฟังก์ชันของฟังก์ชันที่ปิดล้อมทันที

เพื่อให้เสร็จสมบูรณ์คุณสามารถผูกฟังก์ชันลูกศรอีกครั้งคุณไม่สามารถเปลี่ยนความหมายของthis.

bind ยังคงมีค่าสำหรับอาร์กิวเมนต์ของฟังก์ชัน:

((a, b, c) => {
  console.info(a, b, c) // 1, 2, 3
}).bind(undefined, 1, 2, 3)()

ลองดูที่นี่: http://jsbin.com/motihanopi/edit?js,console

จากMDN :

นิพจน์ฟังก์ชันลูกศรมีไวยากรณ์ที่สั้นกว่าเมื่อเทียบกับนิพจน์ฟังก์ชันและผูกค่านี้เป็นคำศัพท์ (ไม่ผูกสิ่งนี้อาร์กิวเมนต์ super หรือ new.target ของตัวเอง) ฟังก์ชันลูกศรจะไม่ระบุชื่อเสมอ

ซึ่งหมายความว่าคุณไม่สามารถผูกค่าตามที่thisคุณต้องการได้

เป็นเวลาหลายปีที่นักพัฒนา js ต้องดิ้นรนกับการผูกบริบทถามว่าเหตุใดจึงthisมีการเปลี่ยนแปลงในจาวาสคริปต์ความสับสนอย่างมากในช่วงหลายปีที่ผ่านมาเนื่องจากการเชื่อมโยงบริบทและความแตกต่างระหว่างความหมายของthisในจาวาสคริปต์และthisในภาษา OOP อื่น ๆ ส่วนใหญ่

ทั้งหมดนี้ทำให้ฉันถามว่าทำไมทำไม! ทำไมคุณถึงไม่ยอมยกเลิกฟังก์ชันลูกศร! ผู้ที่สร้างขึ้นเป็นพิเศษเพื่อแก้ไขปัญหาและความสับสนทั้งหมดนี้และหลีกเลี่ยงการใช้bindหรือcallหรือวิธีอื่นใดเพื่อรักษาขอบเขตของฟังก์ชัน

TL; DR

ไม่คุณไม่สามารถย้อนกลับฟังก์ชันลูกศรได้

คุณไม่สามารถใช้bindเพื่อเปลี่ยนค่าthisภายในฟังก์ชันลูกศร อย่างไรก็ตามคุณสามารถสร้างฟังก์ชันปกติใหม่ที่ทำเช่นเดียวกับฟังก์ชันลูกศรเก่าจากนั้นใช้callหรือbindผูกใหม่ได้thisตามปกติ

เราใช้การevalโทรที่นี่เพื่อสร้างฟังก์ชั่นลูกศรที่คุณส่งผ่านเป็นฟังก์ชันปกติจากนั้นใช้callเพื่อเรียกใช้ด้วยฟังก์ชันอื่นthis :

var obj = {value: 10};
function arrowBind(context, fn) {
  let arrowFn;
  (function() {
    arrowFn = eval(fn.toString());
    arrowFn();
  }).call(context);
}
arrowBind(obj, () => {console.log(this)});

ทำหน้าที่ ES6 Arrow แก้ปัญหา“ this” ใน JavaScript จริงๆ

ลิงก์ด้านบนอธิบายว่าฟังก์ชันลูกศรthisไม่เปลี่ยนแปลงด้วยbind, call, applyฟังก์ชัน

มีการอธิบายด้วยตัวอย่างที่ดีมาก

เรียกใช้สิ่งนี้node v4เพื่อดูลักษณะการทำงาน "ที่คาดไว้"

this.test = "attached to the module";
var foo = { test: "attached to an object" };
foo.method = function(name, cb){ 
    // bind the value of "this" on the method 
    // to try and force it to be what you want 
    this[name] = cb.bind(this); };
foo.method("bar", () => { console.log(this.test); });
foo.bar(); 

ฉันถามคำถามเดียวกันเมื่อสองสามวันก่อน

คุณไม่สามารถผูกค่าได้เนื่องจากthisถูกผูกไว้แล้ว

การผูกขอบเขตนี้แตกต่างกันกับตัวดำเนินการฟังก์ชัน ES6 =>

สั้นคุณไม่สามารถผูกฟังก์ชันลูกศรได้ แต่อ่านต่อ:

ลองนึกภาพว่าคุณมีฟังก์ชันลูกศรด้านล่างซึ่งจะพิมพ์thisบนคอนโซล:

const myFunc = ()=> console.log(this);

ดังนั้นการแก้ไขด่วนสำหรับสิ่งนี้จะใช้ฟังก์ชันปกติดังนั้นเพียงแค่เปลี่ยนเป็น:

function myFunc() {console.log(this)};

จากนั้นคุณสามารถเชื่อมโยงกับสภาพแวดล้อมคำศัพท์โดยใช้bindหรือcallหรือapply:

const bindedFunc = myFunc.bind(this);

และเรียกมันในกรณีของbind.

bindedFunc();

นอกจากนี้ยังมีวิธีการที่จะใช้eval()ในการทำมันซึ่งขอไม่แนะนำ

ตัวอย่างนี้อาจช่วยคุณได้:

let bob = {
   _name: "Bob",
   _friends: ["stackoverflow"],
   printFriends:(x)=> {
      x._friends.forEach((f)=> {
         console.log(x._name + " knows " + f);
      });
   }
}

bob.printFriends = (bob.printFriends).bind(null,bob);
bob.printFriends();