Đối tượng JavaScript: Từ cơ bản đến kỹ thuật nâng cao

Hiểu cốt lõi của JavaScript: Nguyên thủy và Đối tượng JavaScript, một ngôn ngữ có các kiểu dữ liệu đa dạng và linh hoạt, về cơ bản được chia thành hai loại: và . Sự khác biệt này rất quan trọng để các nhà phát triển ở mọi cấp độ nắm bắt, vì nó tạo thành nền tảng cho JavaScript hoạt động. Chúng ta hãy xem lại những khái niệm này để củng cố sự hiểu biết của chúng ta. Nguyên thủy Đối tượng Giá trị nguyên thủy: Những điều cơ bản : Dữ liệu văn bản như và được gói gọn trong dấu ngoặc kép, đóng vai trò là nền tảng cho thao tác văn bản trong JavaScript. Chuỗi "hello" "farewell" : Cho dù đó là số nguyên ( ) hay số thập phân ( ), Số là nền tảng của các phép toán trong ngôn ngữ. Số -5 3.14 : Đối với các phép tính vượt quá giới hạn số nguyên an toàn của Number, BigInt phát huy tác dụng, cho phép tính toán chính xác trên các số nguyên lớn. BigInt : Kiểu Boolean, với các giá trị đúng và sai, đóng vai trò then chốt cho các hoạt động logic và luồng điều khiển. Boolean : Một biến không được gán giá trị sẽ tự động có giá trị không xác định, biểu thị sự vắng mặt của giá trị trong ngữ cảnh cụ thể. Không xác định : Được giới thiệu để đảm bảo các khóa thuộc tính duy nhất, Biểu tượng là bất biến và duy nhất, lý tưởng để thêm các thuộc tính không va chạm vào các đối tượng. Biểu tượng : Thể hiện sự vắng mặt có chủ ý của bất kỳ giá trị đối tượng nào. Không giống như không xác định, null được gán rõ ràng để biểu thị 'không có giá trị'. Null Nguyên thủy là , có nghĩa là giá trị của chúng không thể thay đổi sau khi được tạo. Đặc điểm này thường dẫn đến sự nhầm lẫn, đặc biệt khi chúng ta nhầm lẫn một biến chứa giá trị nguyên thủy với chính giá trị đó. bất biến Hiểu rằng nguyên thủy là bất biến giúp làm rõ nhiều khía cạnh của hành vi JavaScript, đặc biệt là trong các hoạt động so sánh và gán. Trong hành trình của chúng tôi thông qua JavaScript, mặc dù chúng tôi có thể không sử dụng trực tiếp một số loại này, nhưng việc nhận biết và hiểu vai trò của chúng sẽ làm phong phú thêm bộ công cụ mã hóa của chúng tôi, mở đường cho mã phức tạp và hiệu quả hơn. Ngoài vương quốc nguyên thủy, vũ trụ của JavaScript bị thống trị bởi các Đối tượng. Danh mục này bao gồm một loạt các cấu trúc dữ liệu, một số trong đó có thể làm bạn ngạc nhiên, chẳng hạn như . Chủ yếu, chúng tôi gặp phải: Mảng : Được biểu thị bằng cho các đối tượng tiêu chuẩn hoặc cho mảng, các cấu trúc này là xương sống để nhóm các dữ liệu và chức năng liên quan. Đối tượng {} [] : Được biểu thị dưới dạng trong số các hàm khác, hàm là công dân hạng nhất trong JavaScript, cho phép gán mã cho các biến, được truyền dưới dạng đối số hoặc được trả về từ các hàm khác. Hàm x => x * 2 Các đối tượng về cơ bản khác với các đối tượng nguyên thủy; chúng có thể thay đổi và có thể được thao tác trực tiếp trong mã của chúng tôi. Một quan niệm sai lầm phổ biến là xem mọi thứ trong JavaScript dưới dạng đối tượng. Điều này đúng một phần do các hành vi giống đối tượng nhất định của các giá trị nguyên thủy. Ví dụ: biểu thức có thể đặt ra câu hỏi: Làm thế nào một chuỗi nguyên thủy có thể có các phương thức? "hi".toUpperCase() Điều này xảy ra thông qua một quá trình được gọi là , trong đó JavaScript tạm thời bọc các giá trị nguyên thủy trong trình bao bọc đối tượng để truy cập các phương thức, chỉ để loại bỏ các đối tượng này sau khi thao tác hoàn tất. "boxing" Đó là một khía cạnh hấp dẫn trong thiết kế của JavaScript, cho phép những người nguyên thủy được hưởng lợi từ các phương thức giống đối tượng mà không thực sự là đối tượng. Hiểu được sự khác biệt này là rất quan trọng khi chúng ta nghiên cứu sâu hơn về kiểu chữ của JavaScript. Khám phá toán tử và trường hợp duy nhất typeof của JavaScript null Việc phân biệt giữa các loại dữ liệu khác nhau trong JavaScript đôi khi có vẻ giống như một phép màu. Nhập toán tử , một công cụ mạnh mẽ trong bộ công cụ JavaScript của bạn giúp hiển thị loại của một giá trị nhất định. Đây là cách nó hoạt động trong thực tế: typeof console.log(typeof(5)); // Outputs "number" console.log(typeof("hi")); // Outputs "string" console.log(typeof(undefined)); // Outputs "undefined" console.log(typeof({})); // Outputs "object" console.log(typeof([])); // Outputs "object" console.log(typeof(x => x * 2)); // Outputs "function" Tuy nhiên, trong lĩnh vực JavaScript, không phải mọi thứ đều như vẻ ngoài của nó. Lấy ví dụ, cách xử lý của toán tử đối với . Bất chấp những mong đợi, trả về , một kết quả khiến nhiều nhà phát triển bối rối. Hành vi này không hẳn là một lỗi mà là một lỗi sai của ngôn ngữ, bắt nguồn từ các quyết định thiết kế ban đầu của JavaScript. typeof null typeof null "object" Giá trị có nghĩa là thể hiện sự vắng mặt có chủ ý của bất kỳ giá trị đối tượng nào nhưng vẫn phân loại nó thành một đối tượng. Điều kỳ quặc này đã được nhiều người biết đến và tồn tại trong suốt quá trình phát triển của JavaScript do lo ngại về khả năng tương thích ngược. null typeof Điều quan trọng cần nhớ là, không giống như , biểu thị các giá trị chưa được gán, được sử dụng rõ ràng để biểu thị việc cố ý gán 'không có giá trị'. Mặc dù JavaScript không thực thi sự phân biệt trong cách sử dụng giữa và , nhưng việc áp dụng cách tiếp cận nhất quán cho mã của bạn có thể giúp làm rõ ý định của bạn và hỗ trợ cả về khả năng đọc và khả năng bảo trì. undefined null null undefined Hiểu biểu thức trong JavaScript: Đối thoại với mã của bạn Trong thế giới sôi động của JavaScript, viết mã giống như việc đặt ra câu hỏi và ngôn ngữ sẽ phản hồi bằng câu trả lời. Những tương tác này được ghi lại thông qua cái mà chúng tôi gọi là . Một biểu thức trong JavaScript là bất kỳ đơn vị mã hợp lệ nào phân giải thành một giá trị. biểu thức Hãy xem một ví dụ đơn giản: console.log(5 + 5); // Outputs 10 Trong trường hợp này, là biểu thức mà javascript đánh giá với giá trị là . 5 + 5 10 Biểu thức là các khối xây dựng của mã JavaScript, cho phép các tương tác và tính toán động trong chương trình của bạn. Chúng có thể đơn giản như ví dụ trên hoặc phức tạp hơn. Trên thực tế, các biểu thức là đường giao tiếp trực tiếp của bạn với ngôn ngữ để tạo các ứng dụng web động, tương tác. Tạo đối tượng trong JavaScript: Từ lệnh gọi đến bộ sưu tập rác Trong khi các kiểu dữ liệu nguyên thủy trong JavaScript—chẳng hạn như chuỗi, số và boolean—được gọi vào tồn tại dưới dạng các thực thể được xác định trước, thì các đối tượng lại hoạt động theo một nguyên tắc khác. Mỗi lần chúng ta sử dụng (dấu ngoặc nhọn), chúng ta không chỉ tham khảo bản thiết kế hiện có; chúng tôi đang mang đến một vật thể hoàn toàn mới. Hãy xem xét việc tạo ra hai đối tượng đơn giản: {} const cat = {}; const dog = {}; Ở đây, và là những đối tượng riêng biệt, mỗi đối tượng có không gian riêng trong ký ức. Nguyên tắc này vượt ra ngoài các đối tượng đơn thuần để bao gồm tất cả các cấu trúc dữ liệu phức tạp trong JavaScript, bao gồm mảng, ngày tháng và hàm. cat dog Mặc dù có để tạo các thực thể này, nhưng sử dụng cho đối tượng, cho mảng và cho ngày tháng là một trong những cách tiếp cận trực tiếp nhất để tạo phiên bản đối tượng. nhiều phương pháp khác nhau {} [] new Date() Nhưng điều gì sẽ xảy ra với những đồ vật này khi chúng không còn cần thiết nữa? Chúng có tồn tại vô thời hạn trong vũ trụ JavaScript không? Câu trả lời nằm ở của JavaScript — một quy trình giúp dọn sạch bộ nhớ không còn được sử dụng một cách hiệu quả. cơ chế thu gom rác Thu gom rác là một hoạt động tự động, nghĩa là các đối tượng sẽ bị hủy và bộ nhớ được phân bổ của chúng sẽ được lấy lại sau khi không có bất kỳ tham chiếu nào đến chúng trong mã của bạn. So sánh các giá trị trong JavaScript: Bình đẳng vượt ra ngoài bề mặt Trong JavaScript, việc so sánh các giá trị đôi khi có thể giống như đang điều hướng một mê cung, với nhiều đường dẫn khác nhau đến cùng một đích: hiểu sự bình đẳng. Có ba cách chính để so sánh các giá trị: ): Hình thức bình đẳng này là chính xác nhất, kiểm tra cả giá trị và loại của hai toán hạng. Nó tương đương với việc hỏi "Hai giá trị này có giống nhau về cả loại và nội dung không?" ( Bình đẳng nghiêm ngặt === ): Ít nghiêm ngặt hơn bình đẳng nghiêm ngặt, bình đẳng lỏng lẻo cho phép ép buộc kiểu trước khi so sánh. Nó giống như hỏi, "Hai giá trị này có thể được coi là giống nhau nếu chúng ta bỏ qua loại của chúng không?" ( Bình đẳng lỏng lẻo == ): Phương thức này tương tự như bình đẳng nghiêm ngặt nhưng có một vài khác biệt quan trọng, đặc biệt là trong cách nó xử lý các trường hợp JavaScript đặc biệt. ( Bình đẳng giá trị giống nhau Object.is Hãy xem hoạt động: Object.is console.log(Object.is(2, 2)); // true console.log(Object.is({}, {})); // false Tại sao trả về sai? Bởi vì mỗi đối tượng theo nghĩa đen tạo ra một đối tượng duy nhất trong bộ nhớ, khiến coi chúng như những thực thể riêng biệt mặc dù chúng có cấu trúc giống nhau. Object.is({}, {}) {} Object.is Đi sâu hơn vào các sắc thái của sự bình đẳng nghiêm ngặt Mặc dù sự bình đẳng nghiêm ngặt rất nhưng nó ẩn chứa những đặc thù riêng, đặc biệt là với một số giá trị JavaScript nhất định: đơn giản : Đáng ngạc nhiên là sự so sánh này trả về . Trong JavaScript, (Không phải số) được coi là không ngang bằng với chính nó, một đặc điểm hiếm gặp nhằm báo hiệu kết quả của một phép tính không xác định hoặc sai sót. NaN === NaN false NaN So sánh và : Cả và đều trả về , mặc dù và là các giá trị riêng biệt trong hệ thống số của JavaScript. Đẳng thức này bỏ qua dấu của số 0, chỉ tập trung vào độ lớn của nó. -0 0 -0 === 0 0 === -0 true -0 0 Ý nghĩa thực tiễn Hiểu những khác biệt này trong việc kiểm tra tính bằng nhau là điều tối quan trọng để viết mã JavaScript chính xác và không có lỗi. Mặc dù và có vai trò riêng nhưng việc biết khi nào nên sử dụng có thể rất quan trọng, đặc biệt đối với các trường hợp phức tạp liên quan đến , và . === == Object.is NaN 0 -0 Kiến thức này trao quyền cho các nhà phát triển đưa ra quyết định sáng suốt về kiểm tra tính bình đẳng, đảm bảo mã của họ hoạt động như mong đợi trong nhiều tình huống. Điều hướng các thuộc tính và tham chiếu đối tượng trong JavaScript Khi nói đến việc thao tác các thuộc tính đối tượng trong JavaScript, bạn có hai công cụ chính: và . Cả hai phương pháp đều cung cấp một đường dẫn đơn giản để truy cập và sửa đổi nội dung của một đối tượng. Đây là một mồi nhanh: ký hiệu dấu chấm ký hiệu ngoặc : Truy cập các thuộc tính trực tiếp thông qua toán tử dấu chấm (ví dụ: ). Ký hiệu dấu chấm object.key : Sử dụng dấu ngoặc và một chuỗi để chỉ định tên thuộc tính (ví dụ: ). Ký hiệu ngoặc object['key'] Những kỹ thuật này là nền tảng để tương tác với các đối tượng. Tuy nhiên, một khía cạnh quan trọng cần nắm bắt là cách JavaScript xử lý . Không giống như các kiểu dữ liệu nguyên thủy, các đối tượng trong JavaScript là các kiểu được tham chiếu và điều này có nghĩa là khi bạn thao tác với một đối tượng, bạn đang làm việc với một tham chiếu đến vị trí của đối tượng đó trong bộ nhớ chứ không phải bản sao trực tiếp của chính đối tượng đó. các tham chiếu đối tượng Một minh họa trong thế giới thực: Viết mã hợp tác Để biến khái niệm này thành hiện thực, chúng ta hãy xem xét một kịch bản liên quan đến hai nhà văn đầy tham vọng, Emily và Thomas, hợp tác viết một cuốn tiểu thuyết. Họ quyết định sử dụng các đối tượng JavaScript để cấu trúc các nhân vật và bối cảnh trong câu chuyện của mình: const project = { title: "Adventures in Code", characters: { protagonist: { name: "Alex", traits: ["brave", "curious"] } }, setting: { location: "Virtual World", era: "future" } }; Khi họ phát triển câu chuyện của mình, Emily giới thiệu một nhân vật phụ được lấy cảm hứng từ nhân vật chính nhưng có một tình tiết độc đáo: const sidekick = project.characters.protagonist; sidekick.name = "Sam"; sidekick.traits.push("loyal"); Đồng thời, Thomas quyết định mở rộng bối cảnh của cuốn tiểu thuyết của họ: const newSetting = project.setting; newSetting.location = "Cyber City"; newSetting.era = "2040"; Thoạt nhìn, bạn có thể thắc mắc những thay đổi này ảnh hưởng như thế nào đến đối tượng ban đầu. Đây là kết quả: project Tên của nhân vật chính bây giờ xuất hiện là "Sam" và các đặc điểm của họ bao gồm "lòng trung thành". Điều này là do không phải là một đối tượng mới mà là một tham chiếu đến . Việc sửa đổi sẽ tác động trực tiếp đến đối tượng ban đầu. sidekick project.characters.protagonist sidekick project Bối cảnh của cuốn tiểu thuyết đã phát triển thành "Thành phố mạng" vào năm "2040". Tương tự như các ký tự, là một tham chiếu đến , nghĩa là mọi thay đổi đối với đều ảnh hưởng trực tiếp đến . newSetting project.setting newSetting project.setting Hiểu sức mạnh của tài liệu tham khảo Ví dụ này nhấn mạnh một khái niệm quan trọng trong JavaScript: làm việc với các đối tượng có nghĩa là làm việc với các tham chiếu và khi bạn gán một đối tượng cho một biến, bạn đang gán một tham chiếu cho đối tượng đó. Bất kỳ sửa đổi nào bạn thực hiện thông qua tham chiếu đó đều được phản ánh trên tất cả các tham chiếu đến đối tượng đó. Hành vi này cho phép các cấu trúc dữ liệu phức tạp, được kết nối với nhau nhưng cũng yêu cầu quản lý cẩn thận để tránh các tác dụng phụ ngoài ý muốn. Trong câu chuyện của chúng tôi, quy trình hợp tác của Emily và Thomas minh họa rất hay về cách các tham chiếu đối tượng có thể phục vụ những nỗ lực sáng tạo trong mã hóa, cho phép phát triển năng động, chia sẻ các câu chuyện phức tạp—hoặc, theo thuật ngữ thực tế hơn, các cấu trúc dữ liệu phức tạp trong ứng dụng của bạn. Làm chủ việc sao chép đối tượng trong JavaScript: Bản sao nông so với bản sao sâu Khi làm việc với các đối tượng trong JavaScript, việc gán trực tiếp có thể dẫn đến những sửa đổi ngoài ý muốn do bản chất của việc sao chép tham chiếu. Tạo một bản sao của đối tượng cho phép thao tác an toàn mà không ảnh hưởng đến đối tượng ban đầu; bằng cách này, chúng tôi sẽ giảm thiểu những sửa đổi không chủ ý. Dựa trên nhu cầu và tình huống của bạn, bạn có thể chọn giữa bản sao nông và bản sao sâu. Kỹ thuật sao chép nông: : Phương thức này tạo một đối tượng mới bằng cách sao chép các thuộc tính từ nguồn sang đối tượng đích ( ). Điều quan trọng cần lưu ý là thực hiện một bản sao nông, có nghĩa là mọi đối tượng hoặc mảng lồng nhau đều được sao chép theo tham chiếu chứ không phải theo giá trị của chúng. Object.task {} Object.assign const original = { a: 1, b: { c: 2 } }; const copy = Object.assign({}, original); copy.bc = 3; // Affects both 'copy' and 'original' ): Tương tự như , toán tử trải rộng mở rộng các thuộc tính của đối tượng ban đầu thành một đối tượng mới, dẫn đến một bản sao nông. ( Toán tử trải rộng ... Object.assign const copyUsingSpread = { ...original }; copyUsingSpread.bc = 4; // Also affects the 'original' object Phương pháp sao chép sâu: và : Cách tiếp cận này tuần tự hóa đối tượng thành một chuỗi JSON, sau đó phân tích cú pháp lại thành một đối tượng mới. Nó tạo ra một bản sao sâu một cách hiệu quả nhưng không thể xử lý các hàm, đối tượng Ngày, không xác định và các giá trị không thể tuần tự hóa khác. JSON.parse JSON.stringify const deepCopy = JSON.parse(JSON.stringify(original)); deepCopy.bc = 5; // Does not affect the 'original' object : Đối với các kịch bản phức tạp hơn, các thư viện như Lodash cung cấp (ví dụ: ) có thể sao chép sâu các đối tượng, bao gồm xử lý các loại dữ liệu khác nhau hiệu quả hơn các phương thức JSON. Thư viện các hàm _.cloneDeep() Ứng dụng thực tế Hãy xem lại ví dụ về dự án viết bài hợp tác của chúng tôi: const project = { title: "Adventures in Code", characters: { protagonist: { name: "Alex", traits: ["brave", "curious"] } }, setting: { location: "Virtual World", era: "future" } }; Để sửa đổi dự án mà không ảnh hưởng đến bản gốc: : Sử dụng để thêm ký tự mới hoặc thay đổi cài đặt một cách an toàn. Đối với Bản sao sâu JSON.parse(JSON.stringify(project)) : Sử dụng hoặc toán tử trải rộng cho các thay đổi cấp cao nhất trong đó các cấu trúc lồng nhau không phải là vấn đề đáng lo ngại. Đối với Bản sao nông Object.assign Việc lựa chọn giữa một bản sao nông và sâu tùy thuộc vào độ phức tạp của đối tượng và các yêu cầu cụ thể khi thao tác của bạn. Bản sao nông nhanh hơn và phù hợp hơn với các đối tượng đơn giản, trong khi bản sao sâu là cần thiết cho các đối tượng có cấu trúc lồng nhau, đảm bảo đối tượng gốc không bị ảnh hưởng. Bằng cách hiểu và áp dụng các kỹ thuật xử lý này, bạn có thể tự tin điều hướng hệ thống dựa trên tham chiếu của JavaScript, đảm bảo các thao tác dữ liệu của bạn là chính xác và có chủ ý. Nguyên mẫu: Các chủ đề kế thừa ẩn trong JavaScript Giống như các nhân vật trong tiểu thuyết thừa hưởng những đặc điểm từ tổ tiên của họ, các đối tượng trong JavaScript kế thừa các thuộc tính và phương thức từ nguyên mẫu của chúng. Khái niệm này phản ánh kỹ năng kể chuyện mà Emily và Thomas đã khám phá trong cuốn tiểu thuyết "Adventures in Code" của họ. Để hiểu sâu hơn về nguyên mẫu, hãy tiếp tục câu chuyện của họ, giới thiệu một cung ký tự mới phản ánh mô hình kế thừa trong JavaScript. Trong thế giới tiểu thuyết của họ, tồn tại một người ghi chép huyền thoại được biết đến với cái tên "The Ancient Coder", nổi tiếng với trí tuệ và khả năng thông thạo ngôn ngữ. Emily và Thomas quyết định đặt nhân vật mới, "Coder Leo", dựa trên nhân vật thần thoại này, đại diện cho thế hệ lập trình viên tiếp theo. // The Ancient Coder, known for his profound wisdom const ancientCoder = { wisdom: 100 }; // Coder Leo, a young scribe in training const coderLeo = { __proto__: ancientCoder, age: 15 }; Trong câu chuyện này, Coder Leo được liên kết trực tiếp với The Ancient Coder thông qua một di sản ma thuật được gọi là "Chuỗi nguyên mẫu". Mối liên hệ này cho phép Leo khai thác trí tuệ của tổ tiên mình. console.log(coderLeo.wisdom); // 100 Nhờ chuỗi nguyên mẫu, Coder Leo có thể tiếp cận trí tuệ của The Ancient Coder dù anh ta còn trẻ. Nhưng điều gì sẽ xảy ra khi họ gặp phải thử thách hoặc đặc điểm mà The Ancient Coder không có? console.log(coderLeo.courage); // undefined Tình huống này minh họa một nguyên tắc chính của hệ thống nguyên mẫu của JavaScript: nếu không tìm thấy thuộc tính trên đối tượng, JavaScript sẽ tra cứu chuỗi nguyên mẫu để tìm nó. Nếu thuộc tính vẫn không được tìm thấy, sẽ được trả về, biểu thị sự vắng mặt của đặc điểm đó. undefined Để tiếp tục câu chuyện của mình, Emily và Thomas khám phá cách có thể thêm những đặc điểm độc đáo vào con cháu, giúp phân biệt họ với tổ tiên của họ: // Introducing a unique trait to Coder Leo coderLeo.courage = 50; console.log(ancientCoder.courage); // undefined console.log(coderLeo.courage); // 50 Tại đây, Coder Leo phát triển đức tính dũng cảm, khác biệt với The Ancient Coder. Thay đổi này không làm thay đổi các thuộc tính của The Ancient Coder, minh họa cách các đối tượng (hoặc ký tự) có thể phát triển độc lập với nguyên mẫu (hoặc tổ tiên) của chúng, nhờ vào tính chất động của JavaScript. Câu chuyện này trong câu chuyện không chỉ thúc đẩy cuốn tiểu thuyết của Emily và Thomas mà còn làm sáng tỏ sự kế thừa dựa trên nguyên mẫu của JavaScript. Giống như các nhân vật trong tiểu thuyết, đồ vật có thể thừa hưởng những đặc điểm từ tổ tiên của chúng. Tuy nhiên, họ cũng có khả năng tạo ra con đường riêng của mình, phát triển những đặc tính độc đáo phản ánh hành trình cá nhân của họ. Phép thuật tiết lộ: Sức mạnh của nguyên mẫu và phương pháp tích hợp Khi Emily và Thomas tìm hiểu sâu hơn về cuốn tiểu thuyết "Những cuộc phiêu lưu trong mật mã", họ tình cờ đọc được một chương bí ẩn: Sách Protos cổ xưa. Họ phát hiện ra rằng cuốn sách này không chỉ là một công cụ cốt truyện mà còn là một phép ẩn dụ để hiểu các nguyên mẫu và các phương thức tích hợp trong JavaScript — những khái niệm sẽ bổ sung thêm một lớp phép thuật vào thế giới câu chuyện của họ và sự hiểu biết của họ về mã hóa. Trong Scriptsville, bối cảnh hư cấu trong tiểu thuyết của họ, mọi nhân vật và đồ vật đều được thấm nhuần các khả năng từ Tome of Protos. Cuốn sách kỳ diệu này là nguồn gốc của mọi kiến thức và kỹ năng, giống như nguyên mẫu trong JavaScript mà từ đó các đối tượng kế thừa các thuộc tính và phương thức. // A seemingly ordinary quill in Scriptsville const quill = {}; Emily, thông qua nhân vật Ellie, khám phá chiếc bút lông này và phát hiện ra rằng nó được liên kết với Tome of Protos thông qua một sợi dây ma thuật—một sự tương tự trực tiếp với thuộc tính trong các đối tượng JavaScript, kết nối chúng với nguyên mẫu của chúng. __proto__ console.log(quill.__proto__); // Reveals the Tome's ancient scripts! Tiết lộ này cho phép Ellie tiếp cận trí tuệ của Tome, bao gồm khả năng gọi và , thể hiện các phương thức tích hợp sẵn của JavaScript được kế thừa từ nguyên mẫu Object. hasOwnProperty toString Sau đó, câu chuyện giới thiệu nhân vật của Thomas, Master Donovan, một thợ làm bánh nổi tiếng với những chiếc bánh rán đầy mê hoặc. Muốn chia sẻ năng khiếu ẩm thực của mình, Donovan tạo ra một câu thần chú, giống như việc xác định hàm xây dựng trong JavaScript: function EnchantedDoughnut() { this.flavor = "magic"; } EnchantedDoughnut.prototype.eat = function() { console.log("Tastes like enchantment!"); }; Mỗi chiếc bánh rán do Donovan tạo ra đều mang bản chất mê hoặc, cho phép bất cứ ai ăn chúng đều có thể trải nghiệm phép thuật. Phần này của câu chuyện minh họa cách các đối tượng được tạo bằng hàm xây dựng trong JavaScript kế thừa các phương thức từ nguyên mẫu của hàm tạo, giống như bánh rán của Donovan thừa hưởng khả năng ăn được. Khi Scriptsville phát triển, phép thuật của nó cũng phát triển, chuyển từ các phép thuật cổ xưa sang nghệ thuật cú pháp giai cấp hiện đại. Emily và Thomas hình dung lại kỹ năng của Donovan bằng cú pháp mới, làm cho phép thuật của anh ấy dễ tiếp cận hơn và phù hợp với các phương pháp hiện đại về JavaScript: class ModernEnchantedDoughnut { constructor() { this.flavor = "modern magic"; } eat() { console.log("Tastes like modern enchantment!"); } } Quá trình chuyển đổi này không chỉ cập nhật nghệ thuật làm bánh của Donovan mà còn phản ánh sự phát triển của JavaScript, làm nổi bật sự sang trọng và hiệu quả của cú pháp lớp trong khi vẫn bảo tồn tính kế thừa dựa trên nguyên mẫu cơ bản. Chúng ta đã học được gì từ Emily và Thomas? Hành trình tạo ra "Adventures in Code" của Emily và Thomas trở thành một câu chuyện ngụ ngôn hấp dẫn để tìm hiểu các nguyên mẫu, phương pháp tích hợp và sự phát triển của chính JavaScript. Thông qua các nhân vật và câu chuyện của mình, họ làm sáng tỏ các khái niệm phức tạp theo cách hấp dẫn và sâu sắc, cho thấy rằng mọi đối tượng và ký tự, giống như mọi đối tượng JavaScript, đều là một phần của tấm thảm lớn hơn, có liên kết với nhau về sự kế thừa và đổi mới. Câu chuyện của họ nhấn mạnh một sự thật cơ bản trong cả cách kể chuyện và lập trình: hiểu về quá khứ là điều cần thiết để làm chủ hiện tại và đổi mới cho tương lai. Thế giới kỳ diệu của Scriptsville, với những cuốn sách cổ xưa, những chiếc bánh rán đầy mê hoặc và phép thuật hiện đại, đóng vai trò là bối cảnh sống động để khám phá chiều sâu của hệ thống nguyên mẫu của JavaScript và sức mạnh của sự kế thừa. Tiện ích kỳ diệu của Scriptsville: Phù phép các đồ vật và đảm bảo sự hài hòa Khi Emily và Thomas tìm hiểu sâu hơn về cuốn tiểu thuyết Adventures in Code của mình, họ phát hiện ra nhu cầu về cách quản lý thế giới phức tạp chứa đầy các nhân vật, bối cảnh và vật phẩm ma thuật. Họ tìm đến Ellie, một người ghi chép thông thái đến từ Scriptsville, được biết đến với chuyên môn trong việc mê hoặc các đồ vật và đảm bảo sự hài hòa trên khắp vùng đất. Sự mê hoặc của những con đường: Đảm bảo thực tế lồng nhau Ellie đã chia sẻ với họ một công thức kỳ diệu, , có khả năng đảm bảo sự tồn tại của các vương quốc lồng nhau trong thế giới của họ: ensureObjectPath function ensureObjectPath({obj, path}) { path.split('.').reduce((acc, part) => { if (!acc[part]) acc[part] = {}; return acc[part]; }, obj); return obj; } // Ensuring the path to a hidden forest in their novel const world = {}; ensureObjectPath({obj: world, path: 'hidden.forest.clearing'}); console.log(world); // Outputs: { hidden: { forest: { clearing: {} } } } Ellie giải thích rằng phép thuật này cho phép họ tạo ra bất kỳ vị trí nào trong vũ trụ trong tiểu thuyết của họ, đảm bảo rằng mỗi nhân vật có thể bắt tay vào thực hiện nhiệm vụ của mình mà không sợ mạo hiểm vào những cõi không tồn tại. Cuộn các yếu tố bắt buộc: Đảm bảo yếu tố cần thiết của nhân vật Hơn nữa, Ellie đã giới thiệu cho họ một câu thần chú khác, , được thiết kế để đảm bảo rằng mọi nhân vật đều sở hữu những thuộc tính thiết yếu cần thiết cho cuộc hành trình của họ: checkForRequiredKeys const REQUIRED_KEYS = ['age', 'address', 'gender']; function checkForRequiredKeys(obj) { REQUIRED_KEYS.forEach(key => { if (!Object.hasOwn(obj, key)) { obj[key] = {}; } }); } // Ensuring every character has the essential attributes const character = { name: "Ellie" }; checkForRequiredKeys(character); console.log(character); // Outputs: { name: "Ellie", age: {}, address: {}, gender: {} } Phép thuật này cho phép Emily và Thomas dệt nên sự phức tạp vào các nhân vật của họ, đảm bảo không có chi tiết nào bị bỏ qua, bất kể câu chuyện của họ có phức tạp đến đâu. Tiếng vang của Scriptsville: Từ mê hoặc đến giác ngộ Khi câu chuyện của họ mở ra, những câu thần chú mà Ellie chia sẻ không chỉ làm phong phú thêm "Những cuộc phiêu lưu trong mã" mà còn làm sáng tỏ các nguyên tắc cơ bản của thao tác và cấu trúc đối tượng trong JavaScript. Giống như câu thần chú cho phép tạo ra các thực tế lồng nhau, các nhà phát triển JavaScript sử dụng sức mạnh tương tự để cấu trúc dữ liệu trong ứng dụng của họ. ensureObjectPath Tương tự như vậy, câu thần chú phản ánh các phương pháp lập trình phòng thủ cần thiết để đảm bảo tính toàn vẹn dữ liệu. checkForRequiredKeys Phần kết luận Trong chuyến lang thang của chúng tôi qua các vương quốc đầy mê hoặc của Scriptsville, Emily, Thomas, Ellie và một loạt sinh vật huyền bí đã là bạn đồng hành của chúng tôi, tiết lộ bí mật của JavaScript theo cách quyến rũ như chính vùng đất này. Thông qua những câu chuyện phiêu lưu và khám phá, chúng tôi đã đào sâu vào trọng tâm của JavaScript, từ cú pháp đơn giản nhất đến các công cụ phức tạp hoạt động bên dưới bề mặt của nó. Đó là một cuộc hành trình không giống bất kỳ cuộc hành trình nào khác, nơi sự kỳ diệu của cách kể chuyện kết hợp với logic của lập trình, tiết lộ những điều kỳ diệu nhiều lớp trong vũ trụ JavaScript. : Chúng tôi bắt đầu bằng cách phân biệt giữa loại nguyên thủy và loại đối tượng của JavaScript, tiết lộ cách các khối xây dựng này hình thành nền tảng của ngôn ngữ. Thông qua việc khám phá các nhân vật của mình, chúng tôi hiểu được bản chất bất biến của nguyên thủy và tính chất năng động, dựa trên tham chiếu của các đối tượng. Loại nguyên thủy và loại đối tượng : Chúng ta đã tìm hiểu về cách tạo đối tượng, so sánh các giá trị và các sắc thái của sự bằng nhau trong JavaScript. Các tạo tác và phép thuật ma thuật trong Scriptsville đã làm sáng tỏ tầm quan trọng của việc hiểu sự bình đẳng nghiêm ngặt ( ), sự bình đẳng lỏng lẻo ( ) và việc sử dụng để so sánh các sắc thái. Tạo và so sánh các đối tượng === == Object.is : Đi sâu vào các thuộc tính đối tượng, chúng tôi đã khám phá ra sức mạnh của ký hiệu dấu chấm và dấu ngoặc trong việc truy cập và sửa đổi các thuộc tính, cùng với vai trò then chốt của nguyên mẫu trong kế thừa đối tượng. Thuộc tính đối tượng và nguyên mẫu Những câu chuyện về những sợi dây thừa kế và những cuộn giấy đầy mê hoặc ở Scriptsville đã làm sống động chuỗi nguyên mẫu, cho thấy cách các vật thể kế thừa và ghi đè các đặc điểm. : Cuối cùng, chúng tôi đã khám phá các hàm tiện ích thao tác cấu trúc đối tượng và đảm bảo tính toàn vẹn dữ liệu. Các công thức kỳ diệu được Ellie chia sẻ, chẳng hạn như và , đã thể hiện các kỹ thuật thực tế để làm việc với các đối tượng lồng nhau và đảm bảo sự hiện diện của các thuộc tính thiết yếu. Hàm tiện ích cho đối tượng ensureObjectPath checkForRequiredKeys Qua lăng kính tường thuật của Scriptsville, chúng ta đã thấy các tính năng của JavaScript có thể vừa kỳ diệu vừa logic như thế nào, mang đến cho các nhà phát triển một sân chơi rộng lớn để sáng tạo và giải quyết vấn đề. Những câu chuyện đầy mê hoặc của Scriptsville không chỉ là những câu chuyện; chúng là những ẩn dụ cho tính nghệ thuật của lập trình, nêu bật tầm quan trọng của việc hiểu các nguyên tắc cốt lõi của JavaScript để tạo ra thế giới kỹ thuật số của chúng ta một cách thuần thục. Khi chúng ta khép lại cuốn sách về cuộc hành trình này, hãy nhớ rằng cuộc phiêu lưu không kết thúc ở đây. Mỗi khái niệm chúng tôi đã khám phá là bước đệm để hiểu sâu hơn và nắm vững JavaScript. Giống như Emily và Thomas dệt nên câu chuyện "Những cuộc phiêu lưu trong mật mã", bạn cũng có thể tạo ra những câu chuyện, những đồ vật bị phù phép và những thế giới ma thuật của mình trong vũ trụ lập trình vô biên.