Hướng dẫn what are the main parts of javascript? - các phần chính của javascript là gì?

Nguồn hình ảnh từ CodeBurst.io

Bài đăng này bao gồm một số khái niệm cơ bản trong JavaScript. Mỗi lập trình viên JavaScript phải biết và làm chủ những điều này.

1. Nguyên mẫu JavaScript

Hãy để tôi giải thích cách khác nhau để tạo các đối tượng trong JavaScript. Một trong những cách để tạo các đối tượng trong JavaScript là hàm tạo hàm. Hãy xem xét hàm cấu trúc dưới đây:

function Bike(model,color){
   this.model = model,
   this.color = color,this.getDetails = function(){
     return this.model+' bike is '+this.color;
   }
}
var bikeObj1 = new Bike('BMW','BLACK');
var bikeObj2 = new Bike('BMW','WHITE');console.log(bikeObj1.getDetails()); //output: BMW bike is BLACK
console.log(bikeObj2.getDetails()); //output: BMW bike is WHITEconsole.log(bikeObj1,bikeObj2) //attacheced below image as output

Output của exp console.log (Bikeobj1, Bikeobj2)

Trong ví dụ trên, chúng tôi đang tạo hai đối tượng, Bikeobj1, Bikeobj2 bằng cách sử dụng một hàm tạo. Trong JavaScript, mọi đối tượng đều có các phương pháp và thuộc tính riêng. Trong ví dụ của chúng tôi, hai đối tượng có hai trường hợp của hàm xây dựng

console.log(bikeObj1.__proto__ === Bike.prototype );//output : true

3. Nó không có ý nghĩa khi có một bản sao của

console.log(bikeObj1.__proto__ === Bike.prototype );//output : true

4 làm điều tương tự.

Thay vì sử dụng một bản sao của các trường hợp, chúng ta sẽ sử dụng thuộc tính nguyên mẫu của hàm xây dựng.

Nguyên mẫu

Khi một đối tượng được tạo trong JavaScript, công cụ JavaScript sẽ thêm thuộc tính

console.log(bikeObj1.__proto__ === Bike.prototype );//output : true

5 vào đối tượng mới được tạo được gọi là

console.log(bikeObj1.__proto__ === Bike.prototype );//output : true

6.

console.log(bikeObj1.__proto__ === Bike.prototype );//output : true

6 hoặc

console.log(bikeObj1.__proto__ === Bike.prototype );//output : true

5 chỉ vào đối tượng nguyên mẫu của hàm tạo hàm.

function Bike(model,color){
  this.model = model,
  this.color = color
}Bike.prototype.getDetails = function(){
 return this.model+" bike is "+this.color;
}
var bikeObj1 = new Bike(‘BMW’,’Black’);
var bikeObj2 = new Bike(‘BMW’,’white’);console.log(bikeObj1.getDetails()); //output: BMW bike is BLACK
console.log(bikeObj2.getDetails()); //output: BMW bike is WHITE
console.log(bikeObj1,bikeObj2) // attacheced below image as output

Từ hình ảnh trên bên trong Bikeobj1and BikeObj2, lớp không có thuộc tính GetDetails () mà nó chỉ được thừa hưởng từ xe đạp.

Đối tượng

console.log(bikeObj1.__proto__ === Bike.prototype );//output : true

9, được tạo bằng hàm chất xây dựng xe đạp, có thuộc tính

console.log(bikeObj1.__proto__ === Bike.prototype );//output : true

6 hoặc

console.log(bikeObj1.__proto__ === Bike.prototype );//output : true

5 trỏ đến đối tượng nguyên mẫu của hàm tạo hàm

function Bike(model,color) {
    this.model = model;
    this.color = color;
}
 Bike.prototype.getInfo = function() {
    return this.color + ' ' + this.model+ ' bike';
};

2.

Trong mã dưới đây, cả tài sản

console.log(bikeObj1.__proto__ === Bike.prototype );//output : true

6 hoặc

console.log(bikeObj1.__proto__ === Bike.prototype );//output : true

5 của ____ 33it và

function Bike(model,color) {
    this.model = model;
    this.color = color;
}
 Bike.prototype.getInfo = function() {
    return this.color + ' ' + this.model+ ' bike';
};

6Property đều bằng nhau. Hãy để kiểm tra xem họ có chỉ vào cùng một vị trí bằng cách sử dụng toán tử

function Bike(model,color) {
    this.model = model;
    this.color = color;
}
 Bike.prototype.getInfo = function() {
    return this.color + ' ' + this.model+ ' bike';
};

7 không.

console.log(bikeObj1.__proto__ === Bike.prototype );//output : true

TK [không chắc chắn những gì tác giả dự định nói ở đây] vì vậy sử dụng thuộc tính nguyên mẫu, có bao nhiêu hàm được tạo ra được tải vào bộ nhớ một lần và chúng ta có thể ghi đè các chức năng nếu được yêu cầu.

2. Lớp JavaScript (ES6)

Các lớp JavaScript, được giới thiệu trong ES6, chủ yếu là đường cú pháp so với sự kế thừa dựa trên nguyên mẫu hiện có của JavaScript. Cú pháp lớp không giới thiệu một mô hình kế thừa hướng đối tượng mới cho JavaScript. Trong ES5 sớm sử dụng biểu thức chức năng.does not introduce a new object-oriented inheritance model to JavaScript. In early ES5 using function expression.

Kế thừa dựa trên nguyên mẫu hiện có:

function Bike(model,color) {
    this.model = model;
    this.color = color;
}
 Bike.prototype.getInfo = function() {
    return this.color + ' ' + this.model+ ' bike';
};

Xác định các lớp học:

Trên thực tế, các lớp là các chức năng đặc biệt của người Hồi giáo, và giống như bạn có thể xác định các biểu thức chức năng và khai báo chức năng, cú pháp lớp có hai thành phần: biểu thức lớp và khai báo lớp.

Lớp ES6:

class Bike{
  constructor(color, model) {
    this.color= color;
    this.model= model;
  }
}

Lợi ích của việc sử dụng lớp học

• Cú pháp thuận tiện, khép kín.
• Một cách duy nhất, kinh điển để mô phỏng các lớp trong JavaScript. Trước ES6, đã có một số triển khai cạnh tranh trong các thư viện phổ biến.
• Quen thuộc hơn với những người từ một nền tảng ngôn ngữ dựa trên lớp học.

3. iife

Một iife trong JavaScript là gì?

Iife (biểu thức chức năng được gọi ngay lập tức) là một hàm JavaScript chạy ngay khi nó được xác định.(Immediately Invoked Function Expression) is a JavaScript function that runs as soon as it is defined.

(function () 
{// logic here })
();

Cuộc gặp gỡ đầu tiên của bạn có vẻ khá khó hiểu nhưng thực sự, mô hình rất đơn giản. Các mẫu ngay lập tức được gọi biểu thức chức năng.

Các hàm JavaScript có thể được tạo thông qua khai báo hàm hoặc biểu thức chức năng. Một tuyên bố chức năng là cách tạo ra một hàm được đặt tên bình thường.

Một hàm được tạo trong bối cảnh của một biểu thức cũng là một biểu thức chức năng. Điều quan trọng về các biểu thức JavaScript là chúng trả về các giá trị.

Trong cả hai trường hợp trên giá trị trả về của biểu thức là hàm. Điều đó có nghĩa là nếu chúng ta muốn gọi biểu thức chức năng ngay lập tức, chúng ta chỉ cần giải quyết một vài dấu ngoặc đơn ở cuối. Điều này đưa chúng ta trở lại bit mã đầu tiên mà chúng tôi đã xem:
That means that if we want to invoke the function expression right away we just need to tackle a couple of parentheses on the end. Which brings us back to the first bit of code we looked at:

(function () 
{ var foo = “hello”;
console.log(foo);
 })
();
console.log(foo); //Error: foo is not defined

Lý do chính để sử dụng iife là để có được quyền riêng tư dữ liệu. Bởi vì các biến phạm vi VAR JavaScript VAR cho chức năng chứa của chúng, bất kỳ biến nào được khai báo trong iife không thể được truy cập bởi thế giới bên ngoài.

4. Phạm vi hiểu biết:

Một định nghĩa đơn giản cho một phạm vi trong JavaScript:

Phạm vi là khả năng truy cập của các biến, hàm và đối tượng trong một phần cụ thể của mã của bạn trong thời gian chạy. Nói cách khác, phạm vi xác định khả năng hiển thị của các biến và các tài nguyên khác trong các lĩnh vực mã của bạn.

Theo định nghĩa trên của phạm vi, vì vậy, điểm trong việc giới hạn khả năng hiển thị của các biến và không có mọi thứ có sẵn ở mọi nơi trong mã của bạn.

Phạm vi được định nghĩa theo hai cách chính,

• Phạm vi toàn cầu
• Phạm vi địa phương

var greeting='Welcome to blog';
(function(){
  console.log(greeting); //Output: Welcome to blog
})();

Xem xét biến lời chào mã ở trên phải là phạm vi toàn cầu, nó có thể truy cập bên trong hàm,

(function(){var greeting = 'Welcome to blog';
  console.log(greeting); //Output: Welcome to blog
})();console.log(greeting); //Output:Reference-Error greeting not defined

Trong mã trên cho phạm vi cục bộ,

Trong các biến cấp độ phạm vi trong JavaScript ES6 đã cập nhật biến nâng, var, const loại kiểm tra với điều đó, để tìm hiểu phạm vi, bạn cũng cần phải hiểu nâng cao.

Để biết thêm, hãy tham khảo trang web này https://scotch.io/tutorials/undermines-scope-in-javascript

5. Đóng cửa JavaScript

Đóng cửa là gì?

Đóng cửa là sự kết hợp của một hàm và môi trường từ vựng trong đó hàm đó được khai báo.

Đóng cửa là một hàm bên trong có quyền truy cập vào các biến của hàm bên ngoài (bao quanh) - chuỗi phạm vi. Việc đóng có ba chuỗi phạm vi: nó có quyền truy cập vào phạm vi riêng của nó (các biến được xác định giữa dấu ngoặc xoăn của nó), nó có quyền truy cập vào các biến của hàm bên ngoài và nó có quyền truy cập vào các biến toàn cầu.

Hãy xem một ví dụ đóng bên dưới:

function User(name){  var displayName = function(greeting){
   console.log(greeting+' '+name);
  }
return displayName;
}var myFunc = User('Raj');myFunc('Welcome '); //Output: Welcome Raj
myFunc('Hello '); //output: Hello Raj

Trong mã này, chúng tôi có hàm bên ngoài

function Bike(model,color) {
    this.model = model;
    this.color = color;
}
 Bike.prototype.getInfo = function() {
    return this.color + ' ' + this.model+ ' bike';
};

8 trả về hàm bên trong là

function Bike(model,color) {
    this.model = model;
    this.color = color;
}
 Bike.prototype.getInfo = function() {
    return this.color + ' ' + this.model+ ' bike';
};

9,

Hàm bên trong sẽ có quyền truy cập vào các biến trong phạm vi hàm bên ngoài, ngay cả sau khi hàm bên ngoài đã trở lại.

6. Mẫu mô -đun

Trong JavaScript, một mô -đun là một đơn vị nhỏ của mã độc lập, có thể sử dụng lại. Các mô-đun là nền tảng của nhiều mẫu thiết kế JavaScript và rất cần thiết khi xây dựng bất kỳ ứng dụng dựa trên JavaScript không tầm thường nào.

Mô -đun JavaScript xuất dưới dạng giá trị thay vì xác định một loại, vì mô -đun JavaScript JavaScript có thể xuất một đối tượng, các mô -đun xuất một chuỗi chứa mẫu HTML hoặc bảng kiểu CSS cũng phổ biến.

JavaScript không có từ khóa riêng nhưng chúng tôi có thể đạt được các phương thức và thuộc tính riêng tư bằng cách sử dụng đóng cửa.

function Bike(model,color){
  this.model = model,
  this.color = color
}Bike.prototype.getDetails = function(){
 return this.model+" bike is "+this.color;
}
var bikeObj1 = new Bike(‘BMW’,’Black’);
var bikeObj2 = new Bike(‘BMW’,’white’);console.log(bikeObj1.getDetails()); //output: BMW bike is BLACK
console.log(bikeObj2.getDetails()); //output: BMW bike is WHITE
console.log(bikeObj1,bikeObj2) // attacheced below image as output

0

Các mô -đun này có thể đã xuất sang các tệp JS khác bằng cách sử dụng từ khóa xuất,

function Bike(model,color){
  this.model = model,
  this.color = color
}Bike.prototype.getDetails = function(){
 return this.model+" bike is "+this.color;
}
var bikeObj1 = new Bike(‘BMW’,’Black’);
var bikeObj2 = new Bike(‘BMW’,’white’);console.log(bikeObj1.getDetails()); //output: BMW bike is BLACK
console.log(bikeObj2.getDetails()); //output: BMW bike is WHITE
console.log(bikeObj1,bikeObj2) // attacheced below image as output

1

Các mô -đun có thể nhập vào tệp JS khác

function Bike(model,color){
  this.model = model,
  this.color = color
}Bike.prototype.getDetails = function(){
 return this.model+" bike is "+this.color;
}
var bikeObj1 = new Bike(‘BMW’,’Black’);
var bikeObj2 = new Bike(‘BMW’,’white’);console.log(bikeObj1.getDetails()); //output: BMW bike is BLACK
console.log(bikeObj2.getDetails()); //output: BMW bike is WHITE
console.log(bikeObj1,bikeObj2) // attacheced below image as output

2

Tại sao chúng ta cần sử dụng một mô -đun?

Có rất nhiều lợi ích khi sử dụng các mô -đun có lợi cho một sự rộng lớn,

một số thì,

1. khả năng duy trì
2. khả năng tái sử dụng
3. Theo tên

7. Tăng cường:

Trong JavaScript ý nghĩa của việc nâng cao của nó,

Tăng cường là một cơ chế JavaScript trong đó các biến và khai báo chức năng được chuyển lên đầu phạm vi của chúng trước khi thực hiện mã.

Nó thực sự là một định nghĩa cho việc nâng cao,

Trong lời giải thích đơn giản cho việc nâng cao với mã,

function Bike(model,color){
  this.model = model,
  this.color = color
}Bike.prototype.getDetails = function(){
 return this.model+" bike is "+this.color;
}
var bikeObj1 = new Bike(‘BMW’,’Black’);
var bikeObj2 = new Bike(‘BMW’,’white’);console.log(bikeObj1.getDetails()); //output: BMW bike is BLACK
console.log(bikeObj2.getDetails()); //output: BMW bike is WHITE
console.log(bikeObj1,bikeObj2) // attacheced below image as output

3

Trên thực tế, JavaScript đã nâng Tuyên bố biến. Đây là những gì mã trên trông giống như người phiên dịch

function Bike(model,color){
  this.model = model,
  this.color = color
}Bike.prototype.getDetails = function(){
 return this.model+" bike is "+this.color;
}
var bikeObj1 = new Bike(‘BMW’,’Black’);
var bikeObj2 = new Bike(‘BMW’,’white’);console.log(bikeObj1.getDetails()); //output: BMW bike is BLACK
console.log(bikeObj2.getDetails()); //output: BMW bike is WHITE
console.log(bikeObj1,bikeObj2) // attacheced below image as output

4

JavaScript chỉ có các khoản khai báo, không khởi tạo.

Không thể tránh khỏi, điều này có nghĩa là bất kể các chức năng và biến ở đâu được khai báo, chúng được chuyển lên đỉnh phạm vi của chúng bất kể phạm vi của chúng là toàn cầu hay địa phương.

Vì vậy, điều này cũng phù hợp với một biến số của phạm vi cấp chức năng cũng được nâng lên

Điều tiếp theo bạn cần biết về việc nâng,

1. Đặt, var, từ khóa const trong javascript (ES6)
2. Chức năng nâng cao
3. Các lớp học

Để biết thêm khi tham khảo trang web này được đánh giá cao về việc sử dụng tại JavaScript

8. Currying:

Giải thích về Currying về các ví dụ trong JavaScript

Currying là một kỹ thuật đánh giá chức năng với nhiều đối số, thành một chuỗi chức năng với một đối số duy nhất.

Nói cách khác, khi một hàm, thay vì thực hiện tất cả các đối số cùng một lúc, lấy cái đầu tiên và trả về một hàm mới lấy cái thứ hai và trả về một hàm mới lấy mục thứ ba, v.v. cho đến khi tất cả các đối số hoàn thành.

Xem xét dưới đây mã ví dụ:

function Bike(model,color){
  this.model = model,
  this.color = color
}Bike.prototype.getDetails = function(){
 return this.model+" bike is "+this.color;
}
var bikeObj1 = new Bike(‘BMW’,’Black’);
var bikeObj2 = new Bike(‘BMW’,’white’);console.log(bikeObj1.getDetails()); //output: BMW bike is BLACK
console.log(bikeObj2.getDetails()); //output: BMW bike is WHITE
console.log(bikeObj1,bikeObj2) // attacheced below image as output

5

Currying này đạt được thông qua việc đóng cửa, vì vậy trên các biến chương trình A, B thuộc tính riêng của chức năng cha mẹ

Tại sao cà ri hữu ích?

Chủ yếu nó giúp tạo ra một chức năng bậc cao. Nó cực kỳ hữu ích trong việc xử lý sự kiện.

Làm thế nào để chuyển đổi một chức năng hiện có thành một phiên bản curried?

Hàm Curry không tồn tại trong JavaScript bản địa. Nhưng một thư viện như Lodash giúp chuyển đổi hàm thành một chức năng dễ dàng hơn.

9. Ghi nhớ:

Ghi nhớ là một kỹ thuật lập trình cố gắng tăng hiệu suất của chức năng bằng cách lưu trữ kết quả được tính toán trước đó. Bởi vì các đối tượng JavaScript hoạt động giống như các mảng kết hợp, chúng là những ứng cử viên lý tưởng để đóng vai trò là bộ nhớ cache. Mỗi lần được gọi là hàm ghi nhớ, các tham số của nó được sử dụng để lập chỉ mục bộ đệm. Nếu dữ liệu có mặt, thì nó có thể được trả về, mà không cần thực hiện toàn bộ chức năng. Tuy nhiên, nếu dữ liệu không được lưu trữ, thì hàm được thực thi và kết quả được thêm vào bộ đệm.

Hàm là một phần không thể thiếu của lập trình, chúng giúp mô đun hóa và có thể sử dụng lại theo mã của chúng tôi, vì ghi nhớ định nghĩa trên là một mã tối ưu hóa mã của chúng tôi

function Bike(model,color){
  this.model = model,
  this.color = color
}Bike.prototype.getDetails = function(){
 return this.model+" bike is "+this.color;
}
var bikeObj1 = new Bike(‘BMW’,’Black’);
var bikeObj2 = new Bike(‘BMW’,’white’);console.log(bikeObj1.getDetails()); //output: BMW bike is BLACK
console.log(bikeObj2.getDetails()); //output: BMW bike is WHITE
console.log(bikeObj1,bikeObj2) // attacheced below image as output

6

Từ mã trên, bạn có thể hiểu ghi nhớ.

11. Phương thức áp dụng, gọi và ràng buộc:

Trong truyền thống JS có đối tượng, thuộc tính và phương thức, vì vậy mỗi đối tượng có các thuộc tính và phương thức.

Trong JavaScript, chúng ta có thể thực hiện một số phép thuật bằng cách sử dụng các phương thức gọi, áp dụng, ràng buộc,

Phương thức cuộc gọi/áp dụng/liên kết của JavaScript

Hãy xem xét đối tượng hình ảnh trên có thể có các thuộc tính riêng và Object2 có thể có thuộc tính riêng của nó, vì vậy chúng ta có thể viết một phương thức chung cho các đối tượng này và sử dụng trong đó bằng phương thức gọi/áp dụng/liên kết. Tôi hy vọng bây giờ bạn có thể hiểu tại sao phương thức gọi/áp dụng/liên kết bằng cách sử dụng.

Hãy xem xét sự khác biệt và mã cho phương thức gọi/áp dụng/liên kết

1.Call Phương pháp:

Hãy xem xét mã bên dưới, OBJ có thuộc tính của num, sử dụng phương thức cuộc gọi Chúng ta có thể ràng buộc OBJ để thêm chức năng,

function Bike(model,color){
  this.model = model,
  this.color = color
}Bike.prototype.getDetails = function(){
 return this.model+" bike is "+this.color;
}
var bikeObj1 = new Bike(‘BMW’,’Black’);
var bikeObj2 = new Bike(‘BMW’,’white’);console.log(bikeObj1.getDetails()); //output: BMW bike is BLACK
console.log(bikeObj2.getDetails()); //output: BMW bike is WHITE
console.log(bikeObj1,bikeObj2) // attacheced below image as output

7

2. Phương pháp áp dụng

Theo cách tương tự, phương thức áp dụng cũng hoạt động nhưng sự khác biệt duy nhất là sử dụng phương thức Áp dụng, các đối số truyền có thể là một mảng, hãy tham khảo mã bên dưới.

3. Phương pháp BẮT ĐẦU:

Phương thức liên kết trả về một thể hiện phương thức thay vì giá trị kết quả, sau đó cần thực thi một phương thức ràng buộc với các đối số.

Trong mã trên chỉ đơn giản là giải thích cách sử dụng phương thức cuộc gọi/áp dụng/liên kết với một đối số.

11. Đa hình trong JavaScript:

Đa hình là một trong những nguyên lý của lập trình hướng đối tượng (OOP). Đó là thực tiễn thiết kế các đối tượng để chia sẻ các hành vi và có thể ghi đè các hành vi được chia sẻ với các hành vi cụ thể. Đa hình tận dụng lợi thế của sự kế thừa để thực hiện điều này.

Hãy xem mã mẫu để ghi đè một hàm trong JavaScript

function Bike(model,color){
  this.model = model,
  this.color = color
}Bike.prototype.getDetails = function(){
 return this.model+" bike is "+this.color;
}
var bikeObj1 = new Bike(‘BMW’,’Black’);
var bikeObj2 = new Bike(‘BMW’,’white’);console.log(bikeObj1.getDetails()); //output: BMW bike is BLACK
console.log(bikeObj2.getDetails()); //output: BMW bike is WHITE
console.log(bikeObj1,bikeObj2) // attacheced below image as output

8

Trong phương thức dựa trên nguyên mẫu chương trình đơn giản ở trên cho hàm xây dựng nhân viên phải ghi đè bởi một hàm nguyên mẫu khác như trả về tên dưới dạng chữ hoa.

Vì vậy, chúng ta có thể ghi đè một hàm trong phạm vi khác nhau và cũng có thể cho quá tải phương thức, JS không có phương thức quá tải bản địa nhưng vẫn có thể đạt được.

Vẫn còn một vài khái niệm trong OOP, tất cả đều là quá tải phương pháp, trừu tượng, kế thừa trong JavaScript.

12. JS không đồng bộ:

Trong JavaScript đồng bộ và không đồng bộ là mẫu thực thi mã,

Trong thực thi mã JavaScript được thực hiện bằng hai cách riêng biệt:

1. Trình duyệt JS Engine (động cơ V8 JS phổ biến)
2. Động cơ NodeJS V8

Trình duyệt JS động cơ phân tích tệp HTML và thực thi JavaScript theo ba mẫu,

1. Đồng bộ
2. Không đồng bộ
3. hoãn lại

function Bike(model,color){
  this.model = model,
  this.color = color
}Bike.prototype.getDetails = function(){
 return this.model+" bike is "+this.color;
}
var bikeObj1 = new Bike(‘BMW’,’Black’);
var bikeObj2 = new Bike(‘BMW’,’white’);console.log(bikeObj1.getDetails()); //output: BMW bike is BLACK
console.log(bikeObj2.getDetails()); //output: BMW bike is WHITE
console.log(bikeObj1,bikeObj2) // attacheced below image as output

9

Trong khi trình duyệt JS Công cụ phân tích tệp HTML nếu TAG xảy ra có nghĩa là sẽ có chặn, vì vậy làm thế nào nó được thực thi mã JavaScript cho ba mẫu trên.

1. Nếu xảy ra thẻ đồng bộ, JS Engine sẽ tải xuống mã và thực thi mã đó và sau đó chỉ phân tích mã HTML dưới đây, thường đồng bộ là thực thi tập lệnh chặn.
2. Nếu xảy ra thẻ không đồng bộ, trong khi tải xuống Code JS Engine sẽ phân tích HTML và một lần nếu mã JS được tải xuống tạm dừng phân tích cú pháp và quay lại thực thi mã JS, thường không đồng bộ là thực thi tập lệnh không chặn.
3. Nếu xảy ra thẻ không đồng bộ, động cơ JS sẽ phân tích mã tất cả mã HTML và sau đó chỉ thực thi mã JS,

Động cơ NodeJS V8:

Công cụ NodeJS V8 thực thi mã JavaScript của mình dưới dạng một luồng đơn dựa trên vòng lặp sự kiện!

Vòng lặp sự kiện và NodeJS

Mô hình đồng bộ và không đồng bộ

13. Hàm gọi lại:

Định nghĩa chức năng gọi lại:

Một tham chiếu đến mã thực thi hoặc một đoạn mã thực thi, được truyền như một đối số cho mã khác.

Từ định nghĩa trên, hàm gọi lại là một hàm được truyền vào một hàm khác như một đối số, sau đó được gọi bên trong hàm bên ngoài để hoàn thành một số loại thường xuyên hoặc hành động.

console.log(bikeObj1.__proto__ === Bike.prototype );//output : true

0

Trong chương trình AB ở trên này, lời chào chức năng được truyền như một đối số cho chức năng ProcessUserInput, vì vậy tôi hy vọng bây giờ bạn đã hiểu chức năng gọi lại trong JavaScript.

14. Hiểu những lời hứa:

Định nghĩa lời hứa:

Đối tượng

class Bike{
  constructor(color, model) {
    this.color= color;
    this.model= model;
  }
}

0 thể hiện sự hoàn thành (hoặc thất bại) cuối cùng của một hoạt động không đồng bộ và giá trị kết quả của nó.

class Bike{
  constructor(color, model) {
    this.color= color;
    this.model= model;
  }
}

0 object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.

Một lời hứa đại diện cho kết quả của hàm không đồng bộ. Lời hứa có thể được sử dụng để tránh chuỗi gọi lại. Trong JavaScript, represents the result of the asynchronous function. Promises can be used to avoid chaining callbacks. In JavaScript,

Vì vậy, bất cứ khi nào mã JavaScript thực thi không đồng bộ, cần phải xử lý một hoạt động như một trong những cách sẽ được sử dụng lời hứa.

Lời hứa, đã có khá nhiều thời gian và được xác định bởi một thông số kỹ thuật gọi là Promise/A+. ES6 đã áp dụng thông số kỹ thuật này để thực hiện lời hứa; Nhưng có những thư viện hứa hẹn khác như Q, Bluebird, RSVP và các thư viện khác tuân thủ thông số kỹ thuật này và cung cấp các tính năng khác trên đầu nó.

Một

class Bike{
  constructor(color, model) {
    this.color= color;
    this.model= model;
  }
}

1 là ở một trong những trạng thái này:

• Đang chờ xử lý: Trạng thái ban đầu, không hoàn thành cũng không bị từ chối.
• Hoàn thành: Có nghĩa là hoạt động hoàn thành thành công.
• bị từ chối: có nghĩa là hoạt động thất bại.

console.log(bikeObj1.__proto__ === Bike.prototype );//output : true

1

Hãy xem xét mã trên cho một lời hứa mẫu giả định giống như thực hiện hoạt động DB là không đồng bộ, trong đó, các đối số đối tượng hứa hẹn là hai chức năng giải quyết và từ chối,

Bất cứ khi nào chúng tôi thực hiện lời hứa đó bằng cách sử dụng .then () và .catch () là hàm gọi lại để giải quyết hoặc từ chối các giá trị

Để tìm hiểu thêm về lời hứa.

15. Async & Await:

Bây giờ Babel hỗ trợ Async/đang chờ đợi ra khỏi hộp, và ES2016 (hoặc ES7) chỉ quanh góc, Async & chờ đợi về cơ bản chỉ là đường cú pháp trên đầu các lời hứa, hai từ khóa này chỉ cần viết mã không đồng bộ trong nút trở nên dễ chịu hơn nhiều.async & await basically just syntactic sugar on top of Promises, these two keywords alone should make writing asynchronous code in Node much more bearable.

Trong mô hình không đồng bộ của JavaScript được xử lý trong các phiên bản khác nhau,

ES5 -> gọi lại

ES6 -> Lời hứa

ES7 -> Async & đang chờ đợi

Tuy nhiên, điều mà rất nhiều người có thể đã bỏ lỡ là toàn bộ nền tảng cho Async/Await là những lời hứa. Trên thực tế, mọi chức năng không đồng bộ bạn viết sẽ trả lại một lời hứa, và mọi điều bạn đang chờ đợi thường sẽ là một lời hứa.promises. In fact, every async function you write will return a promise, and every single thing you await will ordinarily be a promise.

console.log(bikeObj1.__proto__ === Bike.prototype );//output : true

2

Mã trên cho Async & Await đơn giản, đang chờ đợi,

Tốt, Async/AIDIT là một cải tiến cú pháp tuyệt vời cho cả các lập trình viên NodeJS và Trình duyệt. So sánh với lời hứa, đó là một lối tắt để đến cùng một điểm đến. Nó giúp nhà phát triển thực hiện lập trình chức năng trong JavaScript và tăng khả năng đọc mã, làm cho JavaScript trở nên thú vị hơn.

Để hiểu về Async & chờ đợi, bạn chỉ cần hiểu những lời hứa.

Trong Async & đang chờ nhiều thứ hơn ở đó, chỉ cần chơi xung quanh nó.

conclusion:

Cho đến nay, trong bài đăng này, chúng tôi đã đề cập đến nhiều khái niệm quan trọng trong JavaScript và đã giới thiệu về nó. Nói chung cho mỗi khái niệm chỉ cung cấp một mã mẫu để hiểu các khái niệm.

Tại đây JavaScript API Cheatsheet cho nhà phát triển mặt trước http://overapi.com/javaScript,

Nguồn hình ảnh từ http://overapi.com/javascript

Vì vậy, bạn có thể nhận được nhiều thứ hơn và chơi xung quanh mỗi khái niệm.

Tôi vừa trải qua phần giới thiệu trong tất cả các khái niệm, vì vậy nếu bạn có bất kỳ truy vấn nào chỉ cần hỏi trong phần phản hồi.

Cảm ơn vì đã đọc!...

Tham khảo từ:

https://developer.mozilla.org/

https://www.phpied.com/3-ways-to-define-a-javascript-class/

Có bao nhiêu phần trong JavaScript?

Phần quan trọng nhất của JavaScript là gì?

Các khái niệm chính trong JavaScript là gì?

5 điều JavaScript có thể làm là gì?