Các phương thức trong các đối tượng ES6: sử dụng các hàm mũi tên

Trong ES6, cả hai điều này đều hợp pháp:

var chopper = {
    owner: 'Zed',
    getOwner: function() { return this.owner; }
};

và, viết tắt:

var chopper = {
    owner: 'Zed',
    getOwner() { return this.owner; }
}

Có thể sử dụng các chức năng mũi tên mới không? Đang thử một cái gì đó như

var chopper = {
    owner: 'John',
    getOwner: () => { return this.owner; }
};

hoặc là

var chopper = {
    owner: 'John',
    getOwner: () => (this.owner)
};

Tôi nhận được thông báo lỗi cho thấy rằng phương pháp không có quyền truy cập this. Đây chỉ là vấn đề về cú pháp hay bạn không thể sử dụng các phương thức fat-pipe bên trong các đối tượng ES6?

Các hàm mũi tên không được thiết kế để sử dụng trong mọi tình huống chỉ đơn thuần là một phiên bản ngắn hơn của các hàm kiểu cũ. Chúng không nhằm thay thế cú pháp hàm bằng functiontừ khóa. Trường hợp sử dụng phổ biến nhất cho các hàm mũi tên là "lambdas" ngắn không xác định lại this, thường được sử dụng khi chuyển một hàm dưới dạng gọi lại cho một số hàm.

Không thể sử dụng các hàm mũi tên để viết các phương thức đối tượng bởi vì, như bạn đã tìm thấy, vì các hàm mũi tên đóng trên thisngữ cảnh bao quanh từ vựng, thisbên trong mũi tên là hàm hiện tại mà bạn đã xác định đối tượng. Đó là để nói:

// Whatever `this` is here...
var chopper = {
    owner: 'Zed',
    getOwner: () => {
        return this.owner;    // ...is what `this` is here.
    }
};

Trong trường hợp của bạn, muốn viết một phương thức trên một đối tượng, bạn chỉ nên sử dụng functioncú pháp truyền thống hoặc cú pháp phương thức được giới thiệu trong ES6:

var chopper = {
    owner: 'Zed',
    getOwner: function() {
        return this.owner;
    }
};

// or

var chopper = {
    owner: 'Zed',
    getOwner() {
        return this.owner;
    }
};

(Có những khác biệt nhỏ giữa chúng, nhưng chúng chỉ quan trọng nếu bạn sử dụng supertrong getOwnerđó, bạn không sử dụng hoặc nếu bạn sao chép getOwnersang một đối tượng khác.)

Đã có một số cuộc tranh luận trên danh sách gửi thư es6 về một sự thay đổi trong các hàm mũi tên có cú pháp tương tự nhưng với cú pháp riêng của chúng this. Tuy nhiên, đề xuất này không được đón nhận nhiều vì đó chỉ là cú pháp cú pháp, cho phép mọi người tiết kiệm việc nhập một vài ký tự và không cung cấp chức năng mới so với cú pháp hàm hiện có. Xem các chức năng mũi tên không liên kết chủ đề .

Trong dòng này getOwner: => (this.owner)phải là:

var chopper = {
    owner: 'John',
    getOwner: () => this.owner
}; //here `this` refers to `window` object.

Bạn sẽ phải khai báo thisthành một hàm:

var chopper = {
    owner: 'John',
    getOwner() { return this.owner }
};

Hoặc là:

var chopperFn = function(){

    this.setOwner = (name) => this.owner = name;
    Object.assign(this,{
        owner: 'Jhon',
        getOwner: () => this.owner,
    })

}

var chopper = new chopperFn();
console.log(chopper.getOwner());
chopper.setOwner('Spiderman');
console.log(chopper.getOwner());

Một mẹo nhanh mà tôi làm theo để sử dụng các chức năng mũi tên.

• Sử dụng các hàm không phải mũi tên cho các phương thức sẽ sử dụng object.method()cú pháp. (Đó là những chức năng sẽ nhận được ý nghĩathis giá trị từ người gọi của chúng.)
• Sử dụng chức năng mũi tên cho hầu hết mọi thứ khác.

Hàm mũi tên bên trong này không phản ánh ngữ cảnh của đối tượng. Thay vào đó, nó cung cấp ngữ cảnh nơi phương thức đối tượng được gọi.

Kiểm tra điều này, Điều này cung cấp một số thông tin chi tiết về thời điểm sử dụng arrow và khi nào thì không. https://dmitripavlutin.com/when-not-to-use-arrow-functions-in-javascript/

Nếu bạn phải sử dụng chức năng mũi tên, bạn có thể thay đổi thisthành chopper,

var chopper = {
  owner: "John",
  getOwner: () => chopper.owner
};

Mặc dù đây không phải là phương pháp hay nhất, nhưng khi bạn thay đổi tên đối tượng, bạn phải thay đổi chức năng mũi tên này.

Một mẹo khác, ở chế độ nghiêm ngặt, thisvẫn đề cập đến Window thay vì không xác định.

  (() => {
    "use strict";
    console.log(this); // window
  })();

  (function () {
    "use strict";
    console.log(this); // undefined
  })();