Lỗi đầu tiên bạn đã gây ra là
function randHash [callback] {
var hash = /* do hash calculation */
callback[hash];
}
function compileHash [hash] {
/* do something using the hash variable passed to this function */
}
randHash[compileHash]; // pass the compileHash function as the callback
9 chưa trả lại bất cứ điều gì. Không có tuyên bố 0 có trong hàm, vì vậyjavascript
// function declaration
function isEven[num] {
return num % 2 === 0;
}
isEven[24]; // => true
isEven[11]; // => false
1 sẽ luôn dẫn đếnjavascript
// function declaration
function isEven[num] {
return num % 2 === 0;
}
isEven[24]; // => true
isEven[11]; // => false
2 không được xác định.javascript
// function declaration
function isEven[num] {
return num % 2 === 0;
}
isEven[24]; // => true
isEven[11]; // => false
Chức năng là các biến hạng nhất
Các chức năng có thể được sử dụng giống như các biến có thể, và được truyền vòng như các đối số cho các chức năng. Đây là một tính năng mạnh mẽ của JavaScript và một cái gì đó mà bạn sẽ cần phải sử dụng các cuộc gọi lại. Hãy nghĩ về một chức năng như một hành động xác định và bạn chỉ cần thông qua hành động đó xung quanh.
Ngoài ra, các cuộc gọi lại nên được sử dụng để đối phó với việc hoàn thành một quá trình. Vì vậy, ý tưởng là, bạn biết những gì có nghĩa là xảy ra sau quá trình A, và những gì nó có nghĩa là để tạo, vì vậy bạn có thể đưa ra quy trình một cuộc gọi lại sẽ được gọi là một lần đã chấm dứt. Bây giờ kịch bản ở đây không phù hợp cho tình huống gọi lại. Nó sẽ dễ dàng hơn nhiều để bạn làm ...
function RandHash [] {
return Math.floor[[Math.random[]*10000]+1];
}
Và sau đó lấy băm của bạn bằng cách gọi chức năng này, như vậy ...
var hash = RandHash[];
Bạn cũng muốn nhận thức được phạm vi biến JavaScripts, vì bạn đang thiếu từ khóa VAR khi tham khảo
3 trong hàmjavascript
// function declaration
function isEven[num] {
return num % 2 === 0;
}
isEven[24]; // => true
isEven[11]; // => false
function randHash [callback] {
var hash = /* do hash calculation */
callback[hash];
}
function compileHash [hash] {
/* do something using the hash variable passed to this function */
}
randHash[compileHash]; // pass the compileHash function as the callback
9 có nghĩa là gán mặc định cho phạm vi toàn cầu. Có lẽ là những gì chịu trách nhiệm khiến bạn nhầm lẫn, vì nhiệm vụ của bạn là 3 trongjavascript
// function declaration
function isEven[num] {
return num % 2 === 0;
}
isEven[24]; // => true
isEven[11]; // => false
function randHash [callback] {
var hash = /* do hash calculation */
callback[hash];
}
function compileHash [hash] {
/* do something using the hash variable passed to this function */
}
randHash[compileHash]; // pass the compileHash function as the callback
9 sẽ là toàn cầu và do đó đây.Giả sử cuối cùng bạn sẽ yêu cầu xử lý không đồng bộ
function randHash [callback] {
var hash = /* do hash calculation */
callback[hash];
}
function compileHash [hash] {
/* do something using the hash variable passed to this function */
}
randHash[compileHash]; // pass the compileHash function as the callback
Bạn nên chuyển các biến của bạn dưới dạng đối số cho cuộc gọi lại. Điều đó sẽ giải quyết các vấn đề phạm vi của bạn hy vọng.
Ngoài ra, lưu ý nhỏ, các chức năng trong JavaScript thường nên là chữ thường nếu chúng không được sử dụng với câu lệnh
9 [nghĩa là lớp JavaScript].javascript
// function declaration
function isEven[num] {
return num % 2 === 0;
}
isEven[24]; // => true
isEven[11]; // => false
Hàm là một khối thông số của mã được xác định một lần và được gọi nhiều lần sau đó. Trong JavaScript, một hàm được sáng tác và bị ảnh hưởng bởi nhiều thành phần:function is a parametric block of code defined once and called multiple times later. In JavaScript a function is composed and influenced by many components:
- Mã JavaScript tạo thành cơ thể chức năng
- Danh sách các tham số
- Các biến có thể truy cập từ phạm vi từ vựng
- Giá trị trả về
- Bối cảnh
0 khi hàm được gọijavascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
- Được đặt tên hoặc một hàm ẩn danh
- Biến giữ đối tượng hàm
- Đối tượng
1 [hoặc thiếu trong hàm mũi tên]javascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
Bài đăng này dạy cho bạn sáu cách tiếp cận để tuyên bố các chức năng JavaScript: cú pháp, ví dụ và cạm bẫy phổ biến. Hơn nữa, bạn sẽ hiểu khi nào nên sử dụng một loại chức năng cụ thể trong một số trường hợp nhất định.
Mục lục
- 1. Tuyên bố chức năng
- 1.1 Một chức năng thông thường
- 1.2 Sự khác biệt so với biểu thức chức năng
- 1.3 Tuyên bố chức năng trong điều kiện
- 2. Biểu thức chức năng
- 2.1 Biểu thức chức năng được đặt tên
- 2.2 Lợi thích biểu thức chức năng được đặt tên
- 3. Định nghĩa phương pháp tốc ký
- 3.1 Tên và phương thức tính toán được tính toán
- 4. Hàm mũi tên
- 4.1 Tính minh bạch bối cảnh
- 4.2 gọi lại ngắn
- 5. Hàm máy phát
- 6. Một điều nữa: Chức năng mới
- 7. Cuối cùng, cách nào tốt hơn?
1. Tuyên bố chức năng
1.1 Một chức năng thông thường is made of
2 keyword, followed by an obligatory function name, a list of parameters in a pair of parenthesisjavascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
3 and a pair of curly bracesjavascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
4 that delimits the body code.javascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
1.2 Sự khác biệt so với biểu thức chức năng
javascript
// function declaration
function isEven[num] {
return num % 2 === 0;
}
isEven[24]; // => true
isEven[11]; // => false
1.3 Tuyên bố chức năng trong điều kiện
2. Biểu thức chức năngcreates a variable in the current scope with the identifier equal to the function name. This variable holds the function object.
2.1 Biểu thức chức năng được đặt tênhoisted up to the top of the current scope, which means that the function can be invoked before the declaration [see this chapter for more details].
2.2 Lợi thích biểu thức chức năng được đặt tênnamed, which means that the
7 property of the function object holds its name. It is useful when viewing the call stack: in debugging or error messages reading.javascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
Hãy xem các thuộc tính này trong một ví dụ:
javascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
Tuyên bố chức năng
8 tạo ra một biếnjavascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
9 được nâng lên trên cùng của phạm vi hiện tại.javascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
9 Biến giữ đối tượng chức năng vàjavascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
1 chứa tên hàm:javascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
2.javascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
1.1 Một chức năng thông thường
Tuyên bố chức năng khớp với các trường hợp khi cần một hàm thông thường. Thường xuyên có nghĩa là bạn tuyên bố chức năng một lần và sau đó gọi nó ở nhiều nơi khác nhau. Đây là kịch bản cơ bản:
javascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
Bởi vì khai báo chức năng tạo ra một biến trong phạm vi hiện tại, bên cạnh các cuộc gọi chức năng chính quy, nó rất hữu ích cho các trình nghe sự kiện đệ quy hoặc tách ra. Trái ngược với các biểu thức chức năng hoặc các hàm mũi tên, không tạo ra một ràng buộc với biến hàm theo tên của nó.
Ví dụ, để tính toán đệ quy, bạn phải truy cập chức năng bên trong:
javascript
function factorial[n] {
if [n === 0] {
return 1;
}
return n * factorial[n - 1];
}
factorial[4]; // => 24
Bên trong
3 Một cuộc gọi đệ quy đang được thực hiện bằng cách sử dụng biến chứa hàm:javascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
4.javascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
Có thể sử dụng một biểu thức chức năng và gán nó cho một biến thông thường, ví dụ:
5. Nhưng khai báo chức năngjavascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
6 là nhỏ gọn [không cầnjavascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
7 vàjavascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
8].javascript
function sum[a, b] {
return a + b;
}
sum[5, 6]; // => 11
[[3, 7]].reduce[sum] // => 10
Một thuộc tính quan trọng của tuyên bố chức năng là cơ chế nâng cao của nó. Nó cho phép sử dụng chức năng trước khi khai báo trong cùng một phạm vi.
Tăng cường là hữu ích trong một số tình huống. Ví dụ: khi bạn muốn xem chức năng được gọi như thế nào khi bắt đầu tập lệnh, mà không cần đọc quá trình thực hiện chức năng. Việc triển khai chức năng có thể được đặt bên dưới trong tệp, vì vậy bạn thậm chí có thể không cuộn ở đó.
Bạn có thể đọc thêm chi tiết về Tuyên bố chức năng nâng cao ở đây.
1.2 Sự khác biệt so với biểu thức chức năng
Thật dễ dàng để nhầm lẫn các khai báo chức năng và biểu thức chức năng. Chúng trông rất giống nhau nhưng tạo ra các chức năng với các thuộc tính khác nhau.
Một quy tắc dễ nhớ: Tuyên bố chức năng trong một câu lệnh luôn bắt đầu với từ khóa
2. Nếu không, đó là một biểu thức chức năng [xem 2.].starts with the keywordjavascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
2. Otherwise it's a function expression [see 2.].javascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
Mẫu sau đây là một khai báo chức năng trong đó câu lệnh bắt đầu bằng từ khóa
2:starts withjavascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
2 keyword:javascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
javascript
// Function declaration: starts with "function"
function isNil[value] {
return value == null;
}
Trong trường hợp biểu thức chức năng, câu lệnh JavaScript không bắt đầu với từ khóa
2 [nó có mặt ở đâu đó ở giữa mã câu lệnh]:does not start withjavascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
2 keyword [it is present somewhere in the middle of the statement code]:javascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
javascript
// Function expression: starts with "const"
const isTruthy = function[value] {
return !!value;
};
// Function expression: an argument for .filter[]
const numbers = [[1, false, 5]].filter[function[item] {
return typeof item === 'number';
}];
// Function expression [IIFE]: starts with "["
[function messageFunction[message] {
return message + ' World!';
}]['Hello'];
1.3 Tuyên bố chức năng trong điều kiện
Một số môi trường JavaScript có thể ném lỗi tham chiếu khi gọi hàm có khai báo xuất hiện trong các khối
4 của các câu lệnhjavascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
3,javascript
function factorial[n] {
if [n === 0] {
return 1;
}
return n * factorial[n - 1];
}
factorial[4]; // => 24
4 hoặcjavascript
function factorial[n] {
if [n === 0] {
return 1;
}
return n * factorial[n - 1];
}
factorial[4]; // => 24
5. Chúng ta hãy kích hoạt chế độ nghiêm ngặt và xem điều gì xảy ra khi một hàm được khai báo trong một điều kiện:javascript
function factorial[n] {
if [n === 0] {
return 1;
}
return n * factorial[n - 1];
}
factorial[4]; // => 24
Let's enable the strict mode and see what happens when a function is declared in a conditional:
javascript
[function[] {
'use strict';
if [true] {
function ok[] {
return 'true ok';
}
} else {
function ok[] {
return 'false ok';
}
}
console.log[typeof ok === 'undefined']; // => true
console.log[ok[]]; // Throws "ReferenceError: ok is not defined"
}][];
Khi gọi
6, JavaScript némjavascript
function factorial[n] {
if [n === 0] {
return 1;
}
return n * factorial[n - 1];
}
factorial[4]; // => 24
7, vì khai báo hàm nằm trong một khối có điều kiện.javascript
function factorial[n] {
if [n === 0] {
return 1;
}
return n * factorial[n - 1];
}
factorial[4]; // => 24
Tuyên bố chức năng trong các điều kiện được cho phép ở chế độ không nghiêm ngặt, điều này khiến nó còn khó hiểu hơn.
Theo nguyên tắc chung cho các tình huống này, khi một hàm nên được tạo bởi các điều kiện - sử dụng biểu thức chức năng. Hãy xem làm thế nào nó có thể:
var hash = RandHash[];
0Bởi vì hàm là một đối tượng thông thường, gán nó cho một biến tùy thuộc vào điều kiện. Gọi
6 hoạt động tốt, không có lỗi.javascript
function factorial[n] {
if [n === 0] {
return 1;
}
return n * factorial[n - 1];
}
factorial[4]; // => 24
2. Biểu thức chức năng
Một biểu thức chức năng được xác định bằng từ khóa
2, theo sau là tên hàm tùy chọn, danh sách các tham số trong một cặp dấu ngoặc đơnjavascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
3 và một cặp niềng răng xoănjavascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
1 phân định mã cơ thể. is determined by ajavascript
// Function declaration: starts with "function"
function isNil[value] {
return value == null;
}
2 keyword, followed by an optional function name, a list of parameters in a pair of parenthesisjavascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
3 and a pair of curly bracesjavascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
1 that delimits the body code.javascript
// Function declaration: starts with "function"
function isNil[value] {
return value == null;
}
Một số mẫu của biểu thức chức năng:
var hash = RandHash[];
1Biểu thức chức năng tạo ra một đối tượng hàm có thể được sử dụng trong các tình huống khác nhau:
- Được gán cho một biến dưới dạng đối tượng
2javascript
// Function declaration: starts with "function"
function isNil[value] {
return value == null;
}
- Tạo phương thức trên một đối tượng
3javascript
// Function declaration: starts with "function"
function isNil[value] {
return value == null;
}
- Sử dụng chức năng như một cuộc gọi lại
4javascript
// Function declaration: starts with "function"
function isNil[value] {
return value == null;
}
Biểu thức chức năng là con ngựa làm việc trong JavaScript. Thông thường, bạn đối phó với loại khai báo chức năng này, cùng với hàm mũi tên [nếu bạn thích cú pháp ngắn và bối cảnh từ vựng].
2.1 Biểu thức chức năng được đặt tên
Một hàm ẩn danh khi nó không có tên [thuộc tính
7 là một chuỗi trốngjavascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
6]:javascript
// Function declaration: starts with "function"
function isNil[value] {
return value == null;
}
var hash = RandHash[];
2Đây là một hàm ẩn danh, tên là một chuỗi trống.
Đôi khi tên chức năng có thể được suy ra. Ví dụ: khi ẩn danh được gán cho một biến:
var hash = RandHash[];
3Tên hàm ẩn danh là
7, vì tên biếnjavascript
// Function declaration: starts with "function"
function isNil[value] {
return value == null;
}
8 được sử dụng để suy ra tên hàm.javascript
// Function declaration: starts with "function"
function isNil[value] {
return value == null;
}
Khi biểu thức có tên được chỉ định, đây là một biểu thức chức năng được đặt tên. Nó có một số thuộc tính bổ sung so với biểu thức chức năng đơn giản:named function expression. It has some additional properties compared to simple function expression:
- Một hàm được đặt tên được tạo, tức là thuộc tính
7 giữ tên chức năngjavascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
- Bên trong thân hàm, một biến có cùng tên giữ đối tượng hàm
Hãy sử dụng ví dụ trên, nhưng đặt tên trong biểu thức chức năng:
var hash = RandHash[];
40 là một biểu thức chức năng được đặt tên. Biếnjavascript
// Function expression: starts with "const"
const isTruthy = function[value] {
return !!value;
};
// Function expression: an argument for .filter[]
const numbers = [[1, false, 5]].filter[function[item] {
return typeof item === 'number';
}];
// Function expression [IIFE]: starts with "["
[function messageFunction[message] {
return message + ' World!';
}]['Hello'];
1 có thể truy cập trong phạm vi chức năng, nhưng không phải bên ngoài. Dù bằng cách nào, thuộc tínhjavascript
// Function expression: starts with "const"
const isTruthy = function[value] {
return !!value;
};
// Function expression: an argument for .filter[]
const numbers = [[1, false, 5]].filter[function[item] {
return typeof item === 'number';
}];
// Function expression [IIFE]: starts with "["
[function messageFunction[message] {
return message + ' World!';
}]['Hello'];
7 của đối tượng hàm giữ tên:javascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
1.javascript
// Function expression: starts with "const"
const isTruthy = function[value] {
return !!value;
};
// Function expression: an argument for .filter[]
const numbers = [[1, false, 5]].filter[function[item] {
return typeof item === 'number';
}];
// Function expression [IIFE]: starts with "["
[function messageFunction[message] {
return message + ' World!';
}]['Hello'];
2.2 Lợi thích biểu thức chức năng được đặt tên
Khi một biểu thức hàm
4 được gán cho một biến, một số công cụ suy ra tên hàm từ biến này. Tuy nhiên, các cuộc gọi lại có thể được truyền dưới dạng các biểu thức hàm ẩn danh, mà không lưu trữ thành các biến: vì vậy động cơ không thể xác định tên của nó.javascript
// Function expression: starts with "const"
const isTruthy = function[value] {
return !!value;
};
// Function expression: an argument for .filter[]
const numbers = [[1, false, 5]].filter[function[item] {
return typeof item === 'number';
}];
// Function expression [IIFE]: starts with "["
[function messageFunction[message] {
return message + ' World!';
}]['Hello'];
Thật hợp lý khi ủng hộ các chức năng được đặt tên và tránh các chức năng ẩn danh để đạt được lợi ích như:
- Các thông báo lỗi và ngăn xếp cuộc gọi hiển thị thông tin chi tiết hơn khi sử dụng tên hàm
- Debug thoải mái hơn bằng cách giảm số lượng tên ngăn xếp ẩn danh
- Tên chức năng cho biết những gì chức năng làm
- Bạn có thể truy cập chức năng bên trong phạm vi của nó cho các cuộc gọi đệ quy hoặc tách người nghe sự kiện
3. Định nghĩa phương pháp tốc ký
Định nghĩa phương pháp tốc ký có thể được sử dụng trong một tuyên bố phương thức trên các lớp học chữ cái và các lớp ES2015. Bạn có thể xác định chúng bằng tên hàm, theo sau là danh sách các tham số trong một cặp dấu ngoặc đơn
3 và một cặp niềng răng xoănjavascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
1 phân định các câu lệnh cơ thể. can be used in a method declaration on object literals and ES2015 classes. You can define them using a function name, followed by a list of parameters in a pair of parenthesisjavascript
// Function declaration: starts with "function"
function isNil[value] {
return value == null;
}
3 and a pair of curly bracesjavascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
1 that delimits the body statements.javascript
// Function declaration: starts with "function"
function isNil[value] {
return value == null;
}
Ví dụ sau sử dụng định nghĩa phương thức tốc ký trong một đối tượng theo nghĩa đen:
var hash = RandHash[];
5Các phương thức
7 vàjavascript
// Function expression: starts with "const"
const isTruthy = function[value] {
return !!value;
};
// Function expression: an argument for .filter[]
const numbers = [[1, false, 5]].filter[function[item] {
return typeof item === 'number';
}];
// Function expression [IIFE]: starts with "["
[function messageFunction[message] {
return message + ' World!';
}]['Hello'];
8 trong đối tượngjavascript
// Function expression: starts with "const"
const isTruthy = function[value] {
return !!value;
};
// Function expression: an argument for .filter[]
const numbers = [[1, false, 5]].filter[function[item] {
return typeof item === 'number';
}];
// Function expression [IIFE]: starts with "["
[function messageFunction[message] {
return message + ' World!';
}]['Hello'];
9 được xác định bằng định nghĩa phương thức ngắn. Các phương pháp này được gọi như thường lệ:javascript
// Function expression: starts with "const"
const isTruthy = function[value] {
return !!value;
};
// Function expression: an argument for .filter[]
const numbers = [[1, false, 5]].filter[function[item] {
return typeof item === 'number';
}];
// Function expression [IIFE]: starts with "["
[function messageFunction[message] {
return message + ' World!';
}]['Hello'];
0 vàjavascript
[function[] {
'use strict';
if [true] {
function ok[] {
return 'true ok';
}
} else {
function ok[] {
return 'false ok';
}
}
console.log[typeof ok === 'undefined']; // => true
console.log[ok[]]; // Throws "ReferenceError: ok is not defined"
}][];
1.javascript
[function[] {
'use strict';
if [true] {
function ok[] {
return 'true ok';
}
} else {
function ok[] {
return 'false ok';
}
}
console.log[typeof ok === 'undefined']; // => true
console.log[ok[]]; // Throws "ReferenceError: ok is not defined"
}][];
Cách tiếp cận ngắn của định nghĩa phương pháp có một số lợi ích so với định nghĩa tài sản truyền thống với tên, đại tràng
2 và biểu thức chức năngjavascript
[function[] {
'use strict';
if [true] {
function ok[] {
return 'true ok';
}
} else {
function ok[] {
return 'false ok';
}
}
console.log[typeof ok === 'undefined']; // => true
console.log[ok[]]; // Throws "ReferenceError: ok is not defined"
}][];
3:javascript
[function[] {
'use strict';
if [true] {
function ok[] {
return 'true ok';
}
} else {
function ok[] {
return 'false ok';
}
}
console.log[typeof ok === 'undefined']; // => true
console.log[ok[]]; // Throws "ReferenceError: ok is not defined"
}][];
- Cú pháp ngắn hơn dễ hiểu hơn
- Định nghĩa phương thức tốc ký tạo ra một hàm được đặt tên, trái với biểu thức hàm. Nó rất hữu ích cho việc gỡ lỗi.
Cú pháp
4 yêu cầu khai báo phương thức ở dạng ngắn:javascript
[function[] {
'use strict';
if [true] {
function ok[] {
return 'true ok';
}
} else {
function ok[] {
return 'false ok';
}
}
console.log[typeof ok === 'undefined']; // => true
console.log[ok[]]; // Throws "ReferenceError: ok is not defined"
}][];
var hash = RandHash[];
63.1 Tên và phương thức tính toán được tính toán
Ecmascript 2015 thêm một tính năng hay: Tên thuộc tính được tính toán trong các loại và các lớp đối tượng. Các thuộc tính được tính toán sử dụng một cú pháp nhỏ khác
5, do đó, định nghĩa phương thức trông theo cách này:javascript
[function[] {
'use strict';
if [true] {
function ok[] {
return 'true ok';
}
} else {
function ok[] {
return 'false ok';
}
}
console.log[typeof ok === 'undefined']; // => true
console.log[ok[]]; // Throws "ReferenceError: ok is not defined"
}][];
The computed properties use a slight different syntax
5, so the method definition looks this way:javascript
[function[] {
'use strict';
if [true] {
function ok[] {
return 'true ok';
}
} else {
function ok[] {
return 'false ok';
}
}
console.log[typeof ok === 'undefined']; // => true
console.log[ok[]]; // Throws "ReferenceError: ok is not defined"
}][];
var hash = RandHash[];
76 vàjavascript
[function[] {
'use strict';
if [true] {
function ok[] {
return 'true ok';
}
} else {
function ok[] {
return 'false ok';
}
}
console.log[typeof ok === 'undefined']; // => true
console.log[ok[]]; // Throws "ReferenceError: ok is not defined"
}][];
7 là các khai báo phương thức tốc ký với tên thuộc tính được tính toán.javascript
[function[] {
'use strict';
if [true] {
function ok[] {
return 'true ok';
}
} else {
function ok[] {
return 'false ok';
}
}
console.log[typeof ok === 'undefined']; // => true
console.log[ok[]]; // Throws "ReferenceError: ok is not defined"
}][];
4. Hàm mũi tên
Một hàm mũi tên được xác định bằng cách sử dụng một cặp dấu ngoặc đơn chứa danh sách các tham số
8, theo sau là một mũi tên béojavascript
[function[] {
'use strict';
if [true] {
function ok[] {
return 'true ok';
}
} else {
function ok[] {
return 'false ok';
}
}
console.log[typeof ok === 'undefined']; // => true
console.log[ok[]]; // Throws "ReferenceError: ok is not defined"
}][];
9 và một cặp niềng răng xoănjavascript
[function[] {
'use strict';
if [true] {
function ok[] {
return 'true ok';
}
} else {
function ok[] {
return 'false ok';
}
}
console.log[typeof ok === 'undefined']; // => true
console.log[ok[]]; // Throws "ReferenceError: ok is not defined"
}][];
4 phân định các câu lệnh cơ thể. is defined using a pair of parenthesis that contains the list of parametersjavascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
8, followed by a fat arrowjavascript
[function[] {
'use strict';
if [true] {
function ok[] {
return 'true ok';
}
} else {
function ok[] {
return 'false ok';
}
}
console.log[typeof ok === 'undefined']; // => true
console.log[ok[]]; // Throws "ReferenceError: ok is not defined"
}][];
9 and a pair of curly bracesjavascript
[function[] {
'use strict';
if [true] {
function ok[] {
return 'true ok';
}
} else {
function ok[] {
return 'false ok';
}
}
console.log[typeof ok === 'undefined']; // => true
console.log[ok[]]; // Throws "ReferenceError: ok is not defined"
}][];
4 that delimits the body statements.javascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
Khi hàm mũi tên chỉ có một tham số, cặp dấu ngoặc đơn có thể được bỏ qua. Khi nó chứa một câu lệnh duy nhất, niềng răng xoăn cũng có thể được bỏ qua.
Hãy xem hàm mũi tên sử dụng cơ bản:
var hash = RandHash[];
8var hash = RandHash[];
01 là một hàm mũi tên tính toán giá trị tuyệt đối của một số.Hàm được khai báo bằng cách sử dụng mũi tên chất béo có các thuộc tính sau:
- Hàm mũi tên không tạo ra bối cảnh thực thi của nó, nhưng có thể sử dụng nó [trái với biểu thức chức năng hoặc khai báo chức năng, tạo ra
0 của riêng mình tùy thuộc vào việc gọi]javascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
- Hàm mũi tên là ẩn danh. Tuy nhiên, động cơ có thể suy ra tên của nó từ biến giữ hàm.
- Đối tượng
1 không có sẵn trong hàm mũi tên [trái với các loại khai báo khác cung cấp đối tượngjavascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
1]. Bạn có thể tự do sử dụng các tham số RESTjavascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
05, mặc dù.var hash = RandHash[];
4.1 Tính minh bạch bối cảnh
0 Từ khóa là một khía cạnh khó hiểu của JavaScript [kiểm tra bài viết này để biết giải thích chi tiết vềjavascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
0]. Bởi vì các chức năng tạo ra bối cảnh thực thi riêng, thường rất khó để phát hiện giá trịjavascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
0.javascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
Because functions create own execution context, often it is difficult to detect
0 value.javascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
ECMAScript 2015 cải thiện việc sử dụng
0 bằng cách giới thiệu hàm mũi tên, lấy ngữ cảnh từ vựng [hoặc đơn giản là sử dụngjavascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
0 từ phạm vi bên ngoài ngay lập tức]. Điều này thật tuyệt vì bạn không phải sử dụngjavascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
var hash = RandHash[];
11 hoặc lưu trữ bối cảnh var hash = RandHash[];
12 khi một hàm cần bối cảnh kèm theo.Hãy xem cách
0 được kế thừa từ chức năng bên ngoài:javascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
var hash = RandHash[];
9Lớp
var hash = RandHash[];
14 giữ một mảng các số và cung cấp một phương thức var hash = RandHash[];
15 để chèn các số mới. Khi var hash = RandHash[];
15 được gọi mà không có đối số, việc đóng được trả về cho phép chèn các số. Việc đóng cửa này là một hàm mũi tên có 0 là ví dụjavascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
var hash = RandHash[];
18 vì bối cảnh được lấy từ vựng từ phương thức var hash = RandHash[];
19.When
var hash = RandHash[];
15 is called without arguments, a closure is returned that allows inserting numbers. This closure is an arrow function that has 0 asjavascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
var hash = RandHash[];
18 instance because the context is taken lexically from var hash = RandHash[];
19 method.Không có chức năng mũi tên, bạn phải sửa chữa bối cảnh theo cách thủ công. Nó có nghĩa là sử dụng các cách giải quyết như phương pháp
var hash = RandHash[];
20:function randHash [callback] {
var hash = /* do hash calculation */
callback[hash];
}
function compileHash [hash] {
/* do something using the hash variable passed to this function */
}
randHash[compileHash]; // pass the compileHash function as the callback
0hoặc lưu trữ bối cảnh vào một biến riêng biệt
var hash = RandHash[];
12:function randHash [callback] {
var hash = /* do hash calculation */
callback[hash];
}
function compileHash [hash] {
/* do something using the hash variable passed to this function */
}
randHash[compileHash]; // pass the compileHash function as the callback
1Tính minh bạch bối cảnh có thể được sử dụng khi bạn muốn giữ
0 như là, được lấy từ bối cảnh kèm theo.javascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
4.2 gọi lại ngắn
Khi tạo hàm mũi tên, các cặp dấu ngoặc đơn và niềng răng xoăn là tùy chọn cho một tham số và câu lệnh cơ thể đơn. Điều này giúp tạo ra các chức năng gọi lại rất ngắn.
Hãy tạo một chức năng tìm thấy nếu một mảng chứa
var hash = RandHash[];
23:function randHash [callback] {
var hash = /* do hash calculation */
callback[hash];
}
function compileHash [hash] {
/* do something using the hash variable passed to this function */
}
randHash[compileHash]; // pass the compileHash function as the callback
2var hash = RandHash[];
24 là một hàm mũi tên trông đơn giản.Lưu ý rằng các hàm mũi tên ngắn lồng nhau rất khó đọc. Cách thuận tiện để sử dụng biểu mẫu hàm mũi tên ngắn nhất là một cuộc gọi lại duy nhất [không làm tổ].
Nếu cần thiết, hãy sử dụng cú pháp mở rộng của các hàm mũi tên khi viết các hàm mũi tên lồng nhau. Nó chỉ dễ đọc hơn.
5. Hàm máy phát
Hàm trình tạo trong JavaScript trả về một đối tượng Trình tạo. Cú pháp của nó tương tự như biểu thức chức năng, khai báo chức năng hoặc khai báo phương thức, chỉ là nó yêu cầu ký tự sao
var hash = RandHash[];
25.Hàm trình tạo có thể được khai báo trong các biểu mẫu sau:
một. Mẫu khai báo chức năng
var hash = RandHash[];
26:function randHash [callback] {
var hash = /* do hash calculation */
callback[hash];
}
function compileHash [hash] {
/* do something using the hash variable passed to this function */
}
randHash[compileHash]; // pass the compileHash function as the callback
3b. Mẫu biểu thức chức năng
var hash = RandHash[];
27:function randHash [callback] {
var hash = /* do hash calculation */
callback[hash];
}
function compileHash [hash] {
/* do something using the hash variable passed to this function */
}
randHash[compileHash]; // pass the compileHash function as the callback
4c. Phương pháp tốc ký Định nghĩa Mẫu
var hash = RandHash[];
28:function randHash [callback] {
var hash = /* do hash calculation */
callback[hash];
}
function compileHash [hash] {
/* do something using the hash variable passed to this function */
}
randHash[compileHash]; // pass the compileHash function as the callback
5Trong tất cả 3 trường hợp, hàm máy phát trả về đối tượng máy phát
var hash = RandHash[];
29. Sau đó var hash = RandHash[];
29 được sử dụng để tạo ra một loạt các số được tăng lên.6. Một điều nữa: Chức năng mới
Trong các hàm JavaScript là các đối tượng hạng nhất - một hàm là đối tượng thường xuyên của loại
2. Các cách của khai báo được mô tả ở trên tạo ra cùng loại đối tượng hàm. Hãy xem một ví dụ:javascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
The ways of the declaration described above create the same function object type. Let's see an example:
function randHash [callback] {
var hash = /* do hash calculation */
callback[hash];
}
function compileHash [hash] {
/* do something using the hash variable passed to this function */
}
randHash[compileHash]; // pass the compileHash function as the callback
6Loại đối tượng hàm có hàm tạo:
var hash = RandHash[];
32. Khi var hash = RandHash[];
32 được gọi là hàm tạo var hash = RandHash[];
34, một hàm mới được tạo. Các đối số var hash = RandHash[];
35 được truyền cho hàm tạo trở thành tên tham số cho hàm mới và đối số cuối cùng var hash = RandHash[];
36 được sử dụng làm mã cơ thể chức năng.When
var hash = RandHash[];
32 is invoked as a constructor var hash = RandHash[];
34, a new function is created. The arguments var hash = RandHash[];
35 passed to constructor become the parameter names for the new function and the last argument var hash = RandHash[];
36 is used as the function body code.Hãy tạo một hàm tổng hợp hai số:
function randHash [callback] {
var hash = /* do hash calculation */
callback[hash];
}
function compileHash [hash] {
/* do something using the hash variable passed to this function */
}
randHash[compileHash]; // pass the compileHash function as the callback
7var hash = RandHash[];
37 Được tạo bằng cách gọi hàm tạo var hash = RandHash[];
32 có các tham số var hash = RandHash[];
39 và var hash = RandHash[];
40 và cơ thể var hash = RandHash[];
41.Các chức năng được tạo ra theo cách này không có quyền truy cập vào phạm vi hiện tại, do đó, việc đóng cửa không thể được tạo. Chúng luôn được tạo ra trong phạm vi toàn cầu.
Một ứng dụng có thể của
var hash = RandHash[];
42 là một cách tốt hơn để truy cập đối tượng toàn cầu trong trình duyệt hoặc tập lệnh NodeJS:function randHash [callback] {
var hash = /* do hash calculation */
callback[hash];
}
function compileHash [hash] {
/* do something using the hash variable passed to this function */
}
randHash[compileHash]; // pass the compileHash function as the callback
8Hãy nhớ rằng các chức năng hầu như không bao giờ nên được khai báo bằng cách sử dụng
var hash = RandHash[];
43. Vì cơ thể chức năng được đánh giá trong thời gian chạy, phương pháp này kế thừa nhiều vấn đề sử dụng var hash = RandHash[];
44: Rủi ro bảo mật, gỡ lỗi khó hơn, không có cách nào để áp dụng tối ưu hóa động cơ, không có trình soạn thảo tự động hoàn thành.almost never should be declared using
var hash = RandHash[];
43. Because the function body is evaluated on runtime, this approach inherits many var hash = RandHash[];
44 usage problems: security risks, harder debugging, no way to apply engine optimizations, no editor auto-complete.7. Cuối cùng, cách nào tốt hơn?
Không có người chiến thắng hoặc kẻ thua cuộc. Quyết định mà loại tuyên bố chọn phụ thuộc vào tình huống.
Tuy nhiên, có một số quy tắc mà bạn có thể tuân theo trong các tình huống phổ biến.
Nếu hàm sử dụng
0 từ hàm bao quanh, hàm mũi tên là một giải pháp tốt. Khi hàm gọi lại có một câu lệnh ngắn, hàm mũi tên cũng là một tùy chọn tốt, bởi vì nó tạo mã ngắn và ánh sáng.javascript
// Hoisted variable
console.log[hello['Aliens']]; // => 'Hello Aliens!'
// Named function
console.log[hello.name] // => 'hello'
// Variable holds the function object
console.log[typeof hello]; // => 'function'
function hello[name] {
return `Hello ${name}!`;
}
Đối với cú pháp ngắn hơn khi khai báo các phương thức trên các chữ cái đối tượng, khai báo phương pháp tốc ký là thích hợp hơn.
var hash = RandHash[];
42 Cách khai báo các chức năng thông thường không nên được sử dụng. Chủ yếu là do nó mở ra các rủi ro bảo mật tiềm năng, không cho phép mã tự động hoàn thành trong các biên tập viên và mất tối ưu hóa động cơ.Bạn thích các hàm mũi tên hoặc biểu thức chức năng? Hãy cho tôi biết tại sao trong một bình luận dưới đây!