phương pháp trong các đối tượng ES6: sử dụng chức năng mũi tên

Question

Trong ES6, cả hai đều hợp pháp:

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

và, như 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 cũng ? Trong cố gắng một cái gì đó giống như

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

hoặc

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

tôi nhận được một thông báo lỗi cho thấy rằng phương pháp này không có quyền truy cập vào this. Đây có phải chỉ là một vấn đề cú pháp, hoặc bạn không thể sử dụng các phương pháp đường ống mỡ bên trong các đối tượng ES6?

Answer 1

Các chức năng 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à phiên bản ngắn hơn của các chức năng cũ. Chúng không nhằm thay thế cú pháp hàm bằng cách sử dụng từ khóa function. Trường hợp sử dụng phổ biến nhất cho các chức năng 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 làm gọi lại cho một số hàm.

chức năng mũi tên không thể được sử dụng để viết các phương pháp đối tượng bởi vì, như bạn đã thấy, vì mũi tên chức năng đảm nhận this của bối cảnh chức năng giải nghĩa từ vựng kèm theo, các this trong một định nghĩa đối tượng có thể là từ cửa sổ hay cái gì khác:

var foo = { 
    bar:() => this.baz // this is window or something else 
} 

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ỉ cần sử dụng tiêu chuẩn function syntax hoặc "tên phương thức viết tắt" được giới thiệu trong ES6.

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

Một đề nghị trước đó là giảm số lượng đột quỵ bằng cách sử dụng "cơ quan ngắn gọn", cho phép bạn không phải viết return, như trong

var foo = { 
    function bar() this.baz 
        ^^^^^^^^ "concise body" 
} 

nhưng điều này đã bị từ chối vì lý do parseability.

Answer 2

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

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

Bạn sẽ phải khai báo this vào một chức năng:

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

Hoặc:

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

Answer 3

Chức năng 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 cho bối cảnh mà 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 mũi tên và khi nào không. https://dmitripavlutin.com/when-not-to-use-arrow-functions-in-javascript/