From e9f06ba851431fd6ba1a5f17a1ade89f1fe9b3e9 Mon Sep 17 00:00:00 2001 From: I_am_Vietnam <91591390+ImVietnam@users.noreply.github.com> Date: Thu, 2 Mar 2023 11:18:00 +0700 Subject: [PATCH 01/26] Update article.md --- .../06-constructor-new/article.md | 142 +++++++++--------- 1 file changed, 71 insertions(+), 71 deletions(-) diff --git a/1-js/04-object-basics/06-constructor-new/article.md b/1-js/04-object-basics/06-constructor-new/article.md index 5f8709ae1..e66cf7745 100644 --- a/1-js/04-object-basics/06-constructor-new/article.md +++ b/1-js/04-object-basics/06-constructor-new/article.md @@ -1,17 +1,17 @@ -# Constructor, operator "new" +# Hàm tạo, toán tử "mới" -The regular `{...}` syntax allows to create one object. But often we need to create many similar objects, like multiple users or menu items and so on. +Cú pháp `{...}` thông thường cho phép tạo một đối tượng. Nhưng thường thì chúng ta cần tạo nhiều đối tượng tương tự, như nhiều người dùng hoặc mục menu, v.v. -That can be done using constructor functions and the `"new"` operator. +Điều đó có thể được thực hiện bằng cách sử dụng hàm khởi tạo và toán tử `"new"`. -## Constructor function +## Hàm tạo -Constructor functions technically are regular functions. There are two conventions though: +Hàm xây dựng về mặt kỹ thuật là các hàm thông thường. Có hai quy ước mặc dù: -1. They are named with capital letter first. -2. They should be executed only with `"new"` operator. +1. Chúng được đặt tên bằng chữ in hoa đầu tiên. +2. Chúng chỉ nên được thực thi với toán tử `"new"`. -For instance: +Ví dụ: ```js run function User(name) { @@ -27,13 +27,13 @@ alert(user.name); // Jack alert(user.isAdmin); // false ``` -When a function is executed with `new`, it does the following steps: +Khi một chức năng được thực thi với `new`, nó sẽ thực hiện các bước sau: -1. A new empty object is created and assigned to `this`. -2. The function body executes. Usually it modifies `this`, adds new properties to it. -3. The value of `this` is returned. +1. Một đối tượng trống mới được tạo và gán cho `this`. +2. Thân hàm thực thi. Thông thường, nó sửa đổi `this`, thêm các thuộc tính mới cho nó. +3. Giá trị của `this` được trả về. -In other words, `new User(...)` does something like: +Nói cách khác, `new User(...)` thực hiện điều gì đó như: ```js function User(name) { @@ -41,17 +41,17 @@ function User(name) { // this = {}; (implicitly) */!* - // add properties to this + // thêm thuộc tính vào đây this.name = name; this.isAdmin = false; *!* - // return this; (implicitly) + // trả về cái này; (mặc nhiên) */!* } ``` -So `let user = new User("Jack")` gives the same result as: +Vì vậy, `let user = new User("Jack")` cho kết quả tương tự như: ```js let user = { @@ -60,148 +60,148 @@ let user = { }; ``` -Now if we want to create other users, we can call `new User("Ann")`, `new User("Alice")` and so on. Much shorter than using literals every time, and also easy to read. +Bây giờ nếu chúng ta muốn tạo những người dùng khác, chúng ta có thể gọi `new User("Ann")`, `new User("Alice")`, v.v. Ngắn hơn nhiều so với việc luôn sử dụng chữ và cũng dễ đọc. -That's the main purpose of constructors -- to implement reusable object creation code. +Đó là mục đích chính của hàm tạo -- để triển khai mã tạo đối tượng có thể tái sử dụng. -Let's note once again -- technically, any function can be used as a constructor. That is: any function can be run with `new`, and it will execute the algorithm above. The "capital letter first" is a common agreement, to make it clear that a function is to be run with `new`. +Hãy lưu ý một lần nữa -- về mặt kỹ thuật, bất kỳ hàm nào cũng có thể được sử dụng làm hàm tạo. Đó là: bất kỳ chức năng nào cũng có thể được chạy với `new` và nó sẽ thực thi thuật toán ở trên. "Chữ viết hoa trước" là một thỏa thuận phổ biến, để làm rõ rằng một chức năng sẽ được chạy với `new`. ````smart header="new function() { ... }" -If we have many lines of code all about creation of a single complex object, we can wrap them in constructor function, like this: +Nếu chúng ta có nhiều dòng mã về việc tạo một đối tượng phức tạp duy nhất, chúng ta có thể gói chúng trong hàm tạo, như sau: ```js let user = new function() { this.name = "John"; this.isAdmin = false; - // ...other code for user creation - // maybe complex logic and statements - // local variables etc + // ...... mã khác để tạo người dùng + // có thể là logic và câu lệnh phức tạp + // biến cục bộ, v.v. }; ``` -The constructor can't be called again, because it is not saved anywhere, just created and called. So this trick aims to encapsulate the code that constructs the single object, without future reuse. +Hàm tạo không thể được gọi lại vì nó không được lưu ở bất kỳ đâu, chỉ được tạo và gọi. Vì vậy, thủ thuật này nhằm mục đích đóng gói mã xây dựng một đối tượng mà không sử dụng lại trong tương lai. ```` -## Constructor mode test: new.target +## Kiểm tra chế độ hàm tạo: new.target -```smart header="Advanced stuff" -The syntax from this section is rarely used, skip it unless you want to know everything. +```smart header="Nội dung nâng cao" +Cú pháp từ phần này hiếm khi được sử dụng, hãy bỏ qua trừ khi bạn muốn biết mọi thứ. ``` -Inside a function, we can check whether it was called with `new` or without it, using a special `new.target` property. +Bên trong một hàm, chúng ta có thể kiểm tra xem nó có được gọi với `new` hay không, bằng cách sử dụng thuộc tính `new.target` đặc biệt. -It is undefined for regular calls and equals the function if called with `new`: +Nó không được xác định cho các cuộc gọi thông thường và bằng hàm nếu được gọi bằng `new`: ```js run function User() { alert(new.target); } -// without "new": +// không có "new": *!* User(); // undefined */!* -// with "new": +// với "new": *!* -new User(); // function User { ... } +new User(); // hàm User { ... } */!* ``` -That can be used inside the function to know whether it was called with `new`, "in constructor mode", or without it, "in regular mode". +Điều đó có thể được sử dụng bên trong hàm để biết liệu nó được gọi với `new`, "ở chế độ hàm tạo" hay không có nó, "ở chế độ thông thường". -We can also make both `new` and regular calls to do the same, like this: +Chúng tôi cũng có thể thực hiện cả lệnh gọi `new` và thông thường để làm như vậy, như sau: ```js run function User(name) { - if (!new.target) { // if you run me without new - return new User(name); // ...I will add new for you + if (!new.target) { // nếu bạn chạy tôi mà không có mới + return new User(name); // ...Tôi sẽ thêm mới cho bạn } this.name = name; } -let john = User("John"); // redirects call to new User +let john = User("John"); // chuyển hướng cuộc gọi đến new User alert(john.name); // John ``` -This approach is sometimes used in libraries to make the syntax more flexible. So that people may call the function with or without `new`, and it still works. +Cách tiếp cận này đôi khi được sử dụng trong các thư viện để làm cho cú pháp linh hoạt hơn. Vì vậy, mọi người có thể gọi hàm có hoặc không có `new`, và nó vẫn hoạt động. -Probably not a good thing to use everywhere though, because omitting `new` makes it a bit less obvious what's going on. With `new` we all know that the new object is being created. +Tuy nhiên, có lẽ không phải là một điều tốt để sử dụng ở mọi nơi, bởi vì việc bỏ qua `new` làm cho nó ít rõ ràng hơn về những gì đang diễn ra. Với `mới`, tất cả chúng ta đều biết rằng đối tượng mới đang được tạo. -## Return from constructors +## Trả về từ hàm tạo -Usually, constructors do not have a `return` statement. Their task is to write all necessary stuff into `this`, and it automatically becomes the result. +Thông thường, hàm tạo không có câu lệnh `return`. Nhiệm vụ của chúng là viết tất cả nội dung cần thiết vào `this`, và nó sẽ tự động trở thành kết quả. -But if there is a `return` statement, then the rule is simple: +Nhưng nếu có câu lệnh `return`, thì quy tắc rất đơn giản: -- If `return` is called with an object, then the object is returned instead of `this`. -- If `return` is called with a primitive, it's ignored. +- Nếu `return` được gọi với một đối tượng, thì đối tượng đó sẽ được trả về thay vì `this`. +- Nếu `return` được gọi với kiểu nguyên thủy, thì nó sẽ bị bỏ qua. -In other words, `return` with an object returns that object, in all other cases `this` is returned. +Nói cách khác, `return` với một đối tượng sẽ trả về đối tượng đó, trong tất cả các trường hợp khác, `this` được trả về. -For instance, here `return` overrides `this` by returning an object: +Chẳng hạn, ở đây `return` ghi đè `this` bằng cách trả về một đối tượng: ```js run function BigUser() { this.name = "John"; - return { name: "Godzilla" }; // <-- returns this object + return { name: "Godzilla" }; // <-- trả về đối tượng này } -alert( new BigUser().name ); // Godzilla, got that object +alert( new BigUser().name ); // Godzilla, có đối tượng đó ``` -And here's an example with an empty `return` (or we could place a primitive after it, doesn't matter): +Và đây là một ví dụ với một `return` trống (hoặc chúng ta có thể đặt một nguyên hàm sau nó, không thành vấn đề): ```js run function SmallUser() { this.name = "John"; - return; // <-- returns this + return; // <-- trả về cái này } alert( new SmallUser().name ); // John ``` -Usually constructors don't have a `return` statement. Here we mention the special behavior with returning objects mainly for the sake of completeness. +Thông thường các hàm tạo không có câu lệnh `return`. Ở đây chúng ta đề cập đến hành vi đặc biệt với các đối tượng trả về chủ yếu vì mục đích hoàn chỉnh. -````smart header="Omitting parentheses" -By the way, we can omit parentheses after `new`, if it has no arguments: +````smart header="Bỏ qua dấu ngoặc đơn" +Nhân tiện, chúng ta có thể bỏ qua dấu ngoặc đơn sau `new`, nếu nó không có đối số: ```js -let user = new User; // <-- no parentheses -// same as +let user = new User; // <-- không có dấu ngoặc đơn +// giống như let user = new User(); ``` -Omitting parentheses here is not considered a "good style", but the syntax is permitted by specification. +Bỏ qua dấu ngoặc đơn ở đây không được coi là "phong cách tốt", nhưng cú pháp được cho phép theo thông số kỹ thuật. ```` -## Methods in constructor +## Các phương thức trong hàm tạo -Using constructor functions to create objects gives a great deal of flexibility. The constructor function may have parameters that define how to construct the object, and what to put in it. +Việc sử dụng các hàm tạo để tạo các đối tượng mang lại rất nhiều tính linh hoạt. Hàm tạo có thể có các tham số xác định cách tạo đối tượng và những gì cần đặt trong đó. -Of course, we can add to `this` not only properties, but methods as well. +Tất nhiên, chúng ta có thể thêm vào `this` không chỉ các thuộc tính mà cả các phương thức. -For instance, `new User(name)` below creates an object with the given `name` and the method `sayHi`: +Chẳng hạn, `new User(name)` bên dưới tạo một đối tượng với `name` đã cho và phương thức `sayHi`: ```js run function User(name) { this.name = name; this.sayHi = function() { - alert( "My name is: " + this.name ); + alert( "Tên tôi là: " + this.name ); }; } *!* let john = new User("John"); -john.sayHi(); // My name is: John +john.sayHi(); // Tên tôi là: John */!* /* @@ -212,19 +212,19 @@ john = { */ ``` -To create complex objects, there's a more advanced syntax, [classes](info:classes), that we'll cover later. +Để tạo các đối tượng phức tạp, có một cú pháp nâng cao hơn, [classes](info:classes), chúng ta sẽ đề cập sau. -## Summary +## Bản tóm tắt -- Constructor functions or, briefly, constructors, are regular functions, but there's a common agreement to name them with capital letter first. -- Constructor functions should only be called using `new`. Such a call implies a creation of empty `this` at the start and returning the populated one at the end. +- Các hàm khởi tạo hay ngắn gọn, hàm tạo là các hàm thông thường, nhưng có một thỏa thuận chung là đặt tên chúng bằng chữ in hoa trước. +- Hàm tạo chỉ nên được gọi bằng cách sử dụng `new`. Một cuộc gọi như vậy ngụ ý việc tạo ra `this` trống ở đầu và trả về cái được điền ở cuối. -We can use constructor functions to make multiple similar objects. +Chúng ta có thể sử dụng các hàm tạo để tạo nhiều đối tượng tương tự. -JavaScript provides constructor functions for many built-in language objects: like `Date` for dates, `Set` for sets and others that we plan to study. +JavaScript cung cấp các hàm tạo cho nhiều đối tượng ngôn ngữ dựng sẵn: như `Date` cho ngày tháng, `Set` cho bộ và các đối tượng khác mà chúng ta dự định nghiên cứu. -```smart header="Objects, we'll be back!" -In this chapter we only cover the basics about objects and constructors. They are essential for learning more about data types and functions in the next chapters. +```smart header="Đối tượng, chúng ta sẽ trở lại!" +Trong chương này, chúng ta chỉ trình bày những điều cơ bản về đối tượng và hàm tạo. Chúng rất cần thiết để tìm hiểu thêm về các kiểu dữ liệu và chức năng trong các chương tiếp theo. -After we learn that, we return to objects and cover them in-depth in the chapters and . +Sau khi biết được điều đó, chúng ta quay lại các đối tượng và tìm hiểu sâu hơn về chúng trong các chương . ``` From 514c1d438fe17749fa5605a9b5b9b203430887b7 Mon Sep 17 00:00:00 2001 From: I_am_Vietnam <91591390+ImVietnam@users.noreply.github.com> Date: Thu, 2 Mar 2023 11:19:37 +0700 Subject: [PATCH 02/26] Update task.md --- .../06-constructor-new/1-two-functions-one-object/task.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/1-js/04-object-basics/06-constructor-new/1-two-functions-one-object/task.md b/1-js/04-object-basics/06-constructor-new/1-two-functions-one-object/task.md index 8c1fea8eb..10f585fa1 100644 --- a/1-js/04-object-basics/06-constructor-new/1-two-functions-one-object/task.md +++ b/1-js/04-object-basics/06-constructor-new/1-two-functions-one-object/task.md @@ -2,9 +2,9 @@ importance: 2 --- -# Two functions – one object +# Hai hàm – một đối tượng -Is it possible to create functions `A` and `B` such as `new A()==new B()`? +Có thể tạo các hàm `A` và `B` chẳng hạn như `new A()==new B()` không? ```js no-beautify function A() { ... } @@ -16,4 +16,4 @@ let b = new B; alert( a == b ); // true ``` -If it is, then provide an example of their code. +Nếu có, thì hãy cung cấp một ví dụ về mã của chúng. From 490f744b9d7a3d589469fc3bfd5da740f52a1fd6 Mon Sep 17 00:00:00 2001 From: I_am_Vietnam <91591390+ImVietnam@users.noreply.github.com> Date: Thu, 2 Mar 2023 11:20:05 +0700 Subject: [PATCH 03/26] Update solution.md --- .../1-two-functions-one-object/solution.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/1-js/04-object-basics/06-constructor-new/1-two-functions-one-object/solution.md b/1-js/04-object-basics/06-constructor-new/1-two-functions-one-object/solution.md index 7d8edd7ca..79f3457e7 100644 --- a/1-js/04-object-basics/06-constructor-new/1-two-functions-one-object/solution.md +++ b/1-js/04-object-basics/06-constructor-new/1-two-functions-one-object/solution.md @@ -1,9 +1,8 @@ -Yes, it's possible. +Vâng, nó có thể. -If a function returns an object then `new` returns it instead of `this`. - -So they can, for instance, return the same externally defined object `obj`: +Nếu một hàm trả về một đối tượng thì `new` sẽ trả về nó thay vì `this`. +Vì vậy, chẳng hạn, chúng có thể trả về cùng một đối tượng được xác định bên ngoài `obj`: ```js run no-beautify let obj = {}; From 95bcad114ee18bb67544e7e4a231a5ec57eafba9 Mon Sep 17 00:00:00 2001 From: I_am_Vietnam <91591390+ImVietnam@users.noreply.github.com> Date: Thu, 2 Mar 2023 11:46:51 +0700 Subject: [PATCH 04/26] Update task.md --- .../2-calculator-constructor/task.md | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/task.md b/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/task.md index 60e7c373e..6891d8819 100644 --- a/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/task.md +++ b/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/task.md @@ -2,15 +2,13 @@ importance: 5 --- -# Create new Calculator +# Tạo một Máy tính mới -Create a constructor function `Calculator` that creates objects with 3 methods: +Tạo hàm khởi tạo `Máy tính` để tạo đối tượng với 3 phương thức: -- `read()` asks for two values using `prompt` and remembers them in object properties. -- `sum()` returns the sum of these properties. -- `mul()` returns the multiplication product of these properties. - -For instance: +- `read()` yêu cầu hai giá trị bằng cách sử dụng `prompt` và ghi nhớ chúng trong thuộc tính đối tượng. +- `sum()` trả về tổng của các thuộc tính này. +- `mul()` trả về tích nhân của các thuộc tính này. ```js let calculator = new Calculator(); From a6bc053d06b1047690b05529f48a6e0190285d35 Mon Sep 17 00:00:00 2001 From: I_am_Vietnam <91591390+ImVietnam@users.noreply.github.com> Date: Thu, 2 Mar 2023 11:47:18 +0700 Subject: [PATCH 05/26] Update solution.md --- .../06-constructor-new/2-calculator-constructor/solution.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/solution.md b/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/solution.md index 86bb65416..320ba447b 100644 --- a/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/solution.md +++ b/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/solution.md @@ -18,6 +18,6 @@ function Calculator() { let calculator = new Calculator(); calculator.read(); -alert( "Sum=" + calculator.sum() ); -alert( "Mul=" + calculator.mul() ); +alert( "Tổng=" + calculator.sum() ); +alert( "Tích=" + calculator.mul() ); ``` From 207baae966285ede333fd5bab4d39f974c64fbd8 Mon Sep 17 00:00:00 2001 From: I_am_Vietnam <91591390+ImVietnam@users.noreply.github.com> Date: Thu, 2 Mar 2023 11:48:52 +0700 Subject: [PATCH 06/26] Update task.md --- .../06-constructor-new/3-accumulator/task.md | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/1-js/04-object-basics/06-constructor-new/3-accumulator/task.md b/1-js/04-object-basics/06-constructor-new/3-accumulator/task.md index c2c44881e..ad6660cd5 100644 --- a/1-js/04-object-basics/06-constructor-new/3-accumulator/task.md +++ b/1-js/04-object-basics/06-constructor-new/3-accumulator/task.md @@ -2,26 +2,26 @@ importance: 5 --- -# Create new Accumulator +# Tạo bộ tích lũy mới -Create a constructor function `Accumulator(startingValue)`. +Tạo một hàm tạo `Accumulator(startingValue)`. -Object that it creates should: +Đối tượng mà nó tạo nên: -- Store the "current value" in the property `value`. The starting value is set to the argument of the constructor `startingValue`. -- The `read()` method should use `prompt` to read a new number and add it to `value`. +- Lưu trữ "giá trị hiện tại" trong thuộc tính `value`. Giá trị bắt đầu được đặt thành đối số của hàm tạo `startingValue`. +- Phương thức `read()` nên sử dụng `prompt` để đọc một số mới và thêm nó vào `giá trị`. -In other words, the `value` property is the sum of all user-entered values with the initial value `startingValue`. +Nói cách khác, thuộc tính `value` là tổng của tất cả các giá trị do người dùng nhập với giá trị ban đầu là `startingValue`. -Here's the demo of the code: +Đây là bản demo của mã: ```js -let accumulator = new Accumulator(1); // initial value 1 +let accumulator = new Accumulator(1); // giá trị ban đầu 1 accumulator.read(); // adds the user-entered value -accumulator.read(); // adds the user-entered value +accumulator.read(); // thêm giá trị do người dùng nhập -alert(accumulator.value); // shows the sum of these values +alert(accumulator.value); // hiển thị tổng của các giá trị này ``` [demo] From ab342494692fcb8c26cb636f61bef28c1ae9e874 Mon Sep 17 00:00:00 2001 From: I_am_Vietnam <91591390+ImVietnam@users.noreply.github.com> Date: Thu, 2 Mar 2023 11:49:34 +0700 Subject: [PATCH 07/26] Update solution.md --- .../06-constructor-new/3-accumulator/solution.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/04-object-basics/06-constructor-new/3-accumulator/solution.md b/1-js/04-object-basics/06-constructor-new/3-accumulator/solution.md index eb145e79d..4d77c105e 100644 --- a/1-js/04-object-basics/06-constructor-new/3-accumulator/solution.md +++ b/1-js/04-object-basics/06-constructor-new/3-accumulator/solution.md @@ -5,7 +5,7 @@ function Accumulator(startingValue) { this.value = startingValue; this.read = function() { - this.value += +prompt('How much to add?', 0); + this.value += +prompt('Cộng vào bao nhiêu?', 0); }; } From 4e8eb71e022f925e87c35ff09682d985fa6883ef Mon Sep 17 00:00:00 2001 From: I_am_Vietnam <91591390+ImVietnam@users.noreply.github.com> Date: Fri, 3 Mar 2023 08:31:49 +0700 Subject: [PATCH 08/26] Update article.md --- 1-js/04-object-basics/06-constructor-new/article.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/1-js/04-object-basics/06-constructor-new/article.md b/1-js/04-object-basics/06-constructor-new/article.md index e66cf7745..98096cd04 100644 --- a/1-js/04-object-basics/06-constructor-new/article.md +++ b/1-js/04-object-basics/06-constructor-new/article.md @@ -64,7 +64,7 @@ Bây giờ nếu chúng ta muốn tạo những người dùng khác, chúng ta Đó là mục đích chính của hàm tạo -- để triển khai mã tạo đối tượng có thể tái sử dụng. -Hãy lưu ý một lần nữa -- về mặt kỹ thuật, bất kỳ hàm nào cũng có thể được sử dụng làm hàm tạo. Đó là: bất kỳ chức năng nào cũng có thể được chạy với `new` và nó sẽ thực thi thuật toán ở trên. "Chữ viết hoa trước" là một thỏa thuận phổ biến, để làm rõ rằng một chức năng sẽ được chạy với `new`. +Hãy lưu ý một lần nữa -- về mặt kỹ thuật, bất kỳ hàm nào cũng có thể được sử dụng làm hàm tạo. Đó là: bất kỳ chức năng nào cũng có thể được chạy với `new` và nó sẽ thực thi thuật toán ở trên. "Chữ viết hoa trước" là một thỏa thuận phổ biến, để làm rõ rằng một hàm sẽ được chạy với `new`. ````smart header="new function() { ... }" Nếu chúng ta có nhiều dòng mã về việc tạo một đối tượng phức tạp duy nhất, chúng ta có thể gói chúng trong hàm tạo, như sau: @@ -111,7 +111,7 @@ new User(); // hàm User { ... } Điều đó có thể được sử dụng bên trong hàm để biết liệu nó được gọi với `new`, "ở chế độ hàm tạo" hay không có nó, "ở chế độ thông thường". -Chúng tôi cũng có thể thực hiện cả lệnh gọi `new` và thông thường để làm như vậy, như sau: +Chúng ta cũng có thể thực hiện cả lệnh gọi `new` và thông thường để làm như vậy, như sau: ```js run function User(name) { @@ -214,7 +214,7 @@ john = { Để tạo các đối tượng phức tạp, có một cú pháp nâng cao hơn, [classes](info:classes), chúng ta sẽ đề cập sau. -## Bản tóm tắt +## Tóm tắt - Các hàm khởi tạo hay ngắn gọn, hàm tạo là các hàm thông thường, nhưng có một thỏa thuận chung là đặt tên chúng bằng chữ in hoa trước. - Hàm tạo chỉ nên được gọi bằng cách sử dụng `new`. Một cuộc gọi như vậy ngụ ý việc tạo ra `this` trống ở đầu và trả về cái được điền ở cuối. From fbcd79216f37cbae5e317d5ea4b7079503a5a257 Mon Sep 17 00:00:00 2001 From: I_am_Vietnam <91591390+ImVietnam@users.noreply.github.com> Date: Wed, 7 Jun 2023 08:07:40 +0700 Subject: [PATCH 09/26] some fixes --- 1-js/04-object-basics/06-constructor-new/article.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/1-js/04-object-basics/06-constructor-new/article.md b/1-js/04-object-basics/06-constructor-new/article.md index 98096cd04..f2fde5a4d 100644 --- a/1-js/04-object-basics/06-constructor-new/article.md +++ b/1-js/04-object-basics/06-constructor-new/article.md @@ -1,4 +1,4 @@ -# Hàm tạo, toán tử "mới" +# Hàm tạo, toán tử "new" Cú pháp `{...}` thông thường cho phép tạo một đối tượng. Nhưng thường thì chúng ta cần tạo nhiều đối tượng tương tự, như nhiều người dùng hoặc mục menu, v.v. @@ -6,7 +6,7 @@ Cú pháp `{...}` thông thường cho phép tạo một đối tượng. Nhưng ## Hàm tạo -Hàm xây dựng về mặt kỹ thuật là các hàm thông thường. Có hai quy ước mặc dù: +Hàm tạo về mặt kỹ thuật là các hàm thông thường. Có hai quy ước mặc dù: 1. Chúng được đặt tên bằng chữ in hoa đầu tiên. 2. Chúng chỉ nên được thực thi với toán tử `"new"`. @@ -64,7 +64,7 @@ Bây giờ nếu chúng ta muốn tạo những người dùng khác, chúng ta Đó là mục đích chính của hàm tạo -- để triển khai mã tạo đối tượng có thể tái sử dụng. -Hãy lưu ý một lần nữa -- về mặt kỹ thuật, bất kỳ hàm nào cũng có thể được sử dụng làm hàm tạo. Đó là: bất kỳ chức năng nào cũng có thể được chạy với `new` và nó sẽ thực thi thuật toán ở trên. "Chữ viết hoa trước" là một thỏa thuận phổ biến, để làm rõ rằng một hàm sẽ được chạy với `new`. +Hãy lưu ý một lần nữa -- về mặt kỹ thuật, bất kỳ hàm nào cũng có thể được sử dụng làm hàm tạo. Đó là: bất kỳ hàm nào cũng có thể được chạy với `new` và nó sẽ thực thi thuật toán ở trên. "Chữ viết hoa trước" là một thỏa thuận phổ biến, để làm rõ rằng một hàm sẽ được chạy với `new`. ````smart header="new function() { ... }" Nếu chúng ta có nhiều dòng mã về việc tạo một đối tượng phức tạp duy nhất, chúng ta có thể gói chúng trong hàm tạo, như sau: @@ -128,7 +128,7 @@ alert(john.name); // John Cách tiếp cận này đôi khi được sử dụng trong các thư viện để làm cho cú pháp linh hoạt hơn. Vì vậy, mọi người có thể gọi hàm có hoặc không có `new`, và nó vẫn hoạt động. -Tuy nhiên, có lẽ không phải là một điều tốt để sử dụng ở mọi nơi, bởi vì việc bỏ qua `new` làm cho nó ít rõ ràng hơn về những gì đang diễn ra. Với `mới`, tất cả chúng ta đều biết rằng đối tượng mới đang được tạo. +Tuy nhiên, có lẽ không phải là một điều tốt để sử dụng ở mọi nơi, bởi vì việc bỏ qua `new` làm cho nó ít rõ ràng hơn về những gì đang diễn ra. Với `new`, tất cả chúng ta đều biết rằng đối tượng mới đang được tạo. ## Trả về từ hàm tạo @@ -212,7 +212,7 @@ john = { */ ``` -Để tạo các đối tượng phức tạp, có một cú pháp nâng cao hơn, [classes](info:classes), chúng ta sẽ đề cập sau. +Để tạo các đối tượng phức tạp, có một cú pháp nâng cao hơn, [các class](info:classes), chúng ta sẽ đề cập sau. ## Tóm tắt From 4e66985ad0298e6426ae2f9bf1a5d87d327b6b15 Mon Sep 17 00:00:00 2001 From: I_am_Vietnam <91591390+ImVietnam@users.noreply.github.com> Date: Wed, 7 Jun 2023 16:49:21 +0700 Subject: [PATCH 10/26] Update article.md --- 1-js/04-object-basics/06-constructor-new/article.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/1-js/04-object-basics/06-constructor-new/article.md b/1-js/04-object-basics/06-constructor-new/article.md index f2fde5a4d..b635c09cc 100644 --- a/1-js/04-object-basics/06-constructor-new/article.md +++ b/1-js/04-object-basics/06-constructor-new/article.md @@ -27,7 +27,7 @@ alert(user.name); // Jack alert(user.isAdmin); // false ``` -Khi một chức năng được thực thi với `new`, nó sẽ thực hiện các bước sau: +Khi một hàm được thực thi với `new`, nó sẽ thực hiện các bước sau: 1. Một đối tượng trống mới được tạo và gán cho `this`. 2. Thân hàm thực thi. Thông thường, nó sửa đổi `this`, thêm các thuộc tính mới cho nó. @@ -115,8 +115,8 @@ Chúng ta cũng có thể thực hiện cả lệnh gọi `new` và thông thư ```js run function User(name) { - if (!new.target) { // nếu bạn chạy tôi mà không có mới - return new User(name); // ...Tôi sẽ thêm mới cho bạn + if (!new.target) { // nếu bạn chạy tôi mà không có new + return new User(name); // ...Tôi sẽ thêm new cho bạn } this.name = name; @@ -137,7 +137,7 @@ Thông thường, hàm tạo không có câu lệnh `return`. Nhiệm vụ của Nhưng nếu có câu lệnh `return`, thì quy tắc rất đơn giản: - Nếu `return` được gọi với một đối tượng, thì đối tượng đó sẽ được trả về thay vì `this`. -- Nếu `return` được gọi với kiểu nguyên thủy, thì nó sẽ bị bỏ qua. +- Nếu `return` được gọi với nguyên hàm, thì nó sẽ bị bỏ qua. Nói cách khác, `return` với một đối tượng sẽ trả về đối tượng đó, trong tất cả các trường hợp khác, `this` được trả về. @@ -221,10 +221,10 @@ john = { Chúng ta có thể sử dụng các hàm tạo để tạo nhiều đối tượng tương tự. -JavaScript cung cấp các hàm tạo cho nhiều đối tượng ngôn ngữ dựng sẵn: như `Date` cho ngày tháng, `Set` cho bộ và các đối tượng khác mà chúng ta dự định nghiên cứu. +JavaScript cung cấp các hàm tạo cho nhiều đối tượng ngôn ngữ dựng sẵn: như `Date` cho ngày tháng, `Set` cho tập hợp và các đối tượng khác mà chúng ta dự định nghiên cứu. ```smart header="Đối tượng, chúng ta sẽ trở lại!" -Trong chương này, chúng ta chỉ trình bày những điều cơ bản về đối tượng và hàm tạo. Chúng rất cần thiết để tìm hiểu thêm về các kiểu dữ liệu và chức năng trong các chương tiếp theo. +Trong chương này, chúng ta chỉ trình bày những điều cơ bản về đối tượng và hàm tạo. Chúng rất cần thiết để tìm hiểu thêm về các kiểu dữ liệu và hàm trong các chương tiếp theo. Sau khi biết được điều đó, chúng ta quay lại các đối tượng và tìm hiểu sâu hơn về chúng trong các chương . ``` From 56d4a18ca67ab972ccff77d095ca2f944992dd7e Mon Sep 17 00:00:00 2001 From: I_am_Vietnam <91591390+ImVietnam@users.noreply.github.com> Date: Wed, 7 Jun 2023 16:50:17 +0700 Subject: [PATCH 11/26] Update task.md --- .../06-constructor-new/2-calculator-constructor/task.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/task.md b/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/task.md index 6891d8819..91fbf0bfe 100644 --- a/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/task.md +++ b/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/task.md @@ -14,8 +14,8 @@ Tạo hàm khởi tạo `Máy tính` để tạo đối tượng với 3 phươn let calculator = new Calculator(); calculator.read(); -alert( "Sum=" + calculator.sum() ); -alert( "Mul=" + calculator.mul() ); +alert( "Tổng=" + calculator.sum() ); +alert( "Tích=" + calculator.mul() ); ``` [demo] From 1b44feee3c05f6b51962f8407440ea74c83f83a1 Mon Sep 17 00:00:00 2001 From: I_am_Vietnam <91591390+ImVietnam@users.noreply.github.com> Date: Wed, 7 Jun 2023 16:51:21 +0700 Subject: [PATCH 12/26] Update test.js --- .../2-calculator-constructor/_js.view/test.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/_js.view/test.js b/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/_js.view/test.js index bba80e5c2..27fafeba5 100644 --- a/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/_js.view/test.js +++ b/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/_js.view/test.js @@ -1,8 +1,8 @@ -describe("calculator", function() { +describe("máy tính", function() { let calculator; before(function() { - sinon.stub(window, "prompt") + sinon.stub(window, "nhắc") prompt.onCall(0).returns("2"); prompt.onCall(1).returns("3"); @@ -11,16 +11,16 @@ describe("calculator", function() { calculator.read(); }); - it("the read method asks for two values using prompt and remembers them in object properties", function() { + it("phương thức đọc yêu cầu hai giá trị bằng nhắc và ghi nhớ chúng trong thuộc tính đối tượng", function() { assert.equal(calculator.a, 2); assert.equal(calculator.b, 3); }); - it("when 2 and 3 are entered, the sum is 5", function() { + it("khi nhập vào 2 và 3, tổng là 5", function() { assert.equal(calculator.sum(), 5); }); - it("when 2 and 3 are entered, the product is 6", function() { + it("khi nhập vào 2 và 3, tích là 6", function() { assert.equal(calculator.mul(), 6); }); From d984aa7e353ebf9e443aff9e6d7db6a7613aadb3 Mon Sep 17 00:00:00 2001 From: I_am_Vietnam <91591390+ImVietnam@users.noreply.github.com> Date: Wed, 7 Jun 2023 16:51:51 +0700 Subject: [PATCH 13/26] Update task.md --- 1-js/04-object-basics/06-constructor-new/3-accumulator/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/04-object-basics/06-constructor-new/3-accumulator/task.md b/1-js/04-object-basics/06-constructor-new/3-accumulator/task.md index ad6660cd5..1e92f344d 100644 --- a/1-js/04-object-basics/06-constructor-new/3-accumulator/task.md +++ b/1-js/04-object-basics/06-constructor-new/3-accumulator/task.md @@ -18,7 +18,7 @@ Nói cách khác, thuộc tính `value` là tổng của tất cả các giá tr ```js let accumulator = new Accumulator(1); // giá trị ban đầu 1 -accumulator.read(); // adds the user-entered value +accumulator.read(); // thêm giá trị do người dùng nhập accumulator.read(); // thêm giá trị do người dùng nhập alert(accumulator.value); // hiển thị tổng của các giá trị này From ca9aae5cd4ea273c0566e72015772622e1bb8aee Mon Sep 17 00:00:00 2001 From: I_am_Vietnam <91591390+ImVietnam@users.noreply.github.com> Date: Wed, 7 Jun 2023 16:52:32 +0700 Subject: [PATCH 14/26] Update test.js --- .../06-constructor-new/3-accumulator/_js.view/test.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/1-js/04-object-basics/06-constructor-new/3-accumulator/_js.view/test.js b/1-js/04-object-basics/06-constructor-new/3-accumulator/_js.view/test.js index a719cf45c..3b74e3e1f 100644 --- a/1-js/04-object-basics/06-constructor-new/3-accumulator/_js.view/test.js +++ b/1-js/04-object-basics/06-constructor-new/3-accumulator/_js.view/test.js @@ -1,27 +1,27 @@ -describe("Accumulator", function() { +describe("Bộ tích luỹ", function() { beforeEach(function() { - sinon.stub(window, "prompt") + sinon.stub(window, "nhắc") }); afterEach(function() { prompt.restore(); }); - it("initial value is the argument of the constructor", function() { + it("giá trị ban đầu là đối số của hàm tạo", function() { let accumulator = new Accumulator(1); assert.equal(accumulator.value, 1); }); - it("after reading 0, the value is 1", function() { + it("sau khi đọc 0, giá trị là 1", function() { let accumulator = new Accumulator(1); prompt.returns("0"); accumulator.read(); assert.equal(accumulator.value, 1); }); - it("after reading 1, the value is 2", function() { + it("sau khi đọc 1, giá trị là 2", function() { let accumulator = new Accumulator(1); prompt.returns("1"); accumulator.read(); From e04ca2dfd2f08fcc8c2312c6dd992a8f63c89fff Mon Sep 17 00:00:00 2001 From: I_am_Vietnam <91591390+ImVietnam@users.noreply.github.com> Date: Wed, 7 Jun 2023 16:52:49 +0700 Subject: [PATCH 15/26] Update solution.js --- .../06-constructor-new/3-accumulator/_js.view/solution.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/04-object-basics/06-constructor-new/3-accumulator/_js.view/solution.js b/1-js/04-object-basics/06-constructor-new/3-accumulator/_js.view/solution.js index 585287c54..01e1166d2 100644 --- a/1-js/04-object-basics/06-constructor-new/3-accumulator/_js.view/solution.js +++ b/1-js/04-object-basics/06-constructor-new/3-accumulator/_js.view/solution.js @@ -2,7 +2,7 @@ function Accumulator(startingValue) { this.value = startingValue; this.read = function() { - this.value += +prompt('How much to add?', 0); + this.value += +prompt('Thêm vào bao nhiêu?', 0); }; } From 0edfabb03921920836e35fa24533c66d00ffe5d3 Mon Sep 17 00:00:00 2001 From: I_am_Vietnam <91591390+ImVietnam@users.noreply.github.com> Date: Wed, 7 Jun 2023 16:53:06 +0700 Subject: [PATCH 16/26] Update solution.js --- .../06-constructor-new/3-accumulator/_js.view/solution.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/04-object-basics/06-constructor-new/3-accumulator/_js.view/solution.js b/1-js/04-object-basics/06-constructor-new/3-accumulator/_js.view/solution.js index 01e1166d2..6a8f8e375 100644 --- a/1-js/04-object-basics/06-constructor-new/3-accumulator/_js.view/solution.js +++ b/1-js/04-object-basics/06-constructor-new/3-accumulator/_js.view/solution.js @@ -2,7 +2,7 @@ function Accumulator(startingValue) { this.value = startingValue; this.read = function() { - this.value += +prompt('Thêm vào bao nhiêu?', 0); + this.value += +prompt('Cộng vào bao nhiêu?', 0); }; } From f6de07a6b92103e4d21cc0f2b54a33743cea0510 Mon Sep 17 00:00:00 2001 From: I_am_Vietnam <91591390+ImVietnam@users.noreply.github.com> Date: Wed, 7 Jun 2023 23:26:10 +0700 Subject: [PATCH 17/26] Update article.md --- 1-js/04-object-basics/06-constructor-new/article.md | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/1-js/04-object-basics/06-constructor-new/article.md b/1-js/04-object-basics/06-constructor-new/article.md index b635c09cc..b01c3edcf 100644 --- a/1-js/04-object-basics/06-constructor-new/article.md +++ b/1-js/04-object-basics/06-constructor-new/article.md @@ -1,6 +1,6 @@ # Hàm tạo, toán tử "new" -Cú pháp `{...}` thông thường cho phép tạo một đối tượng. Nhưng thường thì chúng ta cần tạo nhiều đối tượng tương tự, như nhiều người dùng hoặc mục menu, v.v. +Cú pháp `{...}` thông thường cho phép chúng ta tạo một đối tượng. Nhưng thường thì chúng ta cần tạo nhiều đối tượng tương tự, như nhiều người dùng hoặc mục menu, v.v. Điều đó có thể được thực hiện bằng cách sử dụng hàm khởi tạo và toán tử `"new"`. @@ -64,13 +64,14 @@ Bây giờ nếu chúng ta muốn tạo những người dùng khác, chúng ta Đó là mục đích chính của hàm tạo -- để triển khai mã tạo đối tượng có thể tái sử dụng. -Hãy lưu ý một lần nữa -- về mặt kỹ thuật, bất kỳ hàm nào cũng có thể được sử dụng làm hàm tạo. Đó là: bất kỳ hàm nào cũng có thể được chạy với `new` và nó sẽ thực thi thuật toán ở trên. "Chữ viết hoa trước" là một thỏa thuận phổ biến, để làm rõ rằng một hàm sẽ được chạy với `new`. +Hãy lưu ý một lần nữa -- về mặt kỹ thuật, bất kỳ hàm nào (ngoại trừ arrow function, vì chúng không có `this`) đều có thể được sử dụng làm hàm tạo. Nó có thể được chạy với `new` và nó sẽ thực thi thuật toán ở trên. "Chữ viết hoa trước" là một thỏa thuận phổ biến, để làm rõ rằng một hàm sẽ được chạy với `new`. ````smart header="new function() { ... }" -Nếu chúng ta có nhiều dòng mã về việc tạo một đối tượng phức tạp duy nhất, chúng ta có thể gói chúng trong hàm tạo, như sau: +Nếu chúng ta có nhiều dòng mã về việc tạo một đối tượng phức tạp duy nhất, chúng ta có thể gói chúng trong một hàm tạo được gọi ngay lập tức, như sau: ```js -let user = new function() { +// tạo một hàm và ngay lập tức gọi nó với new +let user = new function() { this.name = "John"; this.isAdmin = false; @@ -80,7 +81,7 @@ let user = new function() { }; ``` -Hàm tạo không thể được gọi lại vì nó không được lưu ở bất kỳ đâu, chỉ được tạo và gọi. Vì vậy, thủ thuật này nhằm mục đích đóng gói mã xây dựng một đối tượng mà không sử dụng lại trong tương lai. +Hàm tạo này không thể được gọi lại vì nó không được lưu ở bất kỳ đâu, chỉ được tạo và gọi. Vì vậy, thủ thuật này nhằm mục đích đóng gói mã xây dựng một đối tượng mà không sử dụng lại trong tương lai. ```` ## Kiểm tra chế độ hàm tạo: new.target From db7e32328a453ea734068b97daadffed8c20f5c6 Mon Sep 17 00:00:00 2001 From: I_am_Vietnam <91591390+ImVietnam@users.noreply.github.com> Date: Wed, 7 Jun 2023 23:26:51 +0700 Subject: [PATCH 18/26] Update task.md --- .../06-constructor-new/1-two-functions-one-object/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/04-object-basics/06-constructor-new/1-two-functions-one-object/task.md b/1-js/04-object-basics/06-constructor-new/1-two-functions-one-object/task.md index 10f585fa1..6ab6e7df0 100644 --- a/1-js/04-object-basics/06-constructor-new/1-two-functions-one-object/task.md +++ b/1-js/04-object-basics/06-constructor-new/1-two-functions-one-object/task.md @@ -4,7 +4,7 @@ importance: 2 # Hai hàm – một đối tượng -Có thể tạo các hàm `A` và `B` chẳng hạn như `new A()==new B()` không? +Có thể tạo các hàm `A` và `B` sao cho `new A() == new B()` không? ```js no-beautify function A() { ... } From 9ecf3564149094ba34a9de8c8c0ec03bb570cf5a Mon Sep 17 00:00:00 2001 From: I_am_Vietnam <91591390+ImVietnam@users.noreply.github.com> Date: Wed, 7 Jun 2023 23:28:07 +0700 Subject: [PATCH 19/26] Update task.md --- .../06-constructor-new/2-calculator-constructor/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/task.md b/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/task.md index 91fbf0bfe..90b0fab54 100644 --- a/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/task.md +++ b/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/task.md @@ -6,7 +6,7 @@ importance: 5 Tạo hàm khởi tạo `Máy tính` để tạo đối tượng với 3 phương thức: -- `read()` yêu cầu hai giá trị bằng cách sử dụng `prompt` và ghi nhớ chúng trong thuộc tính đối tượng. +- `read()` nhắc hai giá trị và lưu chúng dưới dạng thuộc tính đối tượng với tên `a` và `b` tương ứng. - `sum()` trả về tổng của các thuộc tính này. - `mul()` trả về tích nhân của các thuộc tính này. From 7387e91d8d27ac9c51aa7635139e9f6a689ad94e Mon Sep 17 00:00:00 2001 From: I_am_Vietnam <91591390+ImVietnam@users.noreply.github.com> Date: Wed, 7 Jun 2023 23:28:25 +0700 Subject: [PATCH 20/26] Update task.md --- .../06-constructor-new/1-two-functions-one-object/task.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/1-js/04-object-basics/06-constructor-new/1-two-functions-one-object/task.md b/1-js/04-object-basics/06-constructor-new/1-two-functions-one-object/task.md index 6ab6e7df0..3e4fcd95e 100644 --- a/1-js/04-object-basics/06-constructor-new/1-two-functions-one-object/task.md +++ b/1-js/04-object-basics/06-constructor-new/1-two-functions-one-object/task.md @@ -10,8 +10,8 @@ Có thể tạo các hàm `A` và `B` sao cho `new A() == new B()` không? function A() { ... } function B() { ... } -let a = new A; -let b = new B; +let a = new A(); +let b = new B(); alert( a == b ); // true ``` From c9b83dfb2498d1d5ac104ad1ec7266b0bf089e07 Mon Sep 17 00:00:00 2001 From: I_am_Vietnam <91591390+ImVietnam@users.noreply.github.com> Date: Wed, 7 Jun 2023 23:28:55 +0700 Subject: [PATCH 21/26] Update article.md --- 1-js/04-object-basics/06-constructor-new/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/04-object-basics/06-constructor-new/article.md b/1-js/04-object-basics/06-constructor-new/article.md index b01c3edcf..289865270 100644 --- a/1-js/04-object-basics/06-constructor-new/article.md +++ b/1-js/04-object-basics/06-constructor-new/article.md @@ -171,7 +171,7 @@ alert( new SmallUser().name ); // John Thông thường các hàm tạo không có câu lệnh `return`. Ở đây chúng ta đề cập đến hành vi đặc biệt với các đối tượng trả về chủ yếu vì mục đích hoàn chỉnh. ````smart header="Bỏ qua dấu ngoặc đơn" -Nhân tiện, chúng ta có thể bỏ qua dấu ngoặc đơn sau `new`, nếu nó không có đối số: +Nhân tiện, chúng ta có thể bỏ qua dấu ngoặc đơn sau `new`: ```js let user = new User; // <-- không có dấu ngoặc đơn From 4b65f2393154170d26670b4e0c35cda29ded54e6 Mon Sep 17 00:00:00 2001 From: I_am_Vietnam <91591390+ImVietnam@users.noreply.github.com> Date: Fri, 9 Jun 2023 12:59:00 +0700 Subject: [PATCH 22/26] Update task.md --- .../06-constructor-new/2-calculator-constructor/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/task.md b/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/task.md index 90b0fab54..6bee3f9e5 100644 --- a/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/task.md +++ b/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/task.md @@ -4,7 +4,7 @@ importance: 5 # Tạo một Máy tính mới -Tạo hàm khởi tạo `Máy tính` để tạo đối tượng với 3 phương thức: +Tạo constructor `Calculator` để tạo đối tượng với 3 phương thức: - `read()` nhắc hai giá trị và lưu chúng dưới dạng thuộc tính đối tượng với tên `a` và `b` tương ứng. - `sum()` trả về tổng của các thuộc tính này. From 2523c065a76b66d3a7d496efe98f73073c5397c2 Mon Sep 17 00:00:00 2001 From: I_am_Vietnam <91591390+ImVietnam@users.noreply.github.com> Date: Fri, 9 Jun 2023 13:00:28 +0700 Subject: [PATCH 23/26] Update task.md --- .../04-object-basics/06-constructor-new/3-accumulator/task.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/1-js/04-object-basics/06-constructor-new/3-accumulator/task.md b/1-js/04-object-basics/06-constructor-new/3-accumulator/task.md index 1e92f344d..c87c59052 100644 --- a/1-js/04-object-basics/06-constructor-new/3-accumulator/task.md +++ b/1-js/04-object-basics/06-constructor-new/3-accumulator/task.md @@ -4,11 +4,11 @@ importance: 5 # Tạo bộ tích lũy mới -Tạo một hàm tạo `Accumulator(startingValue)`. +Tạo một constructor `Accumulator(startingValue)`. Đối tượng mà nó tạo nên: -- Lưu trữ "giá trị hiện tại" trong thuộc tính `value`. Giá trị bắt đầu được đặt thành đối số của hàm tạo `startingValue`. +- Lưu trữ "giá trị hiện tại" trong thuộc tính `value`. Giá trị bắt đầu được đặt thành đối số của constructor `startingValue`. - Phương thức `read()` nên sử dụng `prompt` để đọc một số mới và thêm nó vào `giá trị`. Nói cách khác, thuộc tính `value` là tổng của tất cả các giá trị do người dùng nhập với giá trị ban đầu là `startingValue`. From 064746350776a06fdccbfd9afaebac12b258757b Mon Sep 17 00:00:00 2001 From: I_am_Vietnam <91591390+ImVietnam@users.noreply.github.com> Date: Fri, 9 Jun 2023 13:04:50 +0700 Subject: [PATCH 24/26] Update article.md --- .../06-constructor-new/article.md | 44 +++++++++---------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/1-js/04-object-basics/06-constructor-new/article.md b/1-js/04-object-basics/06-constructor-new/article.md index 289865270..8632eb89b 100644 --- a/1-js/04-object-basics/06-constructor-new/article.md +++ b/1-js/04-object-basics/06-constructor-new/article.md @@ -1,12 +1,12 @@ -# Hàm tạo, toán tử "new" +# Constructor, toán tử "new" Cú pháp `{...}` thông thường cho phép chúng ta tạo một đối tượng. Nhưng thường thì chúng ta cần tạo nhiều đối tượng tương tự, như nhiều người dùng hoặc mục menu, v.v. -Điều đó có thể được thực hiện bằng cách sử dụng hàm khởi tạo và toán tử `"new"`. +Điều đó có thể được thực hiện bằng cách sử dụng constructor và toán tử `"new"`. -## Hàm tạo +## Constructor -Hàm tạo về mặt kỹ thuật là các hàm thông thường. Có hai quy ước mặc dù: +Constructor về mặt kỹ thuật là các hàm thông thường. Có hai quy ước mặc dù: 1. Chúng được đặt tên bằng chữ in hoa đầu tiên. 2. Chúng chỉ nên được thực thi với toán tử `"new"`. @@ -38,7 +38,7 @@ Nói cách khác, `new User(...)` thực hiện điều gì đó như: ```js function User(name) { *!* - // this = {}; (implicitly) + // this = {}; (mặc nhiên) */!* // thêm thuộc tính vào đây @@ -62,12 +62,12 @@ let user = { Bây giờ nếu chúng ta muốn tạo những người dùng khác, chúng ta có thể gọi `new User("Ann")`, `new User("Alice")`, v.v. Ngắn hơn nhiều so với việc luôn sử dụng chữ và cũng dễ đọc. -Đó là mục đích chính của hàm tạo -- để triển khai mã tạo đối tượng có thể tái sử dụng. +Đó là mục đích chính của constructor -- để triển khai mã tạo đối tượng có thể tái sử dụng. -Hãy lưu ý một lần nữa -- về mặt kỹ thuật, bất kỳ hàm nào (ngoại trừ arrow function, vì chúng không có `this`) đều có thể được sử dụng làm hàm tạo. Nó có thể được chạy với `new` và nó sẽ thực thi thuật toán ở trên. "Chữ viết hoa trước" là một thỏa thuận phổ biến, để làm rõ rằng một hàm sẽ được chạy với `new`. +Hãy lưu ý một lần nữa -- về mặt kỹ thuật, bất kỳ hàm nào (ngoại trừ arrow function, vì chúng không có `this`) đều có thể được sử dụng làm constructor. Nó có thể được chạy với `new` và nó sẽ thực thi thuật toán ở trên. "Chữ viết hoa trước" là một thỏa thuận phổ biến, để làm rõ rằng một hàm sẽ được chạy với `new`. ````smart header="new function() { ... }" -Nếu chúng ta có nhiều dòng mã về việc tạo một đối tượng phức tạp duy nhất, chúng ta có thể gói chúng trong một hàm tạo được gọi ngay lập tức, như sau: +Nếu chúng ta có nhiều dòng mã về việc tạo một đối tượng phức tạp duy nhất, chúng ta có thể gói chúng trong một constructor được gọi ngay lập tức, như sau: ```js // tạo một hàm và ngay lập tức gọi nó với new @@ -81,10 +81,10 @@ let user = new function() { }; ``` -Hàm tạo này không thể được gọi lại vì nó không được lưu ở bất kỳ đâu, chỉ được tạo và gọi. Vì vậy, thủ thuật này nhằm mục đích đóng gói mã xây dựng một đối tượng mà không sử dụng lại trong tương lai. +Constructor này không thể được gọi lại vì nó không được lưu ở bất kỳ đâu, chỉ được tạo và gọi. Vì vậy, thủ thuật này nhằm mục đích đóng gói mã xây dựng một đối tượng mà không sử dụng lại trong tương lai. ```` -## Kiểm tra chế độ hàm tạo: new.target +## Kiểm tra chế độ constructor: new.target ```smart header="Nội dung nâng cao" Cú pháp từ phần này hiếm khi được sử dụng, hãy bỏ qua trừ khi bạn muốn biết mọi thứ. @@ -110,7 +110,7 @@ new User(); // hàm User { ... } */!* ``` -Điều đó có thể được sử dụng bên trong hàm để biết liệu nó được gọi với `new`, "ở chế độ hàm tạo" hay không có nó, "ở chế độ thông thường". +Điều đó có thể được sử dụng bên trong hàm để biết liệu nó được gọi với `new`, "ở chế độ constructor" hay không có nó, "ở chế độ thông thường". Chúng ta cũng có thể thực hiện cả lệnh gọi `new` và thông thường để làm như vậy, như sau: @@ -131,9 +131,9 @@ Cách tiếp cận này đôi khi được sử dụng trong các thư viện đ Tuy nhiên, có lẽ không phải là một điều tốt để sử dụng ở mọi nơi, bởi vì việc bỏ qua `new` làm cho nó ít rõ ràng hơn về những gì đang diễn ra. Với `new`, tất cả chúng ta đều biết rằng đối tượng mới đang được tạo. -## Trả về từ hàm tạo +## Trả về từ constructor -Thông thường, hàm tạo không có câu lệnh `return`. Nhiệm vụ của chúng là viết tất cả nội dung cần thiết vào `this`, và nó sẽ tự động trở thành kết quả. +Thông thường, constructor không có câu lệnh `return`. Nhiệm vụ của chúng là viết tất cả nội dung cần thiết vào `this`, và nó sẽ tự động trở thành kết quả. Nhưng nếu có câu lệnh `return`, thì quy tắc rất đơn giản: @@ -168,7 +168,7 @@ function SmallUser() { alert( new SmallUser().name ); // John ``` -Thông thường các hàm tạo không có câu lệnh `return`. Ở đây chúng ta đề cập đến hành vi đặc biệt với các đối tượng trả về chủ yếu vì mục đích hoàn chỉnh. +Thông thường các constructor không có câu lệnh `return`. Ở đây chúng ta đề cập đến hành vi đặc biệt với các đối tượng trả về chủ yếu vì mục đích hoàn chỉnh. ````smart header="Bỏ qua dấu ngoặc đơn" Nhân tiện, chúng ta có thể bỏ qua dấu ngoặc đơn sau `new`: @@ -179,12 +179,12 @@ let user = new User; // <-- không có dấu ngoặc đơn let user = new User(); ``` -Bỏ qua dấu ngoặc đơn ở đây không được coi là "phong cách tốt", nhưng cú pháp được cho phép theo thông số kỹ thuật. +Bỏ qua dấu ngoặc đơn ở đây không được coi là "phong cách tốt", nhưng cú pháp được cho phép theo đặc điểm kỹ thuật. ```` -## Các phương thức trong hàm tạo +## Các phương thức trong constructor -Việc sử dụng các hàm tạo để tạo các đối tượng mang lại rất nhiều tính linh hoạt. Hàm tạo có thể có các tham số xác định cách tạo đối tượng và những gì cần đặt trong đó. +Việc sử dụng các constructor để tạo các đối tượng mang lại rất nhiều tính linh hoạt. Constructor có thể có các tham số xác định cách tạo đối tượng và những gì cần đặt trong đó. Tất nhiên, chúng ta có thể thêm vào `this` không chỉ các thuộc tính mà cả các phương thức. @@ -217,15 +217,15 @@ john = { ## Tóm tắt -- Các hàm khởi tạo hay ngắn gọn, hàm tạo là các hàm thông thường, nhưng có một thỏa thuận chung là đặt tên chúng bằng chữ in hoa trước. -- Hàm tạo chỉ nên được gọi bằng cách sử dụng `new`. Một cuộc gọi như vậy ngụ ý việc tạo ra `this` trống ở đầu và trả về cái được điền ở cuối. +- Các hàm constructor hay ngắn gọn, constructor là các hàm thông thường, nhưng có một thỏa thuận chung là đặt tên chúng bằng chữ in hoa trước. +- Constructor chỉ nên được gọi bằng cách sử dụng `new`. Một cuộc gọi như vậy ngụ ý việc tạo ra `this` trống ở đầu và trả về cái được điền ở cuối. -Chúng ta có thể sử dụng các hàm tạo để tạo nhiều đối tượng tương tự. +Chúng ta có thể sử dụng các constructor để tạo nhiều đối tượng tương tự. -JavaScript cung cấp các hàm tạo cho nhiều đối tượng ngôn ngữ dựng sẵn: như `Date` cho ngày tháng, `Set` cho tập hợp và các đối tượng khác mà chúng ta dự định nghiên cứu. +JavaScript cung cấp các constructor cho nhiều đối tượng ngôn ngữ dựng sẵn: như `Date` cho ngày tháng, `Set` cho tập hợp và các đối tượng khác mà chúng ta dự định nghiên cứu. ```smart header="Đối tượng, chúng ta sẽ trở lại!" -Trong chương này, chúng ta chỉ trình bày những điều cơ bản về đối tượng và hàm tạo. Chúng rất cần thiết để tìm hiểu thêm về các kiểu dữ liệu và hàm trong các chương tiếp theo. +Trong chương này, chúng ta chỉ trình bày những điều cơ bản về đối tượng và constructor. Chúng rất cần thiết để tìm hiểu thêm về các kiểu dữ liệu và hàm trong các chương tiếp theo. Sau khi biết được điều đó, chúng ta quay lại các đối tượng và tìm hiểu sâu hơn về chúng trong các chương . ``` From 83eddb36bbf2fc3dc17a2fd293544e9e188c250f Mon Sep 17 00:00:00 2001 From: I_am_Vietnam <91591390+ImVietnam@users.noreply.github.com> Date: Fri, 9 Jun 2023 13:05:19 +0700 Subject: [PATCH 25/26] Update task.md --- .../06-constructor-new/2-calculator-constructor/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/task.md b/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/task.md index 6bee3f9e5..d6ec214d5 100644 --- a/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/task.md +++ b/1-js/04-object-basics/06-constructor-new/2-calculator-constructor/task.md @@ -4,7 +4,7 @@ importance: 5 # Tạo một Máy tính mới -Tạo constructor `Calculator` để tạo đối tượng với 3 phương thức: +Tạo một constructor `Calculator` để tạo đối tượng với 3 phương thức: - `read()` nhắc hai giá trị và lưu chúng dưới dạng thuộc tính đối tượng với tên `a` và `b` tương ứng. - `sum()` trả về tổng của các thuộc tính này. From 548a4f27649623de9b140d0f7e54f66bef92779d Mon Sep 17 00:00:00 2001 From: I_am_Vietnam <91591390+ImVietnam@users.noreply.github.com> Date: Fri, 9 Jun 2023 13:05:53 +0700 Subject: [PATCH 26/26] Update article.md --- 1-js/04-object-basics/06-constructor-new/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/04-object-basics/06-constructor-new/article.md b/1-js/04-object-basics/06-constructor-new/article.md index 8632eb89b..377062321 100644 --- a/1-js/04-object-basics/06-constructor-new/article.md +++ b/1-js/04-object-basics/06-constructor-new/article.md @@ -4,7 +4,7 @@ Cú pháp `{...}` thông thường cho phép chúng ta tạo một đối tượ Điều đó có thể được thực hiện bằng cách sử dụng constructor và toán tử `"new"`. -## Constructor +## Hàm constructor Constructor về mặt kỹ thuật là các hàm thông thường. Có hai quy ước mặc dù: