Có những trường hợp bạn sẽ cần sử dụng tên động/duy nhất cho các hàm JavaScript
Xem xét tình huống sau
Điều khiển người dùng chứa RadControl [RadTreeView, RadComboBox, RadMenu, v.v. ] và một số điều khiển "tiêu chuẩn" khác - ListBox, TextBox, Label, v.v.
Ví dụ, hãy đặt RadTreeView và ListBox trong điều khiển người dùng
Giả sử bạn muốn cập nhật ListBox sau mỗi lần khách hàng kiểm tra. Thông thường bạn sử dụng mã như thế này
function afterClientCheck[sender, eventArgs]
{
var listBox1 = document.getElementById[""];
var node = eventArgs.get_node[];
if [node.get_checked[]==true]
{
var optn = document.createElement["OPTION"];
optn.text = node.get_text[];
optn.value = node.get_value[];
listBox1.options.add[optn];
}
}
Bây giờ nếu bạn đặt điều khiển người dùng đó vào một trang và mở nó - nó sẽ hoạt động như mong đợi - việc kiểm tra Hộp kiểm của nút sẽ thêm văn bản của nút vào Hộp danh sách
Bây giờ thêm phiên bản thứ hai của điều khiển người dùng trên cùng một trang. Bạn sẽ nhận thấy rằng việc kiểm tra một nút của TreeView đầu tiên cập nhật ListBox thứ hai, không phải cái đầu tiên
Sự cố xảy ra do hàm JavaScript afterClientCheck đã tồn tại hai lần trên trang [do có hai trường hợp kiểm soát người dùng]. afterClientCheck đầu tiên cập nhật ListBox đầu tiên và afterClientCheck thứ hai cập nhật ListBox thứ hai. Nhưng vì tên của hàm giống nhau - nên hàm thứ hai được thực thi mỗi lần
Sử dụng tên động/duy nhất cho chức năng Javascript
Sau đây là các bước bạn cần làm
- Đổi tên hàm JavaScript như sau
function afterClientCheck_[sender, eventArgs] {}
- Đặt tên của trình xử lý sự kiện AfterClientCheck trong mã phía sau, không phải trong tệp aspx như.
C# protected void Page_Load[object sender, EventArgs e] { RadTreeView1.OnClientNodeChecked = "afterClientCheck_" + this.ClientID; }
Bây giờ hai chức năng javascript khác nhau được hiển thị. afterClientCheck_WebUserControl1[node] và afterClientCheck_WebUserControl2[node] và nó đang hoạt động như mong đợi - Đặt tên của trình xử lý sự kiện AfterClientCheck trong mã phía sau, không phải trong tệp aspx như.
Thuộc tính
// -- someModule.js --
export default function [] {};
// -- main.js --
import someModule from "./someModule.js";
someModule.name; // "default"
3 của phiên bản // -- someModule.js --
export default function [] {};
// -- main.js --
import someModule from "./someModule.js";
someModule.name; // "default"
4 cho biết tên của hàm như được chỉ định khi nó được tạo hoặc nó có thể là // -- someModule.js --
export default function [] {};
// -- main.js --
import someModule from "./someModule.js";
someModule.name; // "default"
5 hoặc // -- someModule.js --
export default function [] {};
// -- main.js --
import someModule from "./someModule.js";
someModule.name; // "default"
6 [một chuỗi trống] đối với các hàm được tạo ẩn danhMột chuỗi
Property attributes of// -- someModule.js --
export default function [] {};
// -- main.js --
import someModule from "./someModule.js";
someModule.name; // "default"
7WritablenoEnumerablenoConfigurableyesGhi chú. Trong các triển khai không chuẩn, trước ES2015, thuộc tính
// -- someModule.js --
export default function [] {};
// -- main.js --
import someModule from "./someModule.js";
someModule.name; // "default"
8 cũng là // -- someModule.js --
export default function [] {};
// -- main.js --
import someModule from "./someModule.js";
someModule.name; // "default"
9Thuộc tính
// -- someModule.js --
export default function [] {};
// -- main.js --
import someModule from "./someModule.js";
someModule.name; // "default"
3 của hàm có thể được sử dụng để xác định hàm trong các công cụ gỡ lỗi hoặc thông báo lỗi. Nó không có ý nghĩa ngữ nghĩa đối với chính ngôn ngữ đóThuộc tính
// -- someModule.js --
export default function [] {};
// -- main.js --
import someModule from "./someModule.js";
someModule.name; // "default"
3 là chỉ đọc và toán tử gán không thể thay đổifunction someFunction[] {}
someFunction.name = 'otherFunction';
console.log[someFunction.name]; // someFunction
Để thay đổi nó, hãy sử dụng
new Function[].name; // "anonymous"
2Thuộc tính
// -- someModule.js --
export default function [] {};
// -- main.js --
import someModule from "./someModule.js";
someModule.name; // "default"
3 thường được suy ra từ cách xác định hàm. Trong các phần tiếp theo, chúng tôi sẽ mô tả các cách khác nhau để suy raThuộc tính
// -- someModule.js --
export default function [] {};
// -- main.js --
import someModule from "./someModule.js";
someModule.name; // "default"
3 trả về tên của khai báo hàmfunction doSomething[] {}
doSomething.name; // "doSomething"
Khai báo
new Function[].name; // "anonymous"
5 xuất hàm dưới dạng khai báo thay vì biểu thức. Nếu khai báo là ẩn danh, tên là new Function[].name; // "anonymous"
6// -- someModule.js --
export default function [] {};
// -- main.js --
import someModule from "./someModule.js";
someModule.name; // "default"
Các hàm được tạo bằng hàm tạo
new Function[].name; // "anonymous"
7 có tên "anonymous"new Function[].name; // "anonymous"
Nếu biểu thức hàm được đặt tên, thì tên đó được sử dụng làm thuộc tính
// -- someModule.js --
export default function [] {};
// -- main.js --
import someModule from "./someModule.js";
someModule.name; // "default"
3const someFunction = function someFunctionName[] {};
someFunction.name; // "someFunctionName"
Các biểu thức hàm ẩn danh được tạo bằng cách sử dụng từ khóa
new Function[].name; // "anonymous"
9 hoặc các hàm mũi tên sẽ có tên là const someFunction = function someFunctionName[] {};
someFunction.name; // "someFunctionName"
0 [một chuỗi trống][function [] {}].name; // ""
[[] => {}].name; // ""
Tuy nhiên, những trường hợp như vậy rất hiếm — thông thường, để tham chiếu đến biểu thức ở nơi khác, biểu thức hàm được gắn với một mã định danh khi nó được tạo [chẳng hạn như trong một khai báo biến]. Trong những trường hợp như vậy, tên có thể được suy ra, như một vài phần phụ sau đây chứng minh
Một trường hợp thực tế không thể suy ra tên là một hàm được trả về từ một hàm khác
function getFoo[] {
return [] => {};
}
getFoo[].name; // ""
Các biến và phương thức có thể suy ra tên của một hàm ẩn danh từ vị trí cú pháp của nó
const f = function [] {};
const object = {
someMethod: function [] {}
};
console.log[f.name]; // "f"
console.log[object.someMethod.name]; // "someMethod"
Điều tương tự áp dụng cho nhiệm vụ
let f;
f = [] => {};
f.name; // "f"
Các hàm trong bộ khởi tạo [giá trị mặc định] của , tham số mặc định, trường lớp, v.v. , sẽ kế thừa tên của định danh bị ràng buộc là
// -- someModule.js --
export default function [] {};
// -- main.js --
import someModule from "./someModule.js";
someModule.name; // "default"
3 của chúngconst [f = [] => {}] = [];
f.name; // "f"
const { someMethod: m = [] => {} } = {};
m.name; // "m"
function foo[f = [] => {}] {
console.log[f.name];
}
foo[]; // "f"
class Foo {
static someMethod = [] => {};
}
Foo.someMethod.name; // someMethod
function doSomething[] {}
doSomething.name; // "doSomething"
0const someFunction = function someFunctionName[] {};
someFunction.name; // "someFunctionName"
2 tạo ra một hàm có tên là "bị ràng buộc" cộng với tên hàmfunction doSomething[] {}
doSomething.name; // "doSomething"
1Khi sử dụng thuộc tính trình truy cập
const someFunction = function someFunctionName[] {};
someFunction.name; // "someFunctionName"
3 và const someFunction = function someFunctionName[] {};
someFunction.name; // "someFunctionName"
4, "get" hoặc "set" sẽ xuất hiện trong tên hàmfunction doSomething[] {}
doSomething.name; // "doSomething"
2Tên của một lớp tuân theo thuật toán giống như khai báo hàm và biểu thức
function doSomething[] {}
doSomething.name; // "doSomething"
3Cảnh báo. JavaScript sẽ chỉ đặt thuộc tính
// -- someModule.js --
export default function [] {};
// -- main.js --
import someModule from "./someModule.js";
someModule.name; // "default"
3 của hàm nếu một hàm không có thuộc tính riêng gọi là // -- someModule.js --
export default function [] {};
// -- main.js --
import someModule from "./someModule.js";
someModule.name; // "default"
3. Tuy nhiên, các thành viên tĩnh của lớp sẽ được đặt làm thuộc tính riêng của hàm tạo lớp và do đó ngăn không cho áp dụng ____________ tích hợp. Xem bên dướiNếu một tên hàm
const someFunction = function someFunctionName[] {};
someFunction.name; // "someFunctionName"
8 được sử dụng và ký hiệu có phần mô tả, thì tên của phương thức là phần mô tả trong ngoặc vuôngfunction doSomething[] {}
doSomething.name; // "doSomething"
4Các trường riêng tư và phương thức riêng tư có hàm băm [
const someFunction = function someFunctionName[] {};
someFunction.name; // "someFunctionName"
9] như một phần tên của chúngfunction doSomething[] {}
doSomething.name; // "doSomething"
5Bạn có thể sử dụng
[function [] {}].name; // ""
[[] => {}].name; // ""
0 để kiểm tra "lớp" của một đối tượngfunction doSomething[] {}
doSomething.name; // "doSomething"
6Tuy nhiên, vì các thành viên tĩnh sẽ trở thành thuộc tính riêng của lớp, nên chúng ta không thể lấy tên lớp cho hầu như bất kỳ lớp nào có thuộc tính phương thức tĩnh
[function [] {}].name; // ""
[[] => {}].name; // ""
1function doSomething[] {}
doSomething.name; // "doSomething"
7Với phương thức
[function [] {}].name; // ""
[[] => {}].name; // ""
2 [function [] {}].name; // ""
[[] => {}].name; // ""
3 không còn giữ tên lớp thực mà là tham chiếu đến đối tượng hàm [function [] {}].name; // ""
[[] => {}].name; // ""
1. Việc cố gắng lấy lớp của [function [] {}].name; // ""
[[] => {}].name; // ""
5 đến lớp [function [] {}].name; // ""
[[] => {}].name; // ""
6 sẽ không cung cấp cho chúng tôi tên lớp nào cả, mà thay vào đó là một tham chiếu đến phương thức lớp tĩnh. Thí dụfunction doSomething[] {}
doSomething.name; // "doSomething"
8Do sự tồn tại của các trường tĩnh,
// -- someModule.js --
export default function [] {};
// -- main.js --
import someModule from "./someModule.js";
someModule.name; // "default"
3 có thể không phải là một hàmfunction doSomething[] {}
doSomething.name; // "doSomething"
9Nếu một lớp có một thuộc tính tĩnh được gọi là
// -- someModule.js --
export default function [] {};
// -- main.js --
import someModule from "./someModule.js";
someModule.name; // "default"
3, thì nó cũng sẽ có thể ghi được. Định nghĩa tích hợp trong trường hợp không có định nghĩa tĩnh tùy chỉnh là chỉ đọc// -- someModule.js --
export default function [] {};
// -- main.js --
import someModule from "./someModule.js";
someModule.name; // "default"
0Do đó, bạn không thể dựa vào thuộc tính
// -- someModule.js --
export default function [] {};
// -- main.js --
import someModule from "./someModule.js";
someModule.name; // "default"
3 tích hợp để luôn giữ tên của lớpCảnh báo. Hãy cẩn thận khi sử dụng thuộc tính
// -- someModule.js --
export default function [] {};
// -- main.js --
import someModule from "./someModule.js";
someModule.name; // "default"
3 với các phép biến đổi mã nguồn, chẳng hạn như các phép biến đổi được thực hiện bởi bộ nén JavaScript [bộ khai thác] hoặc bộ làm xáo trộn. Những công cụ này thường được sử dụng như một phần của quy trình xây dựng JavaScript để giảm kích thước của chương trình trước khi triển khai chương trình đó vào sản xuất. Các phép biến đổi như vậy thường thay đổi tên của hàm khi xây dựngMã nguồn như
// -- someModule.js --
export default function [] {};
// -- main.js --
import someModule from "./someModule.js";
someModule.name; // "default"
1có thể được nén để
// -- someModule.js --
export default function [] {};
// -- main.js --
import someModule from "./someModule.js";
someModule.name; // "default"
2Trong phiên bản không nén, chương trình chạy vào nhánh trung thực và ghi nhật ký "'foo' là một phiên bản của 'Foo'" — trong khi đó, trong phiên bản nén, nó hoạt động khác và chạy vào nhánh khác. Nếu bạn dựa vào thuộc tính
// -- someModule.js --
export default function [] {};
// -- main.js --
import someModule from "./someModule.js";
someModule.name; // "default"
3, như trong ví dụ trên, hãy đảm bảo quy trình xây dựng của bạn không thay đổi tên hàm hoặc không cho rằng một hàm có một tên cụ thể