Tôi có thể chuyển đối tượng trong hàm javascript không?
Như đã đề cập trong bài viết Truyền tham số hàm JavaScript theo tham chiếu của tôi, các đối tượng được truyền cho hàm theo tham chiếu trong JavaScript. Nói cách khác, hàm nhận một con trỏ tham chiếu đến đối tượng ban đầu. Lợi ích của phương pháp này là nó tiết kiệm bộ nhớ và tài nguyên xử lý. Thật không may, nó có thể dẫn đến rắc rối nếu chức năng thay đổi đối tượng theo cách mà bạn không lường trước hoặc mong muốn. Mặc dù bạn không thể bật công tắc để chuyển các đối tượng theo giá trị, nhưng có nhiều cách để tạo một bản sao. Đó chính xác là những gì chúng ta sẽ học cách làm hôm nay Show
Sao chép mảngMột số đối tượng, chẳng hạn như Mảng, rất dễ sao chép vì chúng có một vài phương thức trả về một bản sao của mảng. Đây là một số mã sử dụng phương thức slice() function modifyArray(a) { a[1] = 99; console.log(a); //prints '1, 99, 3' } var myArray = [1, 2, 3]; modifyArray(myArray); console.log(a); //prints '1, 99, 3' var myArray2 = [1, 2, 3]; modifyArray(myArray2.slice(0)); console.log(a); //prints '1, 2, 3' Phương thức slice() thường trả về một phần của mảng, ngoại trừ việc chúng ta đã chỉ định từ phần tử 0 đến cuối – nói cách khác, toàn bộ mảng. Chỉ cần lưu ý rằng phương thức slice() chỉ hoạt động trên các mảng chứa các kiểu dữ liệu đơn giản. Các phần tử chứa các đối tượng hoặc các mảng khác sẽ được truy cập bằng tham chiếu, do đó giữ lại kết nối với mảng nguồn. Trong những trường hợp đó, bạn sẽ cần sao chép mảng dưới dạng một đối tượng chính thức (xem bên dưới) Sao chép ngàyNgày thậm chí còn dễ sao chép hơn vì một trong các hàm tạo chấp nhận số mili giây kể từ ngày 1 tháng 1 năm 1970 – kỷ nguyên Unix function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false Nhân bản một đối tượngHầu hết các đối tượng không có phương thức gốc trả về một bản sao của đối tượng, vì vậy chúng ta phải tự sao chép. Khi làm như vậy, có hai cách bạn có thể thực hiện. Đầu tiên là thực hiện một bản sao nông; . Trước đây, tất cả các thuộc tính và phương thức của phương thức "công khai" được sao chép sang đối tượng mới, tuân theo các quy tắc gán. Do đó, các thuộc tính nguyên thủy được sao chép theo giá trị, trong khi các loại đối tượng được gán theo tham chiếu để cả đối tượng gốc và đối tượng được sao chép vẫn trỏ đến cùng một đối tượng trong bộ nhớ. Nó hiệu quả hơn để thực hiện một bản sao nông, nhưng nó không phải là một bản sao thực sự. Để làm được điều đó, bạn phải lần lượt sao chép đệ quy từng thuộc tính đối tượng. Điều đó có thể tốn nhiều tài nguyên hơn, nhưng đôi khi đó là lựa chọn tốt nhất của bạn. Đây là một phương thức nguyên mẫu hoạt động trên con trỏ này. Nó có thể thực hiện cả bản sao nông và sâu Object.prototype.clone = function(deep) { var newObj; if (this instanceof Date) { newObj = new Date(this); } else if (!deep && this instanceof Array) { newObj = this.slice(0); } else { for (i in this) { if (i == 'clone') continue; if (deep && typeof this[i] == "object") { newObj[i] = this[i].clone(); } else { newObj[i] = this[i]; } } } return newObj; }; //call as follows //var myObj = {attr1: 'an attribute', attr2: 42 } //myObj.clone(); Lưu ý rằng chức năng trên không giải quyết lỗi IE 8 DontEnum. Để biết giải pháp thay thế, hãy xem bài viết Tạo trình tạo lớp JavaScript hướng đối tượng của tôi Sử dụng jQueryjQuery có một phương thức thuận tiện có thể được sử dụng để tạo một bản sao của đối tượng được gọi là jQuery. gia hạn(). Chỉ cần thêm dòng này vào đầu chức năng của bạn khi bạn không muốn sửa đổi chức năng gốc var newObj = jQuery.extend({}, oldObj); //performs a shallow copy newObj = jQuery.extend(true, {}, oldObj); //performs a deep copy Điều đó sẽ sao chép đối tượng cho bạn Phần kết luậnHôm nay chúng ta đã thấy cách sao chép các đối tượng JS khác nhau cả khi gọi một hàm và bên trong thân hàm. JavaScript cung cấp các chức năng tạo bản sao hoặc thay đổi đối tượng ban đầu, tùy thuộc vào ngữ cảnh. Hành vi của các chức năng của bạn phải được mô hình hóa phù hợp Trong JavaScript, các hàm được gọi là Đối tượng hàm vì chúng là các đối tượng. Cũng giống như các đối tượng, các hàm có các thuộc tính và phương thức, chúng có thể được lưu trữ trong một biến hoặc một mảng và được truyền dưới dạng đối số cho các hàm khác Chức năng là đối tượng hạng nhấtNhư đã đề cập, chức năng là đối tượng. Bạn có thể làm việc với các hàm như thể chúng là các đối tượng. Ví dụ: bạn có thể gán hàm cho biến, cho phần tử mảng và cho các đối tượng khác. Chúng cũng có thể được truyền xung quanh dưới dạng đối số cho các hàm khác hoặc được trả về từ các hàm đó. Sự khác biệt duy nhất với các đối tượng là các chức năng có thể được gọi Hãy chạy một bài kiểm tra nhỏ và xác nhận rằng một hàm thực sự là một thể hiện của đối tượng function message() { console.log("Greetings Linda!"); } console.log(typeof message); // => function console.log(message instanceof Object); // => true ChạyChúng ta thấy rằng một chức năng thực sự là một đối tượng. Hàm JavaScript là một loại đối tượng đặc biệt, được gọi là đối tượng hàm. Một đối tượng hàm bao gồm một chuỗi chứa mã thực -- thân hàm -- của hàm. Mã theo nghĩa đen chỉ là một chuỗi. Mặc dù không được khuyến nghị nhưng bạn có thể tạo một đối tượng hàm mới bằng cách chuyển hàm tạo Hàm tích hợp sẵn một chuỗi mã, như vậy var body = "return Math.PI * radius * radius"; var circle = new Function("radius", body); console.log(circle(5)); // => 78.5398.. ChạyBạn cũng có thể tạo một hàm mới bằng hàm xây dựng tùy chỉnh (hãy nhớ rằng theo quy ước, hàm xây dựng luôn bắt đầu bằng một chữ cái viết hoa). Trong đoạn mã dưới đây, chúng ta có một hàm xây dựng 8 được sử dụng để tạo các thể hiện sách. Trong hàm tạo, chúng ta đang gán một đối tượng hàm cho thuộc tính 9function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false0 function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false1Chạy Hàm tạo 8 chấp nhận một đối số được gán cho một thuộc tính có tên là function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false01. Khi một đối tượng được tạo, bạn có thể gán các giá trị thuộc tính và gọi các phương thức giống như bất kỳ đối tượng nào khác Các đối tượng chức năng cũng có thể được tạo như một phần của đối tượng theo nghĩa đen. Dưới đây, chúng tôi tạo một đối tượng có tên là function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false02 với một thuộc tính có tên là function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false03 là một đối tượng chức năng function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false6 function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false7Chạy Tiếp theo, hãy xem một ví dụ trong đó một đối tượng hàm được truyền xung quanh giống như một đối tượng thông thường. Hàm function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false04 lấy một hàm làm đối số của nó. Một hàm mới được trả về từ lệnh gọi function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false04 gọi hàm được truyền vào và trả về phủ định logic của giá trị trả về của nó Sau khi khai báo hàm, chúng tôi chuyển hàm function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false06 tích hợp cho function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false04 và gán hàm trả về biến function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false08. Biến function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false08 là một đối tượng hàm có thể được truyền xung quanh giống như bất kỳ đối tượng nào. Để gọi hàm, bạn gọi nó với các tham số khác nhau Object.prototype.clone = function(deep) { var newObj; if (this instanceof Date) { newObj = new Date(this); } else if (!deep && this instanceof Array) { newObj = this.slice(0); } else { for (i in this) { if (i == 'clone') continue; if (deep && typeof this[i] == "object") { newObj[i] = this[i].clone(); } else { newObj[i] = this[i]; } } } return newObj; }; //call as follows //var myObj = {attr1: 'an attribute', attr2: 42 } //myObj.clone();4 Object.prototype.clone = function(deep) { var newObj; if (this instanceof Date) { newObj = new Date(this); } else if (!deep && this instanceof Array) { newObj = this.slice(0); } else { for (i in this) { if (i == 'clone') continue; if (deep && typeof this[i] == "object") { newObj[i] = this[i].clone(); } else { newObj[i] = this[i]; } } } return newObj; }; //call as follows //var myObj = {attr1: 'an attribute', attr2: 42 } //myObj.clone();5Chạy Đây là một ví dụ khác sử dụng cùng chức năng function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false04. Chúng tôi đã thêm chức năng tùy chỉnh để kiểm tra xem một số có phải là số nguyên tố hay không (các số không phải là số nguyên tố được gọi là hợp số). Hàm này được truyền cho hàm function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false04 làm đối số 0 1ChạyGhi chú. phương thức function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false12 tích hợp kiểm tra xem tất cả các phần tử trong mảng có vượt qua bài kiểm tra được thực hiện bởi hàm được truyền dưới dạng đối số hay không; Hàm được sao chép theo tham chiếuKhi bạn gán một đối tượng hàm cho một biến khác, JavaScript không tạo một bản sao mới của hàm. Thay vào đó, nó làm cho biến mới tham chiếu cùng một đối tượng hàm như ban đầu. Chỉ là hai biến có tên khác nhau đang truy cập cùng một đối tượng hàm cơ bản 2 3ChạyVí dụ này cho thấy rằng nếu chúng ta thêm một thuộc tính vào đối tượng hàm, thì cả hai biến, function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false14 và function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false15, sẽ bị thay đổi vì chúng đang tham chiếu đến cùng một đối tượng hàm. Điều này xác nhận rằng các đối tượng hàm thực sự được sao chép theo tham chiếu Chúng ta vừa biết rằng các đối tượng hàm được sao chép theo tham chiếu. Tuy nhiên, khi sửa đổi thân hàm thực tế, mọi thứ hơi khác một chút vì điều này sẽ khiến một đối tượng hàm mới được tạo. Trong ví dụ tiếp theo, thân hàm function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false14 được thay đổi và JavaScript sẽ tạo một đối tượng hàm mới 4 5ChạyGán thân hàm mới cho function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false14 sẽ tạo một đối tượng hàm mới. Lưu ý rằng biến function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false15 vẫn tham chiếu đối tượng hàm cũ Truyền một chức năng dưới dạng Gọi lạiGiống như một đối tượng thông thường, bạn có thể truyền một đối tượng hàm cho một hàm khác (thực ra bạn đã thấy điều này thực tế với ví dụ về hàm function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false04) Trong ví dụ tiếp theo, hai hàm khác nhau, function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false60 và function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false61, được truyền dưới dạng tham số cho hàm function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false62. Tất nhiên, chỉ một tham chiếu đến chức năng được thông qua. Hàm function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false60 và function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false61 được gọi là hàm gọi lại hoặc hàm gọi lại phù hợp hơn. Hàm function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false62 sẽ gọi lại (i. e. gọi nó) với hai giá trị đối số được cung cấp 6 7ChạyCác hàm gọi lại đóng một vai trò quan trọng trong nhiều khung, bao gồm cả JQuery. Hãy xem xét mã dưới đây. Thông báo function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false66 thực thi tốt trước khi hoạt hình function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false67 hoàn tất, đây có thể không phải là điều bạn muốn 8Chạy Đặt lạiĐiều này có thể được giải quyết bằng cách chuyển vào hàm gọi lại sẽ chỉ thực thi khi hoạt ảnh hoàn tất 9Chạy Đặt lạiVì vậy, thay vì đợi một chức năng hoàn thành, bạn có thể sử dụng các lệnh gọi lại để thực thi nó một cách không đồng bộ. Điều này có lợi cho các tác vụ cần một khoảng thời gian để hoàn thành, chẳng hạn như hoạt ảnh ẩn ở trên. Một ví dụ khác là khi thực hiện thao tác AJAX và bạn không muốn người dùng đợi cuộc gọi quay lại. Điều này cho phép trình duyệt tiếp tục phản hồi các yêu cầu của người dùng trong khi chờ chức năng gọi lại được gọi Lập trình bất đồng bộ là một kỹ năng quan trọng cần có khi làm việc với JavaScript. Để tìm hiểu thêm về các cuộc gọi lại và vòng lặp sự kiện quan trọng, chúng tôi khuyên bạn nên kiểm tra JS Dofactory độc đáo của chúng tôi, nơi chúng tôi khám phá những chủ đề này và các chủ đề khác chi tiết hơn nhiều. Bấm vào đây để biết thêm chi tiết Trong trường hợp một hàm được gọi nhiều lần với hầu hết các đối số giống nhau, bạn có thể có một ứng cử viên cho currying. Để xử lý một hàm về cơ bản là lưu vào bộ đệm và sử dụng lại các giá trị đối số Một hàm được xử lý sử dụng một bao đóng để lưu trữ trạng thái của các đối số định kỳ để bạn không cần phải chuyển chúng mỗi lần. Sau đó, hàm mới sử dụng chúng để điền trước toàn bộ danh sách các đối số mà hàm ban đầu yêu cầu Đầu vào của quá trình cà ri là một hàm chấp nhận hai hoặc nhiều đối số. Sau đó, nó biến đổi hàm để tạo ra một hàm mới cung cấp chức năng tương tự nhưng với các đối số một phần (ít hơn so với ban đầu). Nó liên kết phần còn lại của các đối số với các giá trị cố định Hãy xem một ví dụ. Hàm function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false68 chấp nhận hai đối số cho tên và họ. function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false69 và function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false70. Nó nối chúng để tạo ra tên của người đó var body = "return Math.PI * radius * radius"; var circle = new Function("radius", body); console.log(circle(5)); // => 78.5398..0 var body = "return Math.PI * radius * radius"; var circle = new Function("radius", body); console.log(circle(5)); // => 78.5398..1Chạy Tiếp theo, chúng tôi tạo một phiên bản cà ri của chức năng tương tự. Nếu chúng ta truyền hai đối số thì nó thực thi bình thường, giống như ví dụ trên. Tuy nhiên, nếu chúng ta chỉ truyền đối số function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false69, thì một hàm khác được trả về với bao đóng chứa giá trị function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false69. Hàm được trả về chấp nhận một phần danh sách các đối số, trong ví dụ của chúng tôi, chỉ một đối số là function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false70 vì nó đã biết giá trị function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false69 là gì. Một lần nữa, nó thực hiện công việc tương tự như function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false68, nhưng giá trị của function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false69 được ghi nhớ trong phần đóng kết hợp với hàm trợ giúp ẩn danh được trả về var body = "return Math.PI * radius * radius"; var circle = new Function("radius", body); console.log(circle(5)); // => 78.5398..2 var body = "return Math.PI * radius * radius"; var circle = new Function("radius", body); console.log(circle(5)); // => 78.5398..3Chạy Trong JavaScript, một chức năng cần một chức năng trợ giúp để đạt được currying. Chức năng trợ giúp này thường được gọi là chức năng cà ri Có một triển khai chung của currying có thể được áp dụng cho bất kỳ chức năng nào và mã bên dưới thể hiện điều này. Nó tạo một bao đóng lưu trữ cả hàm ban đầu và các đối số cho curry. Sau đó, khi được gọi lại, nó sẽ nối các đối số đến với mảng đối số trước đó và thực thi chức năng ban đầu. Một mảng giữ các đối số được truyền cho lời gọi hiện tại và mảng còn lại giữ các đối số được truyền cho hàm curry. Mảng nối sau đó được chuyển đến hàm ban đầu var body = "return Math.PI * radius * radius"; var circle = new Function("radius", body); console.log(circle(5)); // => 78.5398..4 var body = "return Math.PI * radius * radius"; var circle = new Function("radius", body); console.log(circle(5)); // => 78.5398..5Chạy Tất cả các hàm JavaScript đều có một phương thức gọi là function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false77 liên kết với một đối tượng và trả về một hàm mới. Đối số đầu tiên để liên kết đặt ngữ cảnh function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false78 của hàm var body = "return Math.PI * radius * radius"; var circle = new Function("radius", body); console.log(circle(5)); // => 78.5398..6 var body = "return Math.PI * radius * radius"; var circle = new Function("radius", body); console.log(circle(5)); // => 78.5398..7Chạy Gọi function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false79 gọi hàm ban đầu function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false03 như một phương thức của Object.prototype.clone = function(deep) { var newObj; if (this instanceof Date) { newObj = new Date(this); } else if (!deep && this instanceof Array) { newObj = this.slice(0); } else { for (i in this) { if (i == 'clone') continue; if (deep && typeof this[i] == "object") { newObj[i] = this[i].clone(); } else { newObj[i] = this[i]; } } } return newObj; }; //call as follows //var myObj = {attr1: 'an attribute', attr2: 42 } //myObj.clone();41, giống như Object.prototype.clone = function(deep) { var newObj; if (this instanceof Date) { newObj = new Date(this); } else if (!deep && this instanceof Array) { newObj = this.slice(0); } else { for (i in this) { if (i == 'clone') continue; if (deep && typeof this[i] == "object") { newObj[i] = this[i].clone(); } else { newObj[i] = this[i]; } } } return newObj; }; //call as follows //var myObj = {attr1: 'an attribute', attr2: 42 } //myObj.clone();42. Đối số bạn chuyển đến Object.prototype.clone = function(deep) { var newObj; if (this instanceof Date) { newObj = new Date(this); } else if (!deep && this instanceof Array) { newObj = this.slice(0); } else { for (i in this) { if (i == 'clone') continue; if (deep && typeof this[i] == "object") { newObj[i] = this[i].clone(); } else { newObj[i] = this[i]; } } } return newObj; }; //call as follows //var myObj = {attr1: 'an attribute', attr2: 42 } //myObj.clone();43 được chuyển thành đối số Object.prototype.clone = function(deep) { var newObj; if (this instanceof Date) { newObj = new Date(this); } else if (!deep && this instanceof Array) { newObj = this.slice(0); } else { for (i in this) { if (i == 'clone') continue; if (deep && typeof this[i] == "object") { newObj[i] = this[i].clone(); } else { newObj[i] = this[i]; } } } return newObj; }; //call as follows //var myObj = {attr1: 'an attribute', attr2: 42 } //myObj.clone();44 cho hàm function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false03 Ngoài việc liên kết một hàm với một đối tượng, EcmaScript 5 còn hỗ trợ một phương thức function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false77 mang lại tính năng tự nhiên cho JavaScript. Bạn không còn cần phải sử dụng chức năng trợ giúp cà ri. Số lượng đối số tùy ý mà bạn chuyển đến function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false77 cũng bị ràng buộc var body = "return Math.PI * radius * radius"; var circle = new Function("radius", body); console.log(circle(5)); // => 78.5398..8 var body = "return Math.PI * radius * radius"; var circle = new Function("radius", body); console.log(circle(5)); // => 78.5398..9Chạy Điều này tạo ra một chức năng mới gọi là Object.prototype.clone = function(deep) { var newObj; if (this instanceof Date) { newObj = new Date(this); } else if (!deep && this instanceof Array) { newObj = this.slice(0); } else { for (i in this) { if (i == 'clone') continue; if (deep && typeof this[i] == "object") { newObj[i] = this[i].clone(); } else { newObj[i] = this[i]; } } } return newObj; }; //call as follows //var myObj = {attr1: 'an attribute', attr2: 42 } //myObj.clone();48. Giá trị function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false78 bị ràng buộc là null, i. e. đối tượng toàn cầu và các đối số Object.prototype.clone = function(deep) { var newObj; if (this instanceof Date) { newObj = new Date(this); } else if (!deep && this instanceof Array) { newObj = this.slice(0); } else { for (i in this) { if (i == 'clone') continue; if (deep && typeof this[i] == "object") { newObj[i] = this[i].clone(); } else { newObj[i] = this[i]; } } } return newObj; }; //call as follows //var myObj = {attr1: 'an attribute', attr2: 42 } //myObj.clone();50 và Object.prototype.clone = function(deep) { var newObj; if (this instanceof Date) { newObj = new Date(this); } else if (!deep && this instanceof Array) { newObj = this.slice(0); } else { for (i in this) { if (i == 'clone') continue; if (deep && typeof this[i] == "object") { newObj[i] = this[i].clone(); } else { newObj[i] = this[i]; } } } return newObj; }; //call as follows //var myObj = {attr1: 'an attribute', attr2: 42 } //myObj.clone();51 được ràng buộc lần lượt là 1 và 2. Gọi Object.prototype.clone = function(deep) { var newObj; if (this instanceof Date) { newObj = new Date(this); } else if (!deep && this instanceof Array) { newObj = this.slice(0); } else { for (i in this) { if (i == 'clone') continue; if (deep && typeof this[i] == "object") { newObj[i] = this[i].clone(); } else { newObj[i] = this[i]; } } } return newObj; }; //call as follows //var myObj = {attr1: 'an attribute', attr2: 42 } //myObj.clone();48 với giá trị đối số 3 liên kết giá trị này với Object.prototype.clone = function(deep) { var newObj; if (this instanceof Date) { newObj = new Date(this); } else if (!deep && this instanceof Array) { newObj = this.slice(0); } else { for (i in this) { if (i == 'clone') continue; if (deep && typeof this[i] == "object") { newObj[i] = this[i].clone(); } else { newObj[i] = this[i]; } } } return newObj; }; //call as follows //var myObj = {attr1: 'an attribute', attr2: 42 } //myObj.clone();50 rồi thực thi hàm function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false60 mà không cần viết hàm curry Tiếp theo, chúng ta hãy xem xét một ứng dụng thực tế của cà ri trong lĩnh vực chuyển đổi đơn vị 0 1ChạyHàm Object.prototype.clone = function(deep) { var newObj; if (this instanceof Date) { newObj = new Date(this); } else if (!deep && this instanceof Array) { newObj = this.slice(0); } else { for (i in this) { if (i == 'clone') continue; if (deep && typeof this[i] == "object") { newObj[i] = this[i].clone(); } else { newObj[i] = this[i]; } } } return newObj; }; //call as follows //var myObj = {attr1: 'an attribute', attr2: 42 } //myObj.clone();55 thực hiện tính toán chuyển đổi đơn vị thực tế. Nhìn vào function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false77 và, một lần nữa, đối số null đề cập đến đối tượng chung được sử dụng là function copyDate(aDate) { return new Date(aDate); } function compareGlobalVariableToLocal( dt1Name, dt2 ) { return (window[dt1Name] === dt2); } var myDate = new Date(2012, 0, 12); //January 12, 2012 var dateCopy = copyDate(myDate); alert(compareGlobalVariableToLocal('myDate', myDate)); //displays true alert(compareGlobalVariableToLocal('myDate', dateCopy)); //displays false78. Ba đối số tiếp theo được liên kết với Object.prototype.clone = function(deep) { var newObj; if (this instanceof Date) { newObj = new Date(this); } else if (!deep && this instanceof Array) { newObj = this.slice(0); } else { for (i in this) { if (i == 'clone') continue; if (deep && typeof this[i] == "object") { newObj[i] = this[i].clone(); } else { newObj[i] = this[i]; } } } return newObj; }; //call as follows //var myObj = {attr1: 'an attribute', attr2: 42 } //myObj.clone();58, Object.prototype.clone = function(deep) { var newObj; if (this instanceof Date) { newObj = new Date(this); } else if (!deep && this instanceof Array) { newObj = this.slice(0); } else { for (i in this) { if (i == 'clone') continue; if (deep && typeof this[i] == "object") { newObj[i] = this[i].clone(); } else { newObj[i] = this[i]; } } } return newObj; }; //call as follows //var myObj = {attr1: 'an attribute', attr2: 42 } //myObj.clone();59 và 00 tương ứng. Các ràng buộc này được lưu trữ và duy trì trong bao đóng được liên kết với các đối tượng hàm 01 và 02. Trong hai dòng cuối cùng, chúng ta gọi mỗi hàm với một giá trị mà sau đó được liên kết với biến 03 và hàm Object.prototype.clone = function(deep) { var newObj; if (this instanceof Date) { newObj = new Date(this); } else if (!deep && this instanceof Array) { newObj = this.slice(0); } else { for (i in this) { if (i == 'clone') continue; if (deep && typeof this[i] == "object") { newObj[i] = this[i].clone(); } else { newObj[i] = this[i]; } } } return newObj; }; //call as follows //var myObj = {attr1: 'an attribute', attr2: 42 } //myObj.clone();55 ban đầu được gọi trả về kết quả mong muốn Giả sử bạn đang xây dựng trò chơi đua ô tô bằng JavaScript và bạn cần theo dõi tổng số đối tượng ô tô đã được khởi tạo. Trong Java, bạn sẽ sử dụng từ khóa tĩnh cho việc này, nhưng JavaScript không cung cấp chức năng vượt trội như vậy Tất nhiên, bạn có thể chỉ cần lưu trữ phần dữ liệu này trong một biến toàn cục nhưng điều này sẽ thêm các biến không cần thiết vào không gian tên toàn cầu. Một giải pháp tốt hơn là lưu trữ thông tin này trong thuộc tính của đối tượng hàm. Hãy gọi hàm 05 và sử dụng nó để ghi nhớ giá trị tiếp theo sẽ được trả về. Sau đó, hàm sẽ có thể trả về một giá trị khác mỗi khi nó được gọi 2 3ChạyTrong lập trình chức năng, lưu trữ kết quả của lệnh gọi hàm được gọi là ghi nhớ. Hãy khám phá điều này chi tiết hơn một chút Ghi nhớ là một kỹ thuật tối ưu hóa được sử dụng để cải thiện hiệu suất của một hàm bằng cách lưu vào bộ nhớ đệm các giá trị trả về của hàm đó để không cần phải thực hiện lại các tính toán nặng nề tiềm ẩn trong lần gọi tiếp theo. Không phải tất cả các chức năng đều có thể được ghi nhớ; . Hàm minh bạch tham chiếu là hàm luôn tạo ra cùng một đầu ra trên một đầu vào nhất định. Chẳng hạn, nếu bạn gọi một hàm có giá trị x được truyền cho nó, thì nó sẽ thực hiện các phép tính trên x và luôn trả về cùng một giá trị y được liên kết Các ví dụ điển hình về lợi ích của việc ghi nhớ là hoạt ảnh HTML5 Canvas và các phép tính toán học đệ quy, chẳng hạn như tính toán giai thừa, tạo chuỗi Fibonacci và phép nhân chuỗi ma trận Hãy xem cách ghi nhớ có thể được sử dụng để cải thiện việc tính toán các số Fibonacci. Cách tiếp cận đệ quy để tạo ra những con số này không mở rộng rất tốt. Trong ví dụ bên dưới, hàm 06 được gọi đệ quy 177 lần để tạo tổng của 10 số Fibonacci đầu tiên 4 5ChạyChương trình thực hiện nhiều công việc bổ sung bằng cách không theo dõi các giá trị đã tính toán trước đó. Đây là nơi ghi nhớ đến. Đầu tiên, hãy khai báo một mảng bộ đệm nơi bạn có thể lưu trữ các giá trị hàm đã được tính toán đã được trả về trong các lần gọi trước. Sau đó, thay vì gọi hàm, hãy trả lại các giá trị này trong các lần gọi hàm tiếp theo, như vậy 6 7ChạyĐể tạo 10 số Fibonacci đầu tiên, hàm này chỉ được thực hiện đệ quy 20 lần. Một cải tiến đáng kể Tôi có thể chuyển đối tượng trong hàm không?Để chuyển một đối tượng làm đối số, chúng ta viết tên đối tượng làm đối số trong khi gọi hàm giống như cách chúng ta thực hiện đối với các biến khác . cú pháp. tên_hàm(tên_đối_tượng); . Trong ví dụ này, có một lớp có biến số nguyên 'a' và hàm 'add' lấy một đối tượng làm đối số.
Tôi có thể chuyển một đối tượng làm tham số chức năng không?Bạn có thể truyền một đối tượng dưới dạng tham số nhưng không được định nghĩa nó trong định nghĩa hàm .
Làm cách nào để gọi một đối tượng bên trong một hàm trong JavaScript?Bạn có thể gọi một hàm bên trong một đối tượng bằng cách khai báo hàm đó như một thuộc tính trên đối tượng và gọi nó , e. g. đối tượng. tổng(2, 2). Thuộc tính của một đối tượng có thể trỏ đến một hàm, giống như nó có thể trỏ đến một chuỗi, số hoặc các giá trị khác.
Làm cách nào để chuyển bản sao của đối tượng trong JavaScript?Để sao chép một đối tượng trong JavaScript, bạn có ba tùy chọn. . Sử dụng mức chênh lệch (. ) cú pháp Sử dụng đối tượng. phương thức gán() Sử dụng JSON. stringify() và JSON. phương pháp phân tích () |