Có bao nhiêu cách chúng ta có thể tạo chức năng trong JavaScript?

Một hàm có thể là một đối tượng chính trong lập trình, nhưng bạn có thể thấy chúng được viết theo nhiều cách khác nhau trong JavaScript, ngay cả trong cùng một cơ sở mã — điều này là do các hàm có các thuộc tính khác nhau tùy thuộc vào cách chúng được định nghĩa

Đây là hướng dẫn thực địa về các loại hàm khác nhau mà bạn có thể gặp trong hành trình lập trình JavaScript của mình, bắt nguồn từ

Tổng quan

Cú pháp một hàm được viết trong xác định các thuộc tính này. liệu nó có được nâng lên, được đặt tên, có trả về ngầm định hay liên kết từ vựng với giá trị của từ khóa

function f() {
  return this.a;
}

var g = f.bind({a: 'azerty'});
console.log(g()) //=> azerty

var h = g.bind({a: 'yoo'}); // bind only works once!
console.log(h()) //=> azerty

var o = {a: 37};
console.log(o.a, o.f(), o.g(), o.h()) //=> 37,37, azerty, azerty

0 hay không

Tôi đã tạo biểu đồ này để tóm tắt những gì chúng tôi đang làm việc với

Ghi chú. Cả Hàm và Hàm tạo đều có thể được tạo bằng cách sử dụng các hàm tạo đối tượng tương ứng của chúng, nhưng điều này không được khuyến nghị. Khai báo hàm

Tôi nhận thấy đây là cách phổ biến nhất mà các chức năng được viết bằng JavaScript đơn giản. Đây là một ví dụ

cow() //=> "moo"function cow() {return "moo"}

Lưu ý rằng hàm có thể được gọi trước khi nó được khai báo vì định nghĩa của nó được đưa vào bộ nhớ trong quá trình biên dịch, trước khi mã được thực thi

Đối với khai báo hàm, cũng như tất cả các loại hàm khác ngoại trừ hàm mũi tên, giá trị của từ khóa

function f() {
  return this.a;
}

var g = f.bind({a: 'azerty'});
console.log(g()) //=> azerty

var h = g.bind({a: 'yoo'}); // bind only works once!
console.log(h()) //=> azerty

var o = {a: 37};
console.log(o.a, o.f(), o.g(), o.h()) //=> 37,37, azerty, azerty

0 thay đổi tùy thuộc vào ngữ cảnh thực thi của nó. Trong ES2015, phương thức

function f() {
  return this.a;
}

var g = f.bind({a: 'azerty'});
console.log(g()) //=> azerty

var h = g.bind({a: 'yoo'}); // bind only works once!
console.log(h()) //=> azerty

var o = {a: 37};
console.log(o.a, o.f(), o.g(), o.h()) //=> 37,37, azerty, azerty

2 cho phép bạn đặt vĩnh viễn giá trị của

function f() {
  return this.a;
}

var g = f.bind({a: 'azerty'});
console.log(g()) //=> azerty

var h = g.bind({a: 'yoo'}); // bind only works once!
console.log(h()) //=> azerty

var o = {a: 37};
console.log(o.a, o.f(), o.g(), o.h()) //=> 37,37, azerty, azerty

0 khi đối tượng được chuyển vào. trói buộc

function f() {
  return this.a;
}

var g = f.bind({a: 'azerty'});
console.log(g()) //=> azerty

var h = g.bind({a: 'yoo'}); // bind only works once!
console.log(h()) //=> azerty

var o = {a: 37};
console.log(o.a, o.f(), o.g(), o.h()) //=> 37,37, azerty, azerty

(sửa đổi từ. https. // nhà phát triển. mozilla. org/en-US/docs/Web/JavaScript/Reference/Operators/this)

Biểu thức hàm

Biểu thức hàm, không giống như khai báo hàm, không cần phải đặt tên và không được nâng lên

Các hàm không tên hoặc ẩn danh được sử dụng phổ biến làm hàm gọi lại vì chúng được gọi ngay lập tức. Tuy nhiên, Tài liệu web MDN lưu ý rằng việc đặt tên cho các chức năng của bạn vẫn hữu ích để giúp theo dõi chúng dễ dàng hơn trong ngăn xếp cuộc gọi của bạn

const dog = function() { return "bark" }dog() //=> "bark"(function() {return "meow"})() //=> "meow"

Bạn không thể sử dụng lại các chức năng được gọi ngay lập tức ngay cả khi chúng được đặt tên

(function sheep() { return "baa" })() //=> "baa"sheep() //=> ReferenceError: sheep is not defined

Chức năng* Khai báo

Sử dụng từ khóa

function f() {
  return this.a;
}

var g = f.bind({a: 'azerty'});
console.log(g()) //=> azerty

var h = g.bind({a: 'yoo'}); // bind only works once!
console.log(h()) //=> azerty

var o = {a: 37};
console.log(o.a, o.f(), o.g(), o.h()) //=> 37,37, azerty, azerty

4 xác định một loại hàm đặc biệt được gọi là hàm tạo

Không giống như các chức năng thông thường, thực thi toàn bộ khi được gọi, trình tạo là các chức năng có thể được thoát ra và sau đó được nhập lại tại các điểm khác nhau. Điều này cho phép họ thay đổi các giá trị mà họ trả về ngay cả khi được gọi với cùng tham số

function* yieldAndReturn() {
  yield "Yield"
  return "Return"
  yield "unreachable"
}const gen = yieldAndReturn()console.log(gen.next()) //=> { value: "Yield", done: false }console.log(gen.next()) //=> { value: "Return", done: true }console.log(gen.next()) //=> { value: undefined, done: true }

(sửa đổi từ https. // nhà phát triển. mozilla. org/en-US/docs/Web/JavaScript/Tham khảo/Câu lệnh/chức năng*)

Khi được gọi, các hàm trình tạo trả về một đối tượng Trình tạo với ba phương thức thể hiện.

function f() {
  return this.a;
}

var g = f.bind({a: 'azerty'});
console.log(g()) //=> azerty

var h = g.bind({a: 'yoo'}); // bind only works once!
console.log(h()) //=> azerty

var o = {a: 37};
console.log(o.a, o.f(), o.g(), o.h()) //=> 37,37, azerty, azerty

5 ,

function f() {
  return this.a;
}

var g = f.bind({a: 'azerty'});
console.log(g()) //=> azerty

var h = g.bind({a: 'yoo'}); // bind only works once!
console.log(h()) //=> azerty

var o = {a: 37};
console.log(o.a, o.f(), o.g(), o.h()) //=> 37,37, azerty, azerty

6 và

function f() {
  return this.a;
}

var g = f.bind({a: 'azerty'});
console.log(g()) //=> azerty

var h = g.bind({a: 'yoo'}); // bind only works once!
console.log(h()) //=> azerty

var o = {a: 37};
console.log(o.a, o.f(), o.g(), o.h()) //=> 37,37, azerty, azerty

7. Gọi

function f() {
  return this.a;
}

var g = f.bind({a: 'azerty'});
console.log(g()) //=> azerty

var h = g.bind({a: 'yoo'}); // bind only works once!
console.log(h()) //=> azerty

var o = {a: 37};
console.log(o.a, o.f(), o.g(), o.h()) //=> 37,37, azerty, azerty

8 trả về một đối tượng có khóa

function f() {
  return this.a;
}

var g = f.bind({a: 'azerty'});
console.log(g()) //=> azerty

var h = g.bind({a: 'yoo'}); // bind only works once!
console.log(h()) //=> azerty

var o = {a: 37};
console.log(o.a, o.f(), o.g(), o.h()) //=> 37,37, azerty, azerty

9 — trỏ đến đầu ra và

const dog = function() { return "bark" }dog() //=> "bark"(function() {return "meow"})() //=> "meow"

0 — trỏ đến một boolean cho biết hàm tạo đã đến cuối phần thân của nó hay chưa

Các hàm tạo, cùng với

const dog = function() { return "bark" }dog() //=> "bark"(function() {return "meow"})() //=> "meow"

1, được sử dụng trong lập trình không đồng bộ

Hàm* Biểu thức

Các hàm tạo cũng có thể được viết dưới dạng biểu thức. Định nghĩa hàm * được nâng lên trong khi biểu thức hàm * không

cow() //=> "moo"function cow() {return "moo"}

7

(sửa đổi từ https. // nhà phát triển. mozilla. org/en-US/docs/Web/JavaScript/Tham khảo/Câu lệnh/chức năng*)

Lưu ý rằng (đối với cả khai báo hàm* và biểu thức), bạn phải lưu đối tượng trình tạo được hàm trả về trong một biến để sử dụng

function f() {
  return this.a;
}

var g = f.bind({a: 'azerty'});
console.log(g()) //=> azerty

var h = g.bind({a: 'yoo'}); // bind only works once!
console.log(h()) //=> azerty

var o = {a: 37};
console.log(o.a, o.f(), o.g(), o.h()) //=> 37,37, azerty, azerty

8 để thực hiện từng bước trong hàm

cow() //=> "moo"function cow() {return "moo"}

9

Mỗi khi hàm được gọi, một đối tượng trình tạo mới được trả về

function f() {
  return this.a;
}

var g = f.bind({a: 'azerty'});
console.log(g()) //=> azerty

var h = g.bind({a: 'yoo'}); // bind only works once!
console.log(h()) //=> azerty

var o = {a: 37};
console.log(o.a, o.f(), o.g(), o.h()) //=> 37,37, azerty, azerty

0Hàm mũi tên

Cuối cùng, các hàm mũi tên là một cách viết hàm độc đáo, không được đặt tên. Chúng không được nâng lên

function f() {
  return this.a;
}

var g = f.bind({a: 'azerty'});
console.log(g()) //=> azerty

var h = g.bind({a: 'yoo'}); // bind only works once!
console.log(h()) //=> azerty

var o = {a: 37};
console.log(o.a, o.f(), o.g(), o.h()) //=> 37,37, azerty, azerty

1

Các hàm mũi tên liên kết ngầm giá trị của

function f() {
  return this.a;
}

var g = f.bind({a: 'azerty'});
console.log(g()) //=> azerty

var h = g.bind({a: 'yoo'}); // bind only works once!
console.log(h()) //=> azerty

var o = {a: 37};
console.log(o.a, o.f(), o.g(), o.h()) //=> 37,37, azerty, azerty

0 với ngữ cảnh từ vựng của nó khi nó được xác định

Về mặt cú pháp, có một số biến thể trong các hàm mũi tên. Dấu ngoặc đơn mở là tùy chọn nếu có một đối số, nhưng cần phải có nếu không có hoặc hai đối số trở lên. Dấu ngoặc quanh thân hàm cũng là tùy chọn nếu chỉ có một biểu thức nhưng bạn cần đặt dấu ngoặc đơn nếu bạn đang trả về một đối tượng

Có bao nhiêu cách chúng ta có thể tạo chức năng?

Ba phần của hàm trong JavaScript là gì?

Có bao nhiêu hàm tích hợp JavaScript?