Bạn có thể liên kết 'cái này' trong một hàm mũi tên không?

Tôi đã thử nghiệm ES6 được một thời gian và tôi chỉ gặp một vấn đề nhỏ.

Tôi thực sự thích sử dụng các chức năng mũi tên, và bất cứ khi nào tôi có thể, tôi sử dụng chúng.

Tuy nhiên, có vẻ như bạn không thể ràng buộc họ!

Đây là chức năng:

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

Đây là đối tượng tôi muốn liên kết hàm với:

var o = {'a': 42};

Và đây là cách tôi sẽ liên kết fvới o:

var fBound = f.bind(o);

Và sau đó tôi chỉ có thể gọi fBound:

fBound();

Cái nào sẽ xuất cái này ( ođối tượng):

{'a': 42}

Mát mẻ! Đáng yêu! Ngoại trừ việc nó không hoạt động. Thay vì xuất ra ođối tượng, nó xuất ra windowđối tượng.

Vì vậy, tôi muốn biết: bạn có thể liên kết các chức năng mũi tên? (Và nếu vậy, làm thế nào?)

Tôi đã kiểm tra mã ở trên trong Google Chrome 48 và Firefox 43 và kết quả là như nhau.

Bạn không thể rebind this trong một chức năng mũi tên. Nó sẽ luôn được định nghĩa là bối cảnh mà nó được xác định. Nếu bạn yêu cầu thiscó ý nghĩa, bạn nên sử dụng một chức năng bình thường.

Từ Thông số ECMAScript 2015 :

Bất kỳ tham chiếu nào đến các đối số, siêu, này hoặc new.target trong Mũi tên đều phải giải quyết ràng buộc trong một môi trường bao quanh từ vựng. Thông thường, đây sẽ là Môi trường chức năng của một chức năng kèm theo ngay lập tức.

Để hoàn thành, bạn có thể liên kết lại các chức năng mũi tên, bạn không thể thay đổi ý nghĩa của this.

bind vẫn có giá trị cho các đối số hàm:

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

Dùng thử tại đây: http://jsbin.com/motihanopi/edit?js,console

Từ MDN :

Biểu thức hàm mũi tên có cú pháp ngắn hơn so với biểu thức hàm và liên kết từ vựng với giá trị này (không ràng buộc chính nó, đối số, siêu hoặc new.target). Các chức năng mũi tên luôn ẩn danh.

Điều này có nghĩa là bạn không thể liên kết một giá trị thisnhư bạn muốn.

Trong nhiều năm, các nhà phát triển js đã vật lộn với ràng buộc bối cảnh, hỏi tại sao thisthay đổi trong javascript, rất nhiều nhầm lẫn trong nhiều năm do ràng buộc bối cảnh và sự khác biệt giữa ý nghĩa của thisjavascript vàthis trong hầu hết các ngôn ngữ OOP khác.

Tất cả điều này dẫn tôi đến hỏi, tại sao, tại sao! Tại sao bạn sẽ không rebind một chức năng mũi tên! Những nơi được tạo ra đặc biệt để giải quyết tất cả các vấn đề và nhầm lẫn này và tránh phải sử dụng bindhoặccall hoặc bất cứ cách nào khác để duy trì phạm vi của hàm.

TL; DR

Không, bạn không thể rebind các chức năng mũi tên.

Bạn không thể sử dụng bindđể thay đổi giá trị thisbên trong hàm mũi tên. Tuy nhiên, bạn có thể tạo một hàm thông thường mới thực hiện tương tự như hàm mũi tên cũ và sau đó sử dụng callhoặc bindliên kết lại thisnhư bình thường.

Chúng tôi sử dụng một evalcuộc gọi ở đây để tạo lại chức năng mũi tên mà bạn truyền vào như một chức năng bình thường và sau đó sử dụng callđể gọi nó với một chức năng khác this:

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

Do chức năng mũi tên ES6 thực sự giải quyết được điều này trong JavaScript

Liên kết trên giải thích rằng các chức năng mũi tên this không thay đổi với các bind, call, applychức năng.

Nó được giải thích với một ví dụ rất hay.

chạy cái này trong node v4 để thấy hành vi "mong đợi",

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(); 

Tôi đã hỏi cùng một câu hỏi một vài ngày trước.

Bạn không thể liên kết một giá trị vì this đã được .

Liên kết phạm vi khác với ES6 => toán tử hàm

Ngắn gọn, bạn KHÔNG THỂ liên kết các hàm mũi tên, nhưng đọc tiếp:

Hãy tưởng tượng bạn có chức năng mũi tên này bên dưới mà in thistrên bàn điều khiển:

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

Vì vậy, cách khắc phục nhanh cho việc này sẽ là sử dụng chức năng bình thường, vì vậy chỉ cần thay đổi nó thành:

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

Sau đó, bạn có thể gắn nó với bất kỳ môi trường từ vựng sử dụng bindhoặc callhay apply:

const bindedFunc = myFunc.bind(this);

và gọi nó trong trường hợp bind.

bindedFunc();

Cũng có những cách để sử dụng eval()để làm điều đó, điều này không được khuyến khích .

Có lẽ ví dụ này giúp bạn:

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();