Tham số chức năng destructuring ES6 - đặt tên đối tượng gốc

Question

Có cách nào để giữ lại tên của đối số hàm bị hủy không? I.e, tên của đối tượng gốc?

Trong ES5, tôi có thể làm được điều này (sử dụng thừa kế như một ẩn dụ để làm cho điểm):

// ES5: 
var setupParentClass5 = function(options) { 
    textEditor.setup(options.rows, options.columns); 
}; 

var setupChildClass5 = function(options) { 
    rangeSlider.setup(options.minVal, options.maxVal); 
    setupParentClass5(options); // <= we pass the options object UP 
}; 

Tôi đang sử dụng cùng một đối tượng options giữ nhiều tham số cấu hình. Một số tham số được sử dụng bởi lớp cha và một số được sử dụng bởi lớp con.

Có cách nào để thực hiện điều này với các đối số hàm bị hủy trong ES6 không?

// ES6: 
var setupParentClass6 = ({rows, columns}) => { 
    textEditor.setup(rows, columns); 
}; 

var setupChildClass6 = ({minVal, maxVal}) => { 
    rangeSlider.setup(minVal, maxVal); 
    setupParentClass6(/* ??? */); // how to pass the root options object? 
}; 

Hoặc tôi cần phải trích xuất tất cả các tùy chọn trong setupChildClass6() để họ có thể được thông qua cá nhân vào setupParentClass6()?

// ugh. 
var setupChildClass6b = ({minVal, maxVal, rows, columns}) => { 
    rangeSlider.setup(minVal, maxVal); 
    setupParentClass6({rows, columns}); 
}; 

Answer 1

Tôi tự mình có đối số 'tùy chọn' trên quá nhiều địa điểm. Tôi sẽ chọn thêm 1 dòng mã. Không xứng đáng trong ví dụ này, nhưng là một giải pháp tốt khi có destructuring trên nhiều dòng.

const setupChildClass6 = options => { 
    const {minVal, maxVal} = options; 
    rangeSlider.setup(minVal, maxVal); 
    setupParentClass6(options); 
}; 

Answer 2

Bạn không thể sử dụng đối số vị trí được đặt tên hủy và đơn giản cho cùng một thông số cùng một lúc. Những gì bạn có thể làm:

1. Sử dụng destructuring cho setupParentClass6 chức năng, nhưng cách tiếp cận ES6 cũ cho setupChildClass6 (Tôi nghĩ rằng đây là sự lựa chọn tốt nhất, chỉ cần đảm tên ngắn hơn):

   var setupChildClass6 = (o) => { 
       rangeSlider.setup(o.minVal, o.maxVal); 
       setupParentClass6(o); 
   }; 
   

2. Sử dụng cũ arguments vật. Nhưng arguments có thể làm chậm một hàm (V8 cụ thể), vì vậy tôi nghĩ rằng đó là một cách tiếp cận xấu:

   var setupChildClass6 = ({minVal, maxVal}) => { 
       rangeSlider.setup(minVal, maxVal); 
       setupParentClass6(arguments[0]); 
   }; 
   

3. ES7 có đề nghị cho rest/spread properties (nếu bạn không cần minVal và maxVal trong setupParentCalss6 chức năng):

   Rất tiếc, không phải ES6.