Làm cách nào để viết một hàm mũi tên có tên trong ES2015?

Tôi có một chức năng mà tôi đang cố gắng chuyển đổi sang cú pháp mũi tên mới trong ES6 . Đây là một chức năng được đặt tên:

function sayHello(name) {
    console.log(name + ' says hello');
}

Có cách nào để đặt tên cho nó mà không có câu lệnh var:

var sayHello = (name) => {
    console.log(name + ' says hello');
}

Rõ ràng, tôi chỉ có thể sử dụng chức năng này sau khi tôi đã xác định nó. Một cái gì đó như sau:

sayHello = (name) => {
        console.log(name + ' says hello');
    }

Có một cách mới để làm điều này trong ES6 ?

Làm cách nào để viết một hàm mũi tên có tên trong ES2015?

Bạn thực hiện theo cách bạn đã loại trừ trong câu hỏi của mình: Bạn đặt nó ở phía bên phải của một công cụ khởi tạo chuyển nhượng hoặc thuộc tính trong đó tên biến hoặc thuộc tính có thể được sử dụng một cách hợp lý làm tên của công cụ JavaScript. Không có cách nào khác để làm điều đó, nhưng làm điều đó là chính xác và được bảo vệ đầy đủ bởi đặc điểm kỹ thuật.

Theo thông số kỹ thuật, chức năng này có tên thật , sayHello:

var sayHello = name => {
    console.log(name + ' says hello');
};

Điều này được định nghĩa trong Toán tử chuyển nhượng> Ngữ nghĩa thời gian chạy: Đánh giá trong đó nó gọi hoạt động trừu tượngSetFunctionName (cuộc gọi đó hiện đang ở bước 1.e.iii).

Tương tự, ngữ nghĩa thời gian chạy: Các cuộc gọi propertyDefDefEvalvalSetFunctionName và do đó cung cấp cho hàm này một tên thật:

let o = {
    sayHello: name => {
        console.log(`${name} says hello`);
    }
};

Các công cụ hiện đại đặt tên nội bộ của hàm cho các câu lệnh như vậy rồi; Edge vẫn có bit làm cho nó có sẵn như nametrên thể hiện chức năng đằng sau một cờ thời gian chạy.

Ví dụ: trong Chrome hoặc Firefox, hãy mở bảng điều khiển web và sau đó chạy đoạn mã này:

"use strict";
let foo = () => { throw new Error(); };
console.log("foo.name is: " + foo.name);
try {
  foo();
} catch (e) {
  console.log(e.stack);
}

Trên Chrome 51 trở lên và Firefox 53 trở lên (và Edge 13 trở lên với cờ thử nghiệm), khi bạn chạy nó, bạn sẽ thấy:

foo.name là: foo
lỗi
    tại foo (http://stacksnippets.net/js:14:23)
    tại http://stacksnippets.net/js:17:3

Lưu ý foo.name is: foovà Error...at foo.

Trên Chrome 50 trở về trước, Firefox 52 trở về trước và Edge không có cờ thử nghiệm, thay vào đó bạn sẽ thấy điều này vì họ chưa có Function#nametài sản (chưa):

tên foo là: 
lỗi
    tại foo (http://stacksnippets.net/js:14:23)
    tại http://stacksnippets.net/js:17:3

Lưu ý rằng tên bị thiếu foo.name is:, nhưng nó được hiển thị trong theo dõi ngăn xếp. Chỉ là thực sự triển khai thuộc name tính trên hàm có mức độ ưu tiên thấp hơn một số tính năng ES2015 khác; Chrome và Firefox có ngay bây giờ; Edge có nó phía sau một lá cờ, có lẽ nó sẽ không ở đằng sau lá cờ lâu hơn nhiều.

Rõ ràng, tôi chỉ có thể sử dụng chức năng này sau khi tôi đã xác định nó

Chính xác. Không có cú pháp khai báo hàm cho các hàm mũi tên, chỉ có cú pháp biểu thức hàm và không có mũi tên tương đương với tên trong biểu thức hàm có tên kiểu cũ ( var f = function foo() { };). Vì vậy, không có tương đương với:

console.log(function fact(n) {
    if (n < 0) {
        throw new Error("Not defined for negative numbers");
    }
    return n == 0 ? 1 : n * fact(n - 1);
}(5)); // 120

Bạn cần phải phá vỡ nó thành hai biểu thức (tôi muốn tranh luận, bạn nên làm điều đó nào ) :

let fact = n => {
    if (n < 0) {
      throw new Error("Not defined for negative numbers.");
    }
    return n == 0 ? 1 : n * fact(n - 1);
};
console.log(fact(5));

Tất nhiên, nếu bạn phải đặt biểu thức này ở nơi cần một biểu thức, bạn luôn có thể ... sử dụng hàm mũi tên:

console.log((() => {
    let fact = n => {
        if (n < 0) {
            throw new Error("Not defined for negative numbers.");
        }
        return n == 0 ? 1 : n * fact(n - 1);
    };
    return fact(5);
})()); // 120

Tôi không nói là nó đẹp, nhưng nó hoạt động nếu bạn hoàn toàn, tích cực cần một trình bao bọc biểu thức duy nhất.

Không. Cú pháp mũi tên là một dạng rút gọn cho các hàm ẩn danh. Chức năng ẩn danh là, tốt, ẩn danh.

Các chức năng được đặt tên được xác định với functiontừ khóa.

Nếu theo 'tên', bạn có nghĩa là bạn muốn đặt thuộc .nametính của hàm mũi tên của mình, bạn sẽ gặp may.

Nếu một chức năng mũi tên được xác định ở phía bên phải của biểu thức gán, động cơ sẽ lấy tên ở phía bên trái và sử dụng nó để đặt chức năng của mũi tên .name, ví dụ:

var sayHello = (name) => {
    console.log(name + ' says hello');
}

sayHello.name //=== 'sayHello'

Như đã nói, câu hỏi của bạn dường như nhiều hơn 'tôi có thể lấy hàm mũi tên để nâng lên không?'. Câu trả lời cho câu hỏi đó là một câu "không" lớn, tôi sợ.

Dường như điều này sẽ khả thi với ES7: https://babeljs.io/blog/2015/06/07/react-on-es6-plus#arrow-fifts

Ví dụ được đưa ra là:

class PostInfo extends React.Component {
  handleOptionsButtonClick = (e) => {
    this.setState({showOptionsModal: true});
  }
}

Phần thân của các hàm mũi tên ES6 có chung từ vựng giống như mã bao quanh chúng, điều này mang lại cho chúng ta kết quả mong muốn do cách các trình khởi tạo thuộc tính ES7 được đặt trong phạm vi.

Lưu ý rằng để làm việc này với babel, tôi cần kích hoạt cú pháp ES7 giai đoạn 0 thử nghiệm nhất. Trong tệp webpack.config.js của tôi, tôi đã cập nhật trình tải babel như sau:

{test: /\.js$/, exclude: /node_modules/, loader: 'babel?stage=0'},

Trên thực tế, có vẻ như một cách để đặt tên cho các hàm mũi tên (ít nhất là bằng chrome 77 ...) là để làm điều này:

"use strict";
let fn_names = {};
fn_names.foo = () => { throw new Error(); };
console.log("foo.name is: " + foo.name);
try {
  foo();
} catch (e) {
  console.log(e.stack);
}

để viết hàm mũi tên có tên, bạn có thể tham gia ví dụ dưới đây, trong đó tôi có một lớp có tên là lớp Đăng nhập và bên trong lớp này tôi đã viết một hàm có tên mũi tên , tên là successAuth lớp LoginClass {

    constructor() {

    }

    successAuth = (dataArgs)=> { //named arow function

    }

}

Đây là ES6

Vâng tôi nghĩ những gì bạn đang theo đuổi là như thế này:

const foo = (depth) => {console.log("hi i'm Adele")}
foo -> // the function itself
foo() -> // "hi i'm Adele"

Bạn có thể bỏ qua phần chức năng và phần mũi tên để tạo chức năng. Thí dụ:

 class YourClassNameHere{

   constructor(age) {
     this.age = age;
   }

   foo() {
     return "This is a function with name Foo";
   }

   bar() {
     return "This is a function with name bar";
   }

 }

let myVar = new YourClassNameHere(50);
myVar.foo();