Hướng dẫn function without parameters javascript - hàm không có tham số javascript

Xác định chức năng

Tuyên bố chức năng

Một định nghĩa chức năng (còn được gọi là khai báo chức năng hoặc câu lệnh hàm) bao gồm từ khóa

'5';

true;

() => 'foo';

console.log('syntax is fine');

'5';

true;

() => 'foo';

console.log('syntax is fine');

• Tên của hàm.
• Một danh sách các tham số cho hàm, được đặt trong dấu ngoặc đơn và được phân tách bằng dấu phẩy.
• Các câu lệnh JavaScript xác định hàm, được đặt trong các dấu ngoặc xoăn,

  '5';
  
  true;
  
  () => 'foo';
  
  console.log('syntax is fine');

  5.

Ví dụ: mã sau xác định một hàm đơn giản có tên

'5';

true;

() => 'foo';

console.log('syntax is fine');

function square(number) {
  return number * number;
}

Hàm

'5';

true;

() => 'foo';

console.log('syntax is fine');

'5';

true;

() => 'foo';

console.log('syntax is fine');

'5';

true;

() => 'foo';

console.log('syntax is fine');

function square(number) {
  return number * number;
}

Các tham số về cơ bản được truyền đến các hàm theo giá trị - vì vậy nếu mã trong phần thân của hàm gán một giá trị hoàn toàn mới cho một tham số được truyền cho hàm, sự thay đổi không được phản ánh trên toàn cầu hoặc trong mã được gọi là hàm đó.by value — so if the code within the body of a function assigns a completely new value to a parameter that was passed to the function, the change is not reflected globally or in the code which called that function.

Khi bạn chuyển một đối tượng dưới dạng tham số, nếu hàm thay đổi thuộc tính của đối tượng, thay đổi đó có thể hiển thị bên ngoài hàm, như trong ví dụ sau:

function myFunc(theObject) {
  theObject.make = 'Toyota';
}

const mycar = {
  make: 'Honda',
  model: 'Accord',
  year: 1998,
};

// x gets the value "Honda"
const x = mycar.make;

// the make property is changed by the function
myFunc(mycar);
// y gets the value "Toyota"
const y = mycar.make;

Khi bạn chuyển một mảng làm tham số, nếu hàm thay đổi bất kỳ giá trị nào của mảng, thay đổi đó có thể hiển thị bên ngoài hàm, như trong ví dụ sau:

function myFunc(theArr) {
  theArr[0] = 30;
}

const arr = [45];

console.log(arr[0]); // 45
myFunc(arr);
console.log(arr[0]); // 30

Biểu thức chức năng

Trong khi khai báo hàm ở trên là một câu lệnh, các hàm cũng có thể được tạo bằng một biểu thức chức năng.

Một chức năng như vậy có thể ẩn danh; Nó không phải có một cái tên. Ví dụ: hàm

'5';

true;

() => 'foo';

console.log('syntax is fine');

'5';

true;

() => 'foo';

console.log('syntax is fine');

const square = function (number) {
  return number * number;
}
const x = square(4); // x gets the value 16

Tuy nhiên, một tên có thể được cung cấp với một biểu thức chức năng. Cung cấp tên cho phép chức năng đề cập đến chính nó và cũng giúp dễ dàng xác định chức năng trong dấu vết ngăn xếp của trình gỡ lỗi:

const factorial = function fac(n) {
  return n < 2 ? 1 : n * fac(n - 1);
}

console.log(factorial(3))

Biểu thức chức năng thuận tiện khi chuyển một hàm như một đối số cho một hàm khác. Ví dụ sau đây hiển thị hàm

function square(number) {
  return number * number;
}

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

Trong mã sau, hàm nhận được một hàm được xác định bởi biểu thức chức năng và thực thi nó cho mọi yếu tố của mảng nhận được dưới dạng đối số thứ hai:

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

Hàm trả về:

function square(number) {
  return number * number;
}

Trong JavaScript, một hàm có thể được xác định dựa trên một điều kiện. Ví dụ: định nghĩa chức năng sau đây xác định

function square(number) {
  return number * number;
}

function square(number) {
  return number * number;
}

function square(number) {
  return number * number;
}

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

Ngoài việc xác định các chức năng như được mô tả ở đây, bạn cũng có thể sử dụng hàm tạo

function square(number) {
  return number * number;
}

function square(number) {
  return number * number;
}

Phương pháp là một hàm là thuộc tính của một đối tượng. Đọc thêm về các đối tượng và phương pháp trong làm việc với các đối tượng.method is a function that is a property of an object. Read more about objects and methods in Working with objects.

Gọi chức năng

Xác định một chức năng không thực thi nó. Xác định nó đặt tên cho chức năng và chỉ định những việc cần làm khi hàm được gọi.

Gọi hàm thực sự thực hiện các hành động được chỉ định với các tham số được chỉ định. Ví dụ: nếu bạn xác định chức năng

'5';

true;

() => 'foo';

console.log('syntax is fine');

'5';

true;

() => 'foo';

console.log('syntax is fine');

Câu lệnh trước gọi hàm với đối số là

function myFunc(theObject) {
  theObject.make = 'Toyota';
}

const mycar = {
  make: 'Honda',
  model: 'Accord',
  year: 1998,
};

// x gets the value "Honda"
const x = mycar.make;

// the make property is changed by the function
myFunc(mycar);
// y gets the value "Toyota"
const y = mycar.make;

function myFunc(theObject) {
  theObject.make = 'Toyota';
}

const mycar = {
  make: 'Honda',
  model: 'Accord',
  year: 1998,
};

// x gets the value "Honda"
const x = mycar.make;

// the make property is changed by the function
myFunc(mycar);
// y gets the value "Toyota"
const y = mycar.make;

Các chức năng phải nằm trong phạm vi khi chúng được gọi, nhưng khai báo chức năng có thể được nâng lên (xuất hiện bên dưới cuộc gọi trong mã). Phạm vi của một khai báo hàm là hàm trong đó được khai báo (hoặc toàn bộ chương trình, nếu nó được khai báo ở cấp cao nhất).

Các đối số của một hàm không giới hạn ở các chuỗi và số. Bạn có thể chuyển toàn bộ đối tượng cho một chức năng. Hàm

function myFunc(theObject) {
  theObject.make = 'Toyota';
}

const mycar = {
  make: 'Honda',
  model: 'Accord',
  year: 1998,
};

// x gets the value "Honda"
const x = mycar.make;

// the make property is changed by the function
myFunc(mycar);
// y gets the value "Toyota"
const y = mycar.make;

Một chức năng có thể gọi chính nó. Ví dụ, đây là một chức năng tính toán các giai thừa một cách đệ quy:

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

Sau đó, bạn có thể tính toán các giai thừa của

function myFunc(theObject) {
  theObject.make = 'Toyota';
}

const mycar = {
  make: 'Honda',
  model: 'Accord',
  year: 1998,
};

// x gets the value "Honda"
const x = mycar.make;

// the make property is changed by the function
myFunc(mycar);
// y gets the value "Toyota"
const y = mycar.make;

function myFunc(theObject) {
  theObject.make = 'Toyota';
}

const mycar = {
  make: 'Honda',
  model: 'Accord',
  year: 1998,
};

// x gets the value "Honda"
const x = mycar.make;

// the make property is changed by the function
myFunc(mycar);
// y gets the value "Toyota"
const y = mycar.make;

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

Có nhiều cách khác để gọi các chức năng. Thường có các trường hợp một hàm cần được gọi là động hoặc số lượng đối số cho một hàm khác nhau hoặc trong đó bối cảnh của lệnh gọi hàm cần được đặt thành một đối tượng cụ thể được xác định trong thời gian chạy.

Nó chỉ ra rằng các chức năng là các đối tượng của chúng - và đến lượt nó, các đối tượng này có các phương thức. (Xem đối tượng

function square(number) {
  return number * number;
}

function myFunc(theObject) {
  theObject.make = 'Toyota';
}

const mycar = {
  make: 'Honda',
  model: 'Accord',
  year: 1998,
};

// x gets the value "Honda"
const x = mycar.make;

// the make property is changed by the function
myFunc(mycar);
// y gets the value "Toyota"
const y = mycar.make;

function myFunc(theObject) {
  theObject.make = 'Toyota';
}

const mycar = {
  make: 'Honda',
  model: 'Accord',
  year: 1998,
};

// x gets the value "Honda"
const x = mycar.make;

// the make property is changed by the function
myFunc(mycar);
// y gets the value "Toyota"
const y = mycar.make;

Chức năng nâng cao

Xem xét ví dụ dưới đây:

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

Mã này chạy mà không có bất kỳ lỗi nào, mặc dù chức năng

function myFunc(theObject) {
  theObject.make = 'Toyota';
}

const mycar = {
  make: 'Honda',
  model: 'Accord',
  year: 1998,
};

// x gets the value "Honda"
const x = mycar.make;

// the make property is changed by the function
myFunc(mycar);
// y gets the value "Toyota"
const y = mycar.make;

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

Chức năng nâng chỉ hoạt động với các khai báo chức năng - không phải với các biểu thức chức năng. Mã dưới đây sẽ không hoạt động.

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

Phạm vi chức năng

Các biến được xác định bên trong một hàm không thể được truy cập từ bất cứ nơi nào bên ngoài hàm, bởi vì biến chỉ được xác định trong phạm vi của hàm. Tuy nhiên, một hàm có thể truy cập tất cả các biến và hàm được xác định bên trong phạm vi mà nó được xác định.

Nói cách khác, một hàm được xác định trong phạm vi toàn cầu có thể truy cập tất cả các biến được xác định trong phạm vi toàn cầu. Một hàm được xác định bên trong một hàm khác cũng có thể truy cập tất cả các biến được xác định trong hàm cha của nó và bất kỳ biến nào khác mà hàm cha có quyền truy cập.

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

Phạm vi và ngăn xếp chức năng

Đệ quy

Một chức năng có thể tham khảo và gọi chính nó. Có ba cách để một chức năng đề cập đến chính nó:

1. Tên của chức năng

2. function myFunc(theObject) {
     theObject.make = 'Toyota';
   }
   
   const mycar = {
     make: 'Honda',
     model: 'Accord',
     year: 1998,
   };
   
   // x gets the value "Honda"
   const x = mycar.make;
   
   // the make property is changed by the function
   myFunc(mycar);
   // y gets the value "Toyota"
   const y = mycar.make;
   

   9
3. Một biến trong phạm vi đề cập đến chức năng

Ví dụ, hãy xem xét định nghĩa chức năng sau:

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

Trong cơ thể chức năng, sau đây đều tương đương:

1. function myFunc(theArr) {
     theArr[0] = 30;
   }
   
   const arr = [45];
   
   console.log(arr[0]); // 45
   myFunc(arr);
   console.log(arr[0]); // 30
   

   0

2. function myFunc(theArr) {
     theArr[0] = 30;
   }
   
   const arr = [45];
   
   console.log(arr[0]); // 45
   myFunc(arr);
   console.log(arr[0]); // 30
   

   1

3. function myFunc(theArr) {
     theArr[0] = 30;
   }
   
   const arr = [45];
   
   console.log(arr[0]); // 45
   myFunc(arr);
   console.log(arr[0]); // 30
   

   2

Một hàm tự gọi được gọi là hàm đệ quy. Trong một số cách, đệ quy tương tự như một vòng lặp. Cả hai thực thi cùng một mã nhiều lần và cả hai đều yêu cầu một điều kiện (để tránh một vòng lặp vô hạn, hoặc đúng hơn là đệ quy vô hạn trong trường hợp này).

Ví dụ, hãy xem xét vòng lặp sau:

click

Nó có thể được chuyển đổi thành khai báo chức năng đệ quy, theo sau là một cuộc gọi đến chức năng đó:

click

Tuy nhiên, một số thuật toán không thể là các vòng lặp đơn giản. Ví dụ: nhận tất cả các nút của cấu trúc cây (như DOM) dễ dàng hơn thông qua đệ quy:

click

So với hàm

function myFunc(theArr) {
  theArr[0] = 30;
}

const arr = [45];

console.log(arr[0]); // 45
myFunc(arr);
console.log(arr[0]); // 30

Có thể chuyển đổi bất kỳ thuật toán đệ quy nào thành một thuật toán không nhận được, nhưng logic thường phức tạp hơn nhiều và làm như vậy đòi hỏi phải sử dụng ngăn xếp.

Trong thực tế, việc đệ quy sử dụng một ngăn xếp: Chức năng ngăn xếp. Hành vi giống như ngăn xếp có thể được nhìn thấy trong ví dụ sau:

click

Các chức năng và đóng cửa lồng nhau

Bạn có thể làm tổ một chức năng trong một chức năng khác. Hàm lồng nhau (bên trong) là riêng tư cho hàm (bên ngoài) của nó.

Nó cũng tạo thành một đóng cửa. Đóng cửa là một biểu thức (phổ biến nhất là một hàm) có thể có các biến tự do cùng với một môi trường liên kết các biến đó ("đóng" biểu thức).

Vì một hàm lồng nhau là một đóng cửa, điều này có nghĩa là một hàm lồng nhau có thể "kế thừa" các đối số và biến của hàm chứa của nó. Nói cách khác, hàm bên trong chứa phạm vi của hàm bên ngoài.

Để tóm tắt:

• Hàm bên trong chỉ có thể được truy cập từ các câu lệnh trong hàm bên ngoài.
• Hàm bên trong tạo thành một đóng: hàm bên trong có thể sử dụng các đối số và biến của hàm bên ngoài, trong khi hàm bên ngoài không thể sử dụng các đối số và biến của hàm bên trong.

Ví dụ sau đây cho thấy các chức năng lồng nhau:

click

Vì hàm bên trong hình thành việc đóng, bạn có thể gọi hàm bên ngoài và chỉ định các đối số cho cả hàm bên ngoài và bên trong:

click

Bảo tồn các biến

Lưu ý cách

function myFunc(theArr) {
  theArr[0] = 30;
}

const arr = [45];

console.log(arr[0]); // 45
myFunc(arr);
console.log(arr[0]); // 30

function myFunc(theArr) {
  theArr[0] = 30;
}

const arr = [45];

console.log(arr[0]); // 45
myFunc(arr);
console.log(arr[0]); // 30

function myFunc(theArr) {
  theArr[0] = 30;
}

const arr = [45];

console.log(arr[0]); // 45
myFunc(arr);
console.log(arr[0]); // 30

function myFunc(theArr) {
  theArr[0] = 30;
}

const arr = [45];

console.log(arr[0]); // 45
myFunc(arr);
console.log(arr[0]); // 30

Điều này không khác với việc lưu trữ các tài liệu tham khảo trong các đối tượng khác, nhưng thường ít rõ ràng hơn vì người ta không đặt các tài liệu tham khảo trực tiếp và không thể kiểm tra chúng.

Nhân các chức năng được lồng

Các chức năng có thể được nhân lên. Ví dụ:

• Một hàm (

  function myFunc(theArr) {
    theArr[0] = 30;
  }
  
  const arr = [45];
  
  console.log(arr[0]); // 45
  myFunc(arr);
  console.log(arr[0]); // 30
  

  8) chứa hàm (

  function myFunc(theArr) {
    theArr[0] = 30;
  }
  
  const arr = [45];
  
  console.log(arr[0]); // 45
  myFunc(arr);
  console.log(arr[0]); // 30
  

  9), bản thân chứa hàm (

  const square = function (number) {
    return number * number;
  }
  const x = square(4); // x gets the value 16
  

  0).
• Cả hai chức năng

  function myFunc(theArr) {
    theArr[0] = 30;
  }
  
  const arr = [45];
  
  console.log(arr[0]); // 45
  myFunc(arr);
  console.log(arr[0]); // 30
  

  9 và

  const square = function (number) {
    return number * number;
  }
  const x = square(4); // x gets the value 16
  

  0 đóng cửa biểu mẫu ở đây. Vì vậy,

  function myFunc(theArr) {
    theArr[0] = 30;
  }
  
  const arr = [45];
  
  console.log(arr[0]); // 45
  myFunc(arr);
  console.log(arr[0]); // 30
  

  9 có thể truy cập

  function myFunc(theArr) {
    theArr[0] = 30;
  }
  
  const arr = [45];
  
  console.log(arr[0]); // 45
  myFunc(arr);
  console.log(arr[0]); // 30
  

  8 và

  const square = function (number) {
    return number * number;
  }
  const x = square(4); // x gets the value 16
  

  0 có thể truy cập

  function myFunc(theArr) {
    theArr[0] = 30;
  }
  
  const arr = [45];
  
  console.log(arr[0]); // 45
  myFunc(arr);
  console.log(arr[0]); // 30
  

  9.
• Ngoài ra, vì

  const square = function (number) {
    return number * number;
  }
  const x = square(4); // x gets the value 16
  

  0 có thể truy cập

  function myFunc(theArr) {
    theArr[0] = 30;
  }
  
  const arr = [45];
  
  console.log(arr[0]); // 45
  myFunc(arr);
  console.log(arr[0]); // 30
  

  9 có thể truy cập

  function myFunc(theArr) {
    theArr[0] = 30;
  }
  
  const arr = [45];
  
  console.log(arr[0]); // 45
  myFunc(arr);
  console.log(arr[0]); // 30
  

  8,

  const square = function (number) {
    return number * number;
  }
  const x = square(4); // x gets the value 16
  

  0 cũng có thể truy cập

  function myFunc(theArr) {
    theArr[0] = 30;
  }
  
  const arr = [45];
  
  console.log(arr[0]); // 45
  myFunc(arr);
  console.log(arr[0]); // 30
  

  8.

Do đó, việc đóng cửa có thể chứa nhiều phạm vi; Chúng đệ quy chứa phạm vi của các chức năng chứa nó. Đây được gọi là chuỗi phạm vi. (Lý do nó được gọi là "chuỗi" được giải thích sau.)

Xem xét ví dụ sau:

click

Trong ví dụ này,

const square = function (number) {
  return number * number;
}
const x = square(4); // x gets the value 16

const factorial = function fac(n) {
  return n < 2 ? 1 : n * fac(n - 1);
}

console.log(factorial(3))

function myFunc(theArr) {
  theArr[0] = 30;
}

const arr = [45];

console.log(arr[0]); // 45
myFunc(arr);
console.log(arr[0]); // 30

Điều này có thể được thực hiện bởi vì:

1. function myFunc(theArr) {
     theArr[0] = 30;
   }
   
   const arr = [45];
   
   console.log(arr[0]); // 45
   myFunc(arr);
   console.log(arr[0]); // 30
   

   9 tạo thành một đóng cửa bao gồm

   function myFunc(theArr) {
     theArr[0] = 30;
   }
   
   const arr = [45];
   
   console.log(arr[0]); // 45
   myFunc(arr);
   console.log(arr[0]); // 30
   

   8 (nghĩa là,

   function myFunc(theArr) {
     theArr[0] = 30;
   }
   
   const arr = [45];
   
   console.log(arr[0]); // 45
   myFunc(arr);
   console.log(arr[0]); // 30
   

   9 có thể truy cập vào các đối số và biến của ____ 78).

2. const square = function (number) {
     return number * number;
   }
   const x = square(4); // x gets the value 16
   

   0 tạo thành một đóng cửa bao gồm

   function myFunc(theArr) {
     theArr[0] = 30;
   }
   
   const arr = [45];
   
   console.log(arr[0]); // 45
   myFunc(arr);
   console.log(arr[0]); // 30
   

   9.
3. Bởi vì việc đóng cửa của ____ 80 bao gồm đóng cửa

   function myFunc(theArr) {
     theArr[0] = 30;
   }
   
   const arr = [45];
   
   console.log(arr[0]); // 45
   myFunc(arr);
   console.log(arr[0]); // 30
   

   9 và ________ 79 bao gồm

   function myFunc(theArr) {
     theArr[0] = 30;
   }
   
   const arr = [45];
   
   console.log(arr[0]); // 45
   myFunc(arr);
   console.log(arr[0]); // 30
   

   8, nên việc đóng cửa của ____ 80 cũng bao gồm

   function myFunc(theArr) {
     theArr[0] = 30;
   }
   
   const arr = [45];
   
   console.log(arr[0]); // 45
   myFunc(arr);
   console.log(arr[0]); // 30
   

   8. Điều này có nghĩa là

   const square = function (number) {
     return number * number;
   }
   const x = square(4); // x gets the value 16
   

   0 có thể truy cập cả đối số và biến của

   function myFunc(theArr) {
     theArr[0] = 30;
   }
   
   const arr = [45];
   
   console.log(arr[0]); // 45
   myFunc(arr);
   console.log(arr[0]); // 30
   

   9 và ____ 78. Nói cách khác,

   const square = function (number) {
     return number * number;
   }
   const x = square(4); // x gets the value 16
   

   0 chuỗi phạm vi của

   function myFunc(theArr) {
     theArr[0] = 30;
   }
   
   const arr = [45];
   
   console.log(arr[0]); // 45
   myFunc(arr);
   console.log(arr[0]); // 30
   

   9 và

   function myFunc(theArr) {
     theArr[0] = 30;
   }
   
   const arr = [45];
   
   console.log(arr[0]); // 45
   myFunc(arr);
   console.log(arr[0]); // 30
   

   8, theo thứ tự đó.

Điều ngược lại, tuy nhiên, không đúng.

function myFunc(theArr) {
  theArr[0] = 30;
}

const arr = [45];

console.log(arr[0]); // 45
myFunc(arr);
console.log(arr[0]); // 30

const square = function (number) {
  return number * number;
}
const x = square(4); // x gets the value 16

function myFunc(theArr) {
  theArr[0] = 30;
}

const arr = [45];

console.log(arr[0]); // 45
myFunc(arr);
console.log(arr[0]); // 30

function myFunc(theArr) {
  theArr[0] = 30;
}

const arr = [45];

console.log(arr[0]); // 45
myFunc(arr);
console.log(arr[0]); // 30

const square = function (number) {
  return number * number;
}
const x = square(4); // x gets the value 16

const square = function (number) {
  return number * number;
}
const x = square(4); // x gets the value 16

function myFunc(theArr) {
  theArr[0] = 30;
}

const arr = [45];

console.log(arr[0]); // 45
myFunc(arr);
console.log(arr[0]); // 30

Tên xung đột

Khi hai đối số hoặc biến trong phạm vi đóng có cùng tên, có một cuộc xung đột tên. Nhiều phạm vi lồng nhau được ưu tiên. Vì vậy, phạm vi trong cùng là ưu tiên cao nhất, trong khi phạm vi ngoài cùng chiếm thấp nhất. Đây là chuỗi phạm vi. Đầu tiên trong chuỗi là phạm vi trong cùng, và cuối cùng là phạm vi ngoài cùng. Xem xét những điều sau:

click

Xung đột tên xảy ra tại câu lệnh

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function myFunc(theArr) {
  theArr[0] = 30;
}

const arr = [45];

console.log(arr[0]); // 45
myFunc(arr);
console.log(arr[0]); // 30

function myFunc(theArr) {
  theArr[0] = 30;
}

const arr = [45];

console.log(arr[0]); // 45
myFunc(arr);
console.log(arr[0]); // 30

function myFunc(theArr) {
  theArr[0] = 30;
}

const arr = [45];

console.log(arr[0]); // 45
myFunc(arr);
console.log(arr[0]); // 30

function myFunc(theArr) {
  theArr[0] = 30;
}

const arr = [45];

console.log(arr[0]); // 45
myFunc(arr);
console.log(arr[0]); // 30

function myFunc(theArr) {
  theArr[0] = 30;
}

const arr = [45];

console.log(arr[0]); // 45
myFunc(arr);
console.log(arr[0]); // 30

function myFunc(theArr) {
  theArr[0] = 30;
}

const arr = [45];

console.log(arr[0]); // 45
myFunc(arr);
console.log(arr[0]); // 30

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function myFunc(theArr) {
  theArr[0] = 30;
}

const arr = [45];

console.log(arr[0]); // 45
myFunc(arr);
console.log(arr[0]); // 30

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function myFunc(theArr) {
  theArr[0] = 30;
}

const arr = [45];

console.log(arr[0]); // 45
myFunc(arr);
console.log(arr[0]); // 30

Đóng cửa

Đóng cửa là một trong những tính năng mạnh mẽ nhất của JavaScript. JavaScript cho phép làm tổ của các hàm và cấp cho hàm bên trong truy cập đầy đủ cho tất cả các biến và hàm được xác định bên trong hàm bên ngoài (và tất cả các biến và hàm khác mà hàm bên ngoài có quyền truy cập).

Tuy nhiên, hàm bên ngoài không có quyền truy cập vào các biến và hàm được xác định bên trong hàm bên trong. Điều này cung cấp một loại đóng gói cho các biến của hàm bên trong.

Ngoài ra, vì hàm bên trong có quyền truy cập vào phạm vi của hàm bên ngoài, các biến và hàm được xác định ở hàm bên ngoài sẽ sống lâu hơn thời gian thực hiện hàm bên ngoài, nếu hàm bên trong quản lý để tồn tại ngoài vòng đời của bên ngoài hàm số. Một đóng cửa được tạo ra khi hàm bên trong được cung cấp cho bất kỳ phạm vi nào bên ngoài hàm bên ngoài.

click

Nó có thể phức tạp hơn nhiều so với mã trên. Một đối tượng chứa các phương thức để thao tác các biến bên trong của hàm bên ngoài có thể được trả về.

click

Trong mã trên, biến

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
setTimeout(foo, 1000);

Lưu ý: Có một số cạm bẫy cần chú ý khi sử dụng đóng cửa! There are a number of pitfalls to watch out for when using closures!

Nếu một hàm kèm theo định nghĩa một biến có cùng tên với một biến trong phạm vi bên ngoài, thì không có cách nào để tham khảo biến trong phạm vi bên ngoài một lần nữa. .

function foo() { console.log('foo'); }
setTimeout(foo, 1000);

Sử dụng đối tượng đối số

Các đối số của một hàm được duy trì trong một đối tượng giống như mảng. Trong một chức năng, bạn có thể giải quyết các đối số được truyền cho nó như sau:

trong đó

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function square(number) {
  return number * number;
}

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

Sử dụng đối tượng

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

Ví dụ, hãy xem xét một chức năng kết hợp một số chuỗi. Đối số chính thức duy nhất cho hàm là một chuỗi chỉ định các ký tự tách các mục thành Concatenate. Hàm được định nghĩa như sau:

function foo() { console.log('foo'); }
setTimeout(foo, 1000);

Bạn có thể chuyển bất kỳ số lượng đối số nào cho hàm này và nó kết hợp từng đối số thành một chuỗi "danh sách":

function foo() { console.log('foo'); }
setTimeout(foo, 1000);

Lưu ý: Biến

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

Xem đối tượng

function square(number) {
  return number * number;
}

Tham số chức năng

Có hai loại cú pháp tham số đặc biệt: tham số mặc định và tham số REST.

Tham số mặc định

Trong JavaScript, các tham số của các hàm mặc định là

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

Trước đây, chiến lược chung để thiết lập mặc định là kiểm tra các giá trị tham số trong phần thân của hàm và gán một giá trị nếu chúng là

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

Trong ví dụ sau, nếu không có giá trị nào được cung cấp cho

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
setTimeout(foo, 1000);

Với các tham số mặc định, kiểm tra thủ công trong thân chức năng không còn cần thiết nữa. Bạn có thể đặt

function myFunc(theObject) {
  theObject.make = 'Toyota';
}

const mycar = {
  make: 'Honda',
  model: 'Accord',
  year: 1998,
};

// x gets the value "Honda"
const x = mycar.make;

// the make property is changed by the function
myFunc(mycar);
// y gets the value "Toyota"
const y = mycar.make;

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
setTimeout(foo, 1000);

Để biết thêm chi tiết, hãy xem các tham số mặc định trong tham chiếu.

Tham số nghỉ

Cú pháp tham số REST cho phép chúng tôi biểu diễn một số lượng đối số không xác định dưới dạng một mảng.

Trong ví dụ sau, hàm

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
setTimeout(foo, 1000);

Hàm mũi tên

Một biểu thức hàm mũi tên (còn được gọi là mũi tên chất béo để phân biệt với cú pháp giả thuyết

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

Hai yếu tố ảnh hưởng đến việc giới thiệu các hàm mũi tên: các chức năng ngắn hơn và không ràng buộc của

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

Chức năng ngắn hơn

Trong một số mẫu chức năng, các chức năng ngắn hơn được chào đón. So sánh:

function foo() { console.log('foo'); }
setTimeout(foo, 1000);

Không tách biệt điều này

Cho đến khi các chức năng mũi tên, mọi hàm mới đã xác định giá trị

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
setTimeout(foo, 1000);

Trong Ecmascript 3/5, vấn đề này đã được khắc phục bằng cách gán giá trị trong

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
setTimeout(foo, 1000);

Ngoài ra, một hàm ràng buộc có thể được tạo ra để giá trị

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

Một hàm mũi tên không có

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

'5';

true;

() => 'foo';

console.log('syntax is fine');

Các chức năng được xác định trước

JavaScript có một số chức năng tích hợp, cấp cao nhất:

function square(number) {
  return number * number;
}

Phương thức

function square(number) {
  return number * number;
}

function square(number) {
  return number * number;
}

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

Hàm

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

Hàm

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

Hàm

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

Hàm

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

Hàm

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

Phương pháp

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

Phương pháp

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

Phương thức

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

Phương pháp

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

click

Phương pháp

click

click

click

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

click

click

click

click

function foo() { console.log('foo'); }
button.addEventListener('click', foo);

click

• " Trước
• Tiếp theo "