Hướng dẫn how to crack javascript interview - cách bẻ khóa cuộc phỏng vấn javascript

Một cốc JS cho các ứng cử viên phỏng vấn

Các cuộc phỏng vấn của JavaScript (JS) không dễ dàng. Tôi chấp nhận nó, bạn chấp nhận nó và, mọi người đều làm. Số lượng khả năng của các câu hỏi có thể được hỏi trong một cuộc phỏng vấn JavaScript rất cao. Làm thế nào một người sẽ có thể phá vỡ một cuộc phỏng vấn của JS? Bắt đầu từ đâu? Bài viết này là một nỗ lực để hướng dẫn tất cả các nhà phát triển JavaScript tham vọng làm sâu sắc thêm kiến ​​thức JS của họ bằng cách biết các khái niệm cơ bản. Đây là những bước bé được thực hiện ít nhất để đối mặt với một cuộc phỏng vấn của JS. Nếu tôi là một ứng cử viên, tôi chuẩn bị tốt cho những khái niệm này. Nếu tôi là một người phỏng vấn, tôi cho rằng bạn biết những điều quan trọng này để tiếp tục.

Lưu ý: Nếu bạn không biết tôi, tôi là một nhà phát triển Stack đầy đủ với chuyên môn về Python, Go & JavaScript. Tôi cũng là một cuốn sách!: If you don’t know me, I am a full stack developer with expertise in Python, Go & JavaScript. I authored a book too!

Hướng dẫn này là một điểm bắt đầu nhưng không phải là nib cho một nhà phát triển JS. Đó là trách nhiệm của anh ấy/cô ấy để chuẩn bị cho các cuộc phỏng vấn khó khăn hơn nhiều. Họ cũng cần lưu ý rằng các câu hỏi phỏng vấn cũng có thể là từ miền và công nghệ mà họ đã làm việc (ví dụ: React JS, Webpack, Node JS, v.v.). Ở đây chúng tôi trình bày các yếu tố JS cơ bản mà bạn nên thành thạo để gọi mình là nhà phát triển JavaScript giỏi. Một nhà phát triển JS tốt có thể là một nhà phát triển phản ứng tốt, nhưng điều ngược lại không được đảm bảo. Đáng buồn thay, JS có tiếng xấu trong việc sản xuất vô số kịch bản với sự thiếu kỷ luật (một phần đúng). JavaScript cho phép các nhà phát triển làm mọi việc mà không phàn nàn nhiều. Thật thú vị khi mã quá. Vài lập trình viên JavaScript tuyệt vời như John Resig (Creator, Jquery), Brendan Eich (Creator, JS) và, Lars Bak (nhóm Google Chrome) hiểu ngôn ngữ vào và ra. Một lập trình viên JS thành công luôn đọc mã JS đơn giản từ các thư viện. Nhiều người nói rằng thật khó để tìm thấy một nhà phát triển JavaScript giỏi!

Máy ảo là một con thú lạ. Không có giải pháp hoàn hảo, thay vào đó bạn tối ưu hóa cho ‘điểm ngọt ngào. Có rất nhiều nghề thủ công. Nó có một trò chơi dài, bạn có thể đốt cháy ra - Lars Bak, Google

Để cho bạn thấy sự phức tạp của các cuộc phỏng vấn JS, trong cái nhìn đầu tiên, hãy cố gắng tìm hiểu kết quả của tuyên bố JS này.

Console.log (2.0 == 2 2

>

>

>

(Những dòng này là để làm cho bạn không tập trung vào các dòng dưới đây)

9 người trong số 10 người nói điều này in sai. Butit in đúng. Tại sao? Xem nó ở đây.false. ButIt prints true. Why? see it here.

JavaScript là khó khăn. Chúng tôi không thể làm được gì nhiều nếu người phỏng vấn quá thông minh để đặt câu hỏi như trên. Nhưng những gì chúng ta có thể làm? Tìm hiểu mười một yếu tố cơ bản này theo chiều sâu để biến một cuộc phỏng vấn JS có lợi cho bạn.

1) Hiểu rõ các chức năng của JS

Chức năng là kem của JavaScript. Họ là những công dân hạng nhất. Không biết các chức năng của JS theo chiều sâu, kiến ​​thức của bạn bị cảnh báo nghiêm trọng. Hàm JS không chỉ là một hàm bình thường. Không giống như trong các ngôn ngữ khác, một hàm có thể được gán cho một biến, được chuyển xung quanh như một đối số cho một hàm khác và cũng có thể được trả về từ một ngôn ngữ khác. Do đó, đây là công dân hạng nhất trong JS.

Tôi sẽ không giải thích chức năng ở đây là gì, nhưng bạn có biết rằng rất ít điều có thể làm bạn ngạc nhiên không? Như thế này!

console.log(square(5));
/* ... */
function square(n) { return n * n; }

Mã này Snippet thực thi 25. Đúng! Xem đoạn mã thứ hai

console.log(square(5));
 var square = function(n) { 
  return n * n; 
}

Trong cái nhìn đầu tiên, bạn có thể bị cám dỗ để nói rằng nó cũng in 25. Sai! Thay vào đó, nó hét lên cho dòng đầu tiên.

TypeError: square is not a function

Trong JavaScript, nếu bạn xác định một hàm là một biến, tên biến sẽ được nâng lên nhưng bạn không thể truy cập cho đến khi thực thi JS gặp định nghĩa của nó. Bạn có ngạc nhiên không?

Để lại nó. Bạn có thể đã thấy cú pháp này thường xuyên ở đâu đó trong một số mã.

var simpleLibrary = function() {
   var simpleLibrary = {
        a,
        b,
        add: function(a, b) {
            return a + b;
        },
        subtract: function(a, b) {
            return a - b;   
        }
   }
  return simpleLibrary;
}();

Tại sao mọi người làm điều kỳ lạ này? Đây là một biến chức năng có các biến và hàm được gói gọn trong đó không gây ô nhiễm phạm vi toàn cầu. Các thư viện từ jQuery đến lodash Sử dụng kỹ thuật này để cung cấp cho bạn $, v.v.

Điểm tôi đặt ở đây là các chức năng học tập tốt. Có nhiều bẫy tinh tế trong cách chúng ta sử dụng chúng. Đi qua bài viết được viết tốt về các chức năng của Mozilla.

2) Hiểu ràng buộc, áp dụng và gọi

Những chức năng bạn có thể thấy trong tất cả các thư viện nổi tiếng. Những điều này cho phép một thứ gọi là Currying bằng cách sử dụng mà chúng ta có thể đưa ra chức năng thành các chức năng khác nhau. Một nhà phát triển JavaScript giỏi có thể cho bạn biết về ba người này bất cứ lúc nào.

Về cơ bản, đây là các phương pháp nguyên mẫu của các chức năng để thay đổi hành vi để đạt được điều gì đó. Theo Chad, một nhà phát triển JS, việc sử dụng là như thế này

Sử dụng

mathLib.area.call({pi: 3.14159}, 2);

mathLib.area.call({pi: 3.14159}, 2);

mathLib.area.call({pi: 3.14159}, 2);

Một cuộc gọi tiết kiệm!

Hãy cho chúng tôi xem những gì tuyên bố trên có nghĩa là gì! Giả sử giáo viên toán của bạn yêu cầu bạn tạo một thư viện và gửi nó. Bạn đã viết một thư viện trừu tượng tìm thấy khu vực và chu vi của vòng tròn.

var mathLib = {
    pi: 3.14,
    area: function(r) {
        return this.pi * r * r;
    },
    circumference: function(r) {
        return 2 * this.pi * r;
    }
};

Bạn đã gửi thư viện cho giáo sư. Bây giờ là lúc để gửi mã gọi thư viện toán học đó.

mathLib.area(2);
12.56

Trong khi gửi các mẫu mã thứ hai, bạn đã tìm thấy trong các hướng dẫn mà Giáo sư yêu cầu bạn sử dụng PI liên tục với độ chính xác 5 số thập phân. Ôi trời! Bạn chỉ sử dụng 3.14, không phải 3.14159. Bây giờ bạn không có cơ hội gửi thư viện vì thời hạn đã kết thúc. Chức năng cuộc gọi của JS giúp bạn tiết kiệm. Chỉ cần gọi mã của bạn theo cách nàypi with 5 decimals precision. Oh gosh! You just used 3.14, not 3.14159. Now you have no chance to send the library as the deadline was over. JS call function saves you. Just call your code in this way

mathLib.area.call({pi: 3.14159}, 2);

Và nó có giá trị PI mới của bạn khi đang bay. Đầu ra là

12.56636

Điều đó làm cho giáo sư của bạn hạnh phúc! Nếu bạn quan sát chức năng cuộc gọi có hai đối số:call function takes two arguments:

• Định nghĩa bài văn
• Đối số chức năng

Bối cảnh là một đối tượng thay thế từ khóa này bên trong hàm khu vực. Các đối số sau này được thông qua như các đối số chức năng. Cho người yêu cũ:this keyword inside the area function. Later arguments are passed as function arguments. For Ex:

var cylinder = {
    pi: 3.14,
    volume: function(r, h) {
        return this.pi * r * r * h;
    }
};

Cuộc gọi gọi như thế này invocationis like this

cylinder.volume.call({pi: 3.14159}, 2, 6);
75.39815999999999

Bạn có thấy những đối số chức năng đó được truyền dưới dạng các đối số tiếp theo sau đối tượng ngữ cảnh không?

Áp dụng giống hệt nhau ngoại trừ các đối số chức năng được thông qua như một danh sách vì lợi ích của God.is exactly same except Function arguments are passed as a list for god’s sake.

console.log(square(5));
 var square = function(n) { 
  return n * n; 
}

Nếu bạn biết cuộc gọi, bạn biết áp dụng và ngược lại. Bây giờ, ràng buộc là gì?call, you know apply and vice versa. Now, what is bind?

BIND đính kèm một thương hiệu mới này với một chức năng nhất định. Trong trường hợp ràng buộc, hàm không được thực thi ngay lập tức như cuộc gọi hoặc áp dụng.attaches a brand new this to a given function. In bind’s case, the function is not executed instantly like Call or Apply.

console.log(square(5));
 var square = function(n) { 
  return n * n; 
}

Việc sử dụng ràng buộc là gì? Nó cho phép chúng ta tiêm một bối cảnh vào một hàm trả về một chức năng mới với bối cảnh được cập nhật. Nó có nghĩa là biến này sẽ được người dùng cung cấp biến. Điều này rất hữu ích khi làm việc với các sự kiện JavaScript.Bind? It allows us to inject a context into a function which returns a new function with updated context. It means this variablewill be user supplied variable. This is very useful while working with JavaScript events.

Bạn nên biết ba chức năng này để soạn thảo chức năng trong JavaScript

3) Hiểu rõ phạm vi JavaScript (cũng đóng cửa)

Phạm vi JavaScript là một hộp Pandora. Hàng trăm câu hỏi phỏng vấn khó khăn có thể được đóng khung từ khái niệm duy nhất này. Có ba loại phạm vi:

• Phạm vi toàn cầu
• Phạm vi/Phạm vi chức năng cục bộ
• Phạm vi khối (được giới thiệu trong ES6)

Phạm vi toàn cầu là những gì chúng ta thường làm

console.log(square(5));
 var square = function(n) { 
  return n * n; 
}

Phạm vi chức năng đi vào hình ảnh khi bạn xác định một biến cục bộ.

console.log(square(5));
 var square = function(n) { 
  return n * n; 
}

Tiêu chuẩn ES16 đã giới thiệu một phạm vi khối mới giới hạn phạm vi biến biến thành một khối dấu ngoặc đơn nhất định.

console.log(square(5));
 var square = function(n) { 
  return n * n; 
}

Chức năng & điều kiện được coi là khối. Ví dụ trên nên cảnh báo 4 vì các câu lệnh có điều kiện được thực thi. Nhưng ES6 phá hủy phạm vi của các biến khối và phạm vi đã đi vào toàn cầu.

Bây giờ đến phạm vi ma thuật. Nó có thể đạt được bằng cách sử dụng đóng cửa. Đóng JavaScript là một hàm trả về một chức năng khác.

Nếu ai đó hỏi bạn câu hỏi này. Viết một thiết kế lấy một chuỗi và trả về một ký tự tại một thời điểm. Nếu chuỗi mới được đưa ra, nó sẽ thay thế chuỗi cũ. Nó chỉ đơn giản là được gọi là một máy phát điện.

console.log(square(5));
 var square = function(n) { 
  return n * n; 
}

Thực hiện theo cách này!

console.log(square(5));
 var square = function(n) { 
  return n * n; 
}

Ở đây, phạm vi đang đóng một vai trò quan trọng. Đóng cửa là một hàm trả về một chức năng khác và kết thúc dữ liệu. Trình tạo chuỗi trên đủ điều kiện để đóng. Giá trị chỉ mục được bảo tồn giữa nhiều cuộc gọi chức năng. Hàm bên trong được xác định có thể truy cập các biến được xác định trong hàm cha. Đây là một phạm vi khác nhau. Nếu bạn xác định thêm một hàm trong hàm cấp thứ hai, điều đó có thể truy cập tất cả các biến của cha mẹ.index value is preserved between multiple function calls. The internal function defined can access the variables defined in the parent function. This is a different scope. If you defined one more function in the second level function, that can access all parent’s variables.

Phạm vi JavaScript có thể ném rất nhiều vấn đề vào bạn! hiểu nó một cách kỹ lưỡng

4) Hiểu tốt từ khóa này (toàn cầu, chức năng và phạm vi đối tượng)

Trong JavaScript, chúng tôi luôn sáng tác mã với các chức năng và đối tượng. Nếu bạn lấy trình duyệt, trong bối cảnh toàn cầu, nó đề cập đến đối tượng cửa sổ. Ý tôi là điều này sẽ đánh giá đúng nếu bạn mở bảng điều khiển trình duyệt ngay bây giờ và nhập cái này.

console.log(square(5));
 var square = function(n) { 
  return n * n; 
}

Khi bối cảnh và phạm vi của chương trình thay đổi, điều này tại điểm cụ thể đó sẽ thay đổi tương ứng. Bây giờ hãy xem điều này trong một bối cảnh địa phương là:this at that particular point changes accordingly. Now see this in a local context is:

console.log(square(5));
 var square = function(n) { 
  return n * n; 
}

Bây giờ bạn sẽ bị cám dỗ để dự đoán đầu ra này.

console.log(square(5));
 var square = function(n) { 
  return n * n; 
}

Không, nó đã thắng. Bởi vì đây là một đối tượng toàn cầu ở đây. Hãy nhớ rằng, bất kể phạm vi cha mẹ là gì, nó sẽ được thừa hưởng bởi đứa trẻ. Vì vậy, nó in đối tượng cửa sổ. Ba phương pháp chúng tôi đã thảo luận thực sự được sử dụng để đặt đối tượng này.this object.

Bây giờ đến loại cuối cùng của điều này. Điều này trong phạm vi đối tượng. Nơi đâythis in object scope. Here

TypeError: square is not a function

Tôi chỉ sử dụng cú pháp getter là một hàm có thể được gọi là một biến.

TypeError: square is not a function

Ở đây, điều này thực sự đề cập đến chính đối tượng. Điều này như chúng tôi đã đề cập trước đây hành xử khác nhau ở những nơi khác nhau. Biết rõ về họ.this as we previously mentioned behaves differently in different places. Know them well.

5) Hiểu rõ đối tượng (Object.Freeze, Object.Seal)

Nhiều người trong chúng ta biết các đối tượng như thế này.

TypeError: square is not a function

Đó là một bản đồ lưu trữ khóa, các cặp giá trị. Các đối tượng JavaScripts có một thuộc tính đặc biệt là lưu trữ bất cứ thứ gì như một giá trị. Nó có nghĩa là chúng ta có thể lưu trữ một danh sách, một đối tượng khác, một hàm, vv như một giá trị. Những gì không?

Bạn có thể tạo một đối tượng theo những cách này:

TypeError: square is not a function

Bạn có thể dễ dàng chuyển đổi một đối tượng đã cho thành chuỗi JSON và cũng đảo ngược lại bằng các phương thức Stringify và phân tích cú pháp của JSON Object.stringify and parse methods respectively.

TypeError: square is not a function

Vậy một vài điều về các đối tượng bạn nên biết là gì?

Lặp đi lặp lại đối tượng rất dễ dàng, sử dụng object.keysObject.keys

TypeError: square is not a function

Object.values ​​trả về danh sách các giá trị của một đối tượng.returns the list of values of an object.

Các chức năng quan trọng khác trên một đối tượng là:

• Object.prototype(object)
• Object.freeze(function)
• Object.seal(function)

Object.prototype cung cấp các chức năng quan trọng hơn có nhiều ứng dụng. Một số trong số họ là:provides more important functions that have many applications. Some of them are:

Object.prototype.hasownProperty rất hữu ích để tìm hiểu xem một thuộc tính/khóa nhất định có tồn tại trong một đối tượng hay không.is useful to find out whether a given property/key exists in an object.

TypeError: square is not a function

Object.prototype.instanceof đánh giá xem một đối tượng nhất định có phải là loại nguyên mẫu cụ thể hay không (chúng ta sẽ thấy chúng trong phần tiếp theo, chúng là các hàm).evaluates whether a given object is the type of a particular prototype(we will see them in the next section, they are functions).

TypeError: square is not a function

Bây giờ đến hai chức năng khác. Object.Freeze cho phép chúng ta đóng băng một đối tượng để không thể sửa đổi các thuộc tính hiện có.Object.freeze allows us to freeze an object so that existing properties cannot be modified.

TypeError: square is not a function

Ở đây chúng tôi đang cố gắng sửa đổi giá trị của thuộc tính vật lý sau khi đóng băng đối tượng. Nhưng, JavaScript sẽ không cho phép làm điều đó. Chúng ta có thể tìm thấy một đối tượng nhất định có bị đóng băng hay không như thế này.physics property after freezing the object. But, JavaScript will not allow doing that. We can find whether a given object is frozen or not like this.

TypeError: square is not a function

Object.Seal hơi khác so với đóng băng. Nó cho phép các thuộc tính có thể định cấu hình nhưng won cho phép bổ sung hoặc xóa tài sản mới hoặc các thuộc tính.is slightly different from the freeze. It allows configurable properties but won’t allow new property addition or deletion or properties.

var simpleLibrary = function() {
   var simpleLibrary = {
        a,
        b,
        add: function(a, b) {
            return a + b;
        },
        subtract: function(a, b) {
            return a - b;   
        }
   }
  return simpleLibrary;
}();

Chúng ta cũng có thể kiểm tra xem một đối tượng nhất định có được niêm phong bằng cách sử dụng cái này không

var simpleLibrary = function() {
   var simpleLibrary = {
        a,
        b,
        add: function(a, b) {
            return a + b;
        },
        subtract: function(a, b) {
            return a - b;   
        }
   }
  return simpleLibrary;
}();

Có nhiều chức năng/phương pháp quan trọng khác có sẵn trên chức năng đối tượng toàn cầu. Tìm chúng ở đây.Object function. Find them here.

6) Hiểu được kế thừa nguyên mẫu tốt

Trong JavaScript truyền thống, có khái niệm thừa kế trong một sự ngụy trang. Đó là bằng cách sử dụng một kỹ thuật tạo mẫu. Tất cả các cú pháp lớp mới mà bạn thấy trong ES5, ES6 chỉ là một lớp đường cú pháp cho các nguyên mẫu cơ bản OOP. Tạo một lớp được thực hiện bằng cách sử dụng một chức năng trong JavaScript.class syntax you see in ES5, ES6 is just a syntactical sugar coating for the underlying prototypical OOP. Creating a class is done using a function in JavaScript.

var simpleLibrary = function() {
   var simpleLibrary = {
        a,
        b,
        add: function(a, b) {
            return a + b;
        },
        subtract: function(a, b) {
            return a - b;   
        }
   }
  return simpleLibrary;
}();

Ở đây chúng tôi đang tạo các đối tượng cho lớp (sử dụng từ khóa mới). Chúng ta có thể thêm các phương thức cho một lớp (hàm) nhất định như thế này. Đính kèm một phương thức lớp như thế này.new keyword). We can add methods for a given class(function) like this. Attach a class method like this.

var simpleLibrary = function() {
   var simpleLibrary = {
        a,
        b,
        add: function(a, b) {
            return a + b;
        },
        subtract: function(a, b) {
            return a - b;   
        }
   }
  return simpleLibrary;
}();

Ở đây bạn có thể nhận được một nghi ngờ. Không có thuộc tính âm thanh trong lớp. Đúng! Hầu như không có một thuộc tính âm thanh được xác định. Điều đó được dự định sẽ được thông qua bởi các lớp trẻ em được thừa hưởng trên lớp.

Trong JavaScript, kế thừa đạt được như thế này.

var simpleLibrary = function() {
   var simpleLibrary = {
        a,
        b,
        add: function(a, b) {
            return a + b;
        },
        subtract: function(a, b) {
            return a - b;   
        }
   }
  return simpleLibrary;
}();

Tôi đã xác định một chức năng cụ thể hơn gọi là chó. Ở đây, để kế thừa lớp động vật, chúng ta cần thực hiện chức năng cuộc gọi (chúng ta đã thảo luận trước đó) với việc truyền lại điều này và các đối số khác. Chúng ta có thể khởi tạo một Shepard của Đức như thế này.Dog. Here, in order to inherit the Animal class, we need to perform call function(we discussed it earlier) with passing this and other arguments.We can instantiate a German Shepard like this.

var simpleLibrary = function() {
   var simpleLibrary = {
        a,
        b,
        add: function(a, b) {
            return a + b;
        },
        subtract: function(a, b) {
            return a - b;   
        }
   }
  return simpleLibrary;
}();

Chúng tôi không gán tên và loại trong hàm con, chúng tôi đang gọi Super Function Animal và đặt các thuộc tính tương ứng. Thú cưng đang có các thuộc tính (tên, loại) của cha mẹ. Nhưng những gì về các phương pháp. Họ cũng được thừa hưởng? Để xem nào!Animal and setting the respective properties. The pet is having the properties(name, type) of the parent. But what about the methods. Are they inherited too? Let us see!

var simpleLibrary = function() {
   var simpleLibrary = {
        a,
        b,
        add: function(a, b) {
            return a + b;
        },
        subtract: function(a, b) {
            return a - b;   
        }
   }
  return simpleLibrary;
}();

Gì? Tại sao điều đó xảy ra? Nó xảy ra bởi vì chúng tôi đã nói rằng JavaScript để kế thừa các phương pháp lớp cha. Làm thế nào để khắc phục điều đó?

var simpleLibrary = function() {
   var simpleLibrary = {
        a,
        b,
        add: function(a, b) {
            return a + b;
        },
        subtract: function(a, b) {
            return a - b;   
        }
   }
  return simpleLibrary;
}();

Bây giờ phương pháp hét lên có sẵn. Chúng ta có thể kiểm tra lớp đối tượng đã cho là gì trong JavaScript bằng cách sử dụng hàm đối tượng.Constructor. Hãy để chúng tôi kiểm tra lớp vật nuôi của chúng tôi là gì.method is available. We can check what is the class of given object in JavaScript using the object.constructor function. Let us check what is the class of our pet.

var simpleLibrary = function() {
   var simpleLibrary = {
        a,
        b,
        add: function(a, b) {
            return a + b;
        },
        subtract: function(a, b) {
            return a - b;   
        }
   }
  return simpleLibrary;
}();

Nó mơ hồ. Con vật là một lớp cha mẹ. Nhưng loại thú cưng chính xác là loại nào? Nó là một loại chó. Điều này xảy ra vì người xây dựng lớp chó.Animal is a parent class. But what type exactly is the pet? It is a Dog type. This occurs because of the constructor of Dog class.

var simpleLibrary = function() {
   var simpleLibrary = {
        a,
        b,
        add: function(a, b) {
            return a + b;
        },
        subtract: function(a, b) {
            return a - b;   
        }
   }
  return simpleLibrary;
}();

Nó là động vật. Chúng ta nên đặt nó thành bản thân lớp chó để tất cả các trường hợp (đối tượng) của lớp nên đặt tên lớp chính xác nơi nó thuộc về.Animal. We should set it to Dog class itself so that all instances(objects) of the class should give correct class name where it belongs to.

var mathLib = {
    pi: 3.14,
    area: function(r) {
        return this.pi * r * r;
    },
    circumference: function(r) {
        return 2 * this.pi * r;
    }
};

Bốn điều bạn nên nhớ về kế thừa nguyên mẫu.

• Thuộc tính lớp bị ràng buộc bằng cách sử dụng cái nàythis
• Các phương thức lớp bị ràng buộc bằng cách sử dụng đối tượng nguyên mẫuprototype object
• Để kế thừa các thuộc tính, hãy sử dụng chức năng cuộc gọi vượt qua đối tượng nàycall function passing this object
• Để thừa hưởng các phương thức, hãy sử dụng Object.Create để liên kết các nguyên mẫu của cha mẹ và con cáiObject.create to link prototypes of parent and child
• Luôn đặt hàm tạo lớp trẻ em thành chính nó để có được danh tính phù hợp của các đối tượng của nó

Lưu ý: Đây là những điều xảy ra dưới mui xe ngay cả với cú pháp lớp mới. Biết điều này có giá trị cho kiến ​​thức JS của bạn.: These are things happens under the hood even with new class syntax. Knowing this is valuable for your JS knowledge.

Trong JS, hàm gọi và đối tượng nguyên mẫu cung cấp sự kế thừacall function and prototype object provides inheritance

7) Hiểu rõ về các cuộc gọi lại và lời hứa

Gọi lại là các chức năng được thực hiện sau khi hoạt động I/O được thực hiện. Hoạt động I/O thời gian có thể chặn mã không cho phép thực hiện thêm trong Python/Ruby. Nhưng trong JavaScript, do thực thi không đồng bộ được phép, chúng ta có thể cung cấp các cuộc gọi lại cho các hàm Async. Ví dụ là cuộc gọi AJAX (XMLHTTPREQUEST) từ trình duyệt đến máy chủ, các sự kiện được tạo bởi chuột. bàn phím, vv ví dụ là

var mathLib = {
    pi: 3.14,
    area: function(r) {
        return this.pi * r * r;
    },
    circumference: function(r) {
        return 2 * this.pi * r;
    }
};

Ở đây Reqlistener là cuộc gọi lại sẽ được thực hiện khi yêu cầu nhận được trả lời thành công.reqListener is the callback which will be executed when a GET request to is successfully responded back.

Lời hứa là giấy gói gọn gàng cho các cuộc gọi lại cho phép chúng ta không đồng bộ mã thanh lịch. Tôi đã thảo luận rất nhiều về những lời hứa ở đây. Đây cũng là một phần quan trọng nên được biết đến trong JS.

8) Hiểu rõ các biểu thức thông thường

Biểu thức thường xuyên có nhiều ứng dụng. Xử lý văn bản, thực thi các quy tắc trên đầu vào của người dùng, v.v ... Một nhà phát triển JavaScript nên biết cách thực hiện regex cơ bản và giải quyết các vấn đề. Regex là một khái niệm phổ quát. Chúng tôi ở đây thấy làm thế nào chúng tôi có thể làm điều đó từ JS.

Chúng ta có thể tạo một biểu thức thông thường mới bằng cách sử dụng điều này

var mathLib = {
    pi: 3.14,
    area: function(r) {
        return this.pi * r * r;
    },
    circumference: function(r) {
        return 2 * this.pi * r;
    }
};

Biểu thức chính quy trên là một biểu thức phù hợp với tập hợp các chuỗi đã cho. Khi một regex được xác định, chúng ta có thể cố gắng phù hợp và xem chuỗi phù hợp. Chúng ta có thể khớp với các chuỗi bằng hàm EXEC.exec function.

var mathLib = {
    pi: 3.14,
    area: function(r) {
        return this.pi * r * r;
    },
    circumference: function(r) {
        return 2 * this.pi * r;
    }
};

Có một vài lớp ký tự đặc biệt cho phép chúng tôi viết các biểu thức thông thường phức tạp.

Có nhiều loại yếu tố trong Regex. Một số trong số họ là:

• Ký tự ex: \ w - chữ và số, \ d - thập phân, \ d - không số thập phân
• Các lớp ký tự Ex: [x-y] trong phạm vi x đến y, [^x] không phải x
• Định lượng EX: +,?, * (Người kết hợp tham lam và lười biếng)
• Ranh giới Ex: ^(bắt đầu đầu vào), $ (kết thúc đầu vào)

Sử dụng những điều trên, chúng ta hãy minh họa một vài ví dụ.

var mathLib = {
    pi: 3.14,
    area: function(r) {
        return this.pi * r * r;
    },
    circumference: function(r) {
        return 2 * this.pi * r;
    }
};

Để biết thêm chi tiết về Regex, hãy lướt qua trang cheatesheet này.

Cùng với EXEC, có các chức năng khác là khớp, tìm kiếm và, thay thế có sẵn để tìm một chuỗi trong một chuỗi khác bằng cách sử dụng các biểu thức thông thường. Nhưng các chức năng này nên được sử dụng trên chính chuỗi.exec, there are other functions namely match, search and, replace are available for finding a string in another using regular expressions. But these functions should be used on the string itself.

var mathLib = {
    pi: 3.14,
    area: function(r) {
        return this.pi * r * r;
    },
    circumference: function(r) {
        return 2 * this.pi * r;
    }
};

Regex là một chủ đề quan trọng cần được các nhà phát triển hiểu về việc giải quyết các vấn đề phức tạp một cách dễ dàng.

9) Hiểu bản đồ, giảm và lọc tốt

Lập trình chức năng là một chủ đề thảo luận những ngày này. Nhiều ngôn ngữ lập trình bao gồm các khái niệm chức năng như lambdas vào các phiên bản mới hơn của chúng (ví dụ: java> 7). Trong hỗ trợ JavaScript cho các cấu trúc lập trình chức năng tồn tại trong một thời gian dài. Có ba chức năng chính chúng ta cần học sâu. Các chức năng toán học lấy một số đầu vào và trả về đầu ra. Một hàm thuần túy luôn trả về cùng một đầu ra cho đầu vào đã cho. Các chức năng chúng tôi thảo luận bây giờ cũng đáp ứng sự thuần khiết.

bản đồ

Hàm bản đồ có sẵn trên một mảng JavaScript. Sử dụng chức năng này, chúng ta có thể nhận được một mảng mới bằng cách áp dụng chức năng chuyển đổi trên mỗi phần tử trong mảng. Cú pháp chung cho bản đồ mảng JS hoạt động:map function is available on a JavaScript array. Using this function, we can get a new array by applying a transformation function on each and every element in the array. The general syntax for JS array map operationis:

var mathLib = {
    pi: 3.14,
    area: function(r) {
        return this.pi * r * r;
    },
    circumference: function(r) {
        return 2 * this.pi * r;
    }
};

Giả sử, có một vài nhân vật không mong muốn được nhập vào các khóa nối tiếp mà chúng ta đang làm việc gần đây. Chúng ta cần phải loại bỏ chúng. Thay vì loại bỏ ký tự bằng cách lặp và tìm kiếm, chúng ta có thể sử dụng MAP để thực hiện cùng một thao tác và nhận mảng kết quả.map to perform the same operation and get result array.

var mathLib = {
    pi: 3.14,
    area: function(r) {
        return this.pi * r * r;
    },
    circumference: function(r) {
        return 2 * this.pi * r;
    }
};

Lưu ý: Chúng tôi đã sử dụng cú pháp mũi tên để định nghĩa chức năng trong JavaScript ES6: We used the arrow syntax for function definition in JavaScript ES6

Các maptakes một chức năng như một đối số. Chức năng đó có một đối số. Đối số đó được chọn từ mảng. Chúng ta cần trả về phần tử được xử lý và điều đó sẽ được áp dụng cho tất cả các phần tử trong mảng.maptakes a function as an argument. That function has an argument. That argument is picked from the array. We need to return the processed element and that will be applicable to all elements in the array.

giảm

Giảm chức năng làm giảm một danh sách nhất định xuống một kết quả cuối cùng. Chúng ta cũng có thể làm điều tương tự bằng cách lặp lại mảng và lưu kết quả trung gian vào một biến. Nhưng đây là một cách sạch hơn để giảm một mảng thành một giá trị. Cú pháp chung cho hoạt động giảm JS là:reduce operation is:

var mathLib = {
    pi: 3.14,
    area: function(r) {
        return this.pi * r * r;
    },
    circumference: function(r) {
        return 2 * this.pi * r;
    }
};

Bộ tích lũy lưu trữ giá trị trung gian và cuối cùng. CurrentIndex, currentValue là chỉ mục và, giá trị của phần tử từ mảng tương ứng. initicCumulatorValue chuyển giá trị đó cho đối số tích lũy. accumulator stores the intermediate and final value. The currentIndex, currentValue are index and, the value of the element from the array respectively. initialAccumulatorValue passes that value to accumulator argument.

Một ứng dụng thực tế để giảm có thể làm phẳng một mảng mảng. Flattening đang chuyển đổi các mảng bên trong thành một mảng duy nhất. Cho người yêu cũ:reduce can be flattening an array of arrays. Flattening is converting internal arrays to one single array. For Ex:

var mathLib = {
    pi: 3.14,
    area: function(r) {
        return this.pi * r * r;
    },
    circumference: function(r) {
        return 2 * this.pi * r;
    }
};

Chúng ta có thể đạt được điều này bằng cách lặp bình thường. Nhưng sử dụng giảm, nó là một mã thẳng. Ảo thuật!reduce, it is a straight code. Magic!

mathLib.area(2);
12.56

lọc

Đây là loại thứ ba của khái niệm lập trình chức năng. Nó gần với bản đồ vì nó cũng xử lý từng phần tử trong mảng và cuối cùng trả về một mảng khác (không trả về một giá trị như giảm). Độ dài của mảng được lọc có thể nhỏ hơn hoặc bằng mảng gốc. Bởi vì điều kiện lọc mà chúng tôi vượt qua có thể loại trừ một vài đầu vào/0 trong mảng đầu ra. Cú pháp chung cho bộ lọc JS hoạt động:map as it also processes each element in the array and finally returns another array(not returning a value like in reduce). The length of the filtered array can be less than or equal to the original array. Because the filtering condition we pass may exclude few/zero inputs in the output array. The general syntax for JS filter operationis:

mathLib.area(2);
12.56

Ở đây ELEM là phần tử dữ liệu của mảng và true/false phải được trả về từ hàm để chỉ ra/loại trừ phần tử được lọc. Ví dụ phổ biến là lọc mảng các từ bắt đầu và kết thúc bằng các điều kiện nhất định. Giả sử, chúng ta nên lọc một mảng các từ bắt đầu bằng T và kết thúc bằng r.elem is the data element of the array and true/false should be returned from the function to indicate inclusion/exclusion of filtered element. The common example is to filter the array of words which starts and ends with given conditions. Suppose, we should filter an array of words which starts with t and ends with r.

mathLib.area(2);
12.56

Ba chức năng này phải nằm trong tầm tay của bạn bất cứ khi nào ai đó hỏi bạn về các khía cạnh lập trình chức năng của JavaScript. Như bạn thấy, mảng ban đầu không thay đổi trong cả ba trường hợp chứng minh độ tinh khiết của các chức năng này.

10) Hiểu các mẫu xử lý lỗi

Đây là phần ít được chăm sóc nhất của JavaScript của nhiều nhà phát triển. Tôi thấy rất nhiều nhà phát triển nói về xử lý lỗi. Một cách tiếp cận phát triển tốt luôn luôn cẩn thận bao bọc mã JS xung quanh các khối thử/bắt.

Nicholas C. Zakas, một kỹ sư UI tại Yahoo, cho biết vào năm 2008, luôn luôn cho rằng mã của bạn sẽ thất bại. Các sự kiện có thể không được xử lý đúng cách! Đăng nhập chúng vào máy chủ. Ném lỗi của riêng bạn. ”

Trong JavaScript bất cứ khi nào chúng ta mã hóa tình cờ, mọi thứ có thể thất bại. Cho người yêu cũ:

mathLib.area(2);
12.56

Ở đây, chúng ta đang rơi vào bẫy nói rằng kết quả sẽ luôn là một đối tượng JSON. Đôi khi máy chủ có thể gặp sự cố và NULL sẽ được trả lại thay vì kết quả. Trong trường hợp đó, null [bài viết trên mạng] sẽ gây ra lỗi. Việc xử lý thích hợp có thể là điều này!

mathLib.area(2);
12.56

Hàm logerror nhằm báo cáo lỗi trở lại máy chủ. Hàm flashinfomessage thứ hai là chức năng hiển thị thông báo thân thiện với người dùng như dịch vụ không có sẵn hiện tại, v.v. logError function is intended to report the error back to the server. The second function flashInfoMessage is the function that displays a user-friendly message like “Service unavailable currently” etc.

Nicholas nói rằng lỗi ném thủ công bất cứ khi nào bạn cảm thấy điều gì đó bất ngờ sẽ xảy ra. Phân biệt giữa các lỗi gây tử vong và không gây tử vong. Lỗi trên có liên quan đến máy chủ phụ trợ đi xuống gây tử vong. Ở đó, bạn nên thông báo cho khách hàng rằng dịch vụ bị giảm vì một số lý do. Trong một số trường hợp, nó có thể không gây tử vong nhưng tốt hơn là thông báo cho Sever về điều này. Để tạo mã đó, trước tiên, hãy ném lỗi, hãy bắt nó với sự kiện lỗi tại Window Objectlevel, sau đó thực hiện cuộc gọi API để đăng nhập thông báo đó vào máy chủ.window objectlevel, then make an API call to log that message to the server.

mathLib.area(2);
12.56

Mã này về cơ bản thực hiện ba điều:

1. Nghe lỗi ở cấp độ cửa sổ
2. Bất cứ khi nào xảy ra lỗi, hãy thực hiện cuộc gọi API
3. Trên máy chủ, đăng nhập nó!

Bạn cũng có thể sử dụng chức năng Boolean mới (ES5, ES6) để kiểm tra xem một biến có hợp lệ hay không và không xác định được trước khi tiến hành.Boolean function(ES5, ES6) to check whether a variable is valid and not null (or) undefined before proceeding.

mathLib.area(2);
12.56

Luôn luôn nghĩ cách xử lý các lỗi, không phải trong trình duyệt mà là chính bạn. Mọi thứ có thể thất bại!

Những điều khác cần biết (nâng, sự kiện sủi bọt)

Tất cả các khái niệm trên là chính cho một nhà phát triển JavaScript. Có một vài chi tiết nội bộ để biết những điều đó có thể thực sự hữu ích. Đó là cách JavaScript Engine hoạt động trong trình duyệt. Những gì đang nâng và sự kiện sủi bọt là gì?

Kéo

Tăng cường là một quá trình đẩy các biến được khai báo lên đầu chương trình trong khi chạy nó. Cho người yêu cũ:

mathLib.area(2);
12.56

Khi bạn làm ở trên trong một ngôn ngữ kịch bản như Python, nó đã gây ra một lỗi. Trước tiên, bạn cần xác định và sử dụng nó. Mặc dù JS là một ngôn ngữ kịch bản, nhưng nó có một cơ chế nâng cao. Trong cơ chế này, JavaScript VM thực hiện hai điều trong khi chạy một chương trình:

1. Trước tiên, hãy quét chương trình, thu thập tất cả các khai báo biến và chức năng và gán không gian bộ nhớ cho nó.
2. Chạy chương trình ngay bây giờ bằng cách điền các giá trị biến được gán bất kỳ, nếu không, điền vào không xác địnhundefined

Trong đoạn mã trên, Console.log in không xác định. Đó là bởi vì trong biến số đầu tiên, foo được thu thập. VM tìm kiếm bất kỳ giá trị được xác định cho foo biến. Việc nâng này có thể dẫn đến nhiều tình huống mã JavaScript trong đó mã có thể ném lỗi ở một số nơi và sử dụng âm thầm không xác định trong một nơi khác. Bạn nên biết nâng cao để xóa sự mơ hồ! Xem một vài ví dụ!console.log prints “undefined”. It is because in the first pass variable foo is collected. VM looks for any value defined for variable foo. This hoisting can result in many JavaScript code situations where code can throw errors in some places and uses undefined silently in another. You should be knowing hoisting to clear the ambiguity! See a few examples!

Sự kiện sủi bọt

Bây giờ đến sự kiện sủi bọt! Theo Arun P, một kỹ sư phần mềm cao cấp:

Sự kiện SHOGBLED VÀ CAPRUNING là hai cách truyền sự kiện trong API HTML DOM khi một sự kiện xảy ra trong một yếu tố bên trong một phần tử khác và cả hai phần tử đều đã đăng ký một trình xử lý cho sự kiện đó. Chế độ tuyên truyền sự kiện xác định theo thứ tự các yếu tố nhận được sự kiện.

Với sự sủi bọt, sự kiện này lần đầu tiên được nắm bắt và xử lý bởi yếu tố trong cùng và sau đó được truyền đến các phần tử bên ngoài. Với việc nắm bắt, quá trình là ngược lại. Chúng tôi thường gắn một sự kiện vào một trình xử lý bằng hàm addEventListener.addEventListener function.

mathLib.area(2);
12.56

Đối số thứ ba Usecapture là chìa khóa. Giá trị mặc định là sai. Vì vậy, nó sẽ là một mô hình sủi bọt trong đó sự kiện được xử lý bởi phần tử trong cùng và nó tuyên truyền ra ngoài cho đến khi nó đạt đến phần tử cha. Nếu lập luận đó là đúng, nó đang nắm bắt mô hình.useCapture is the key. The default value is false. So, it will be a bubbling model where the event is handled by the innermost element first and it propagates outwards till it reaches the parent element. If that argument is true, it is capturing model.

Dành cho Ex: Mô hình sủi bọt Bubbling Model

mathLib.area(2);
12.56

Khi chúng tôi nhấp vào phần tử danh sách, thứ tự thực hiện trình xử lý giống như thế này trong mô hình sủi bọt (mặc định).

Handler () => ulhandler () => divHandler ()

Trong sơ đồ, người xử lý đang bắn tuần tự ra ngoài. Tương tự, một mô hình bắt giữ cố gắng bắn các sự kiện vào trong từ cha mẹ đến phần tử được nhấp. Bây giờ thay đổi dòng đơn này trong mã trên.

mathLib.area.call({pi: 3.14159}, 2);

Thứ tự thực hiện các trình xử lý sau đó sẽ là:

DivHandler => ulhandler () => Handler ()

Bạn nên hiểu sự kiện sủi bọt (cho dù hướng xảy ra theo cha mẹ hay hướng tới trẻ) để thực hiện đúng giao diện người dùng (UI) để tránh mọi hành vi không mong muốn.

Đây là những khái niệm cơ bản trong JavaScript. Như tôi đã đề cập ban đầu, ngoài họ, kinh nghiệm và kiến ​​thức làm việc của bạn, sự chuẩn bị giúp bạn phá vỡ một cuộc phỏng vấn JavaScript. Luôn luôn tiếp tục học hỏi. Hãy để mắt đến những phát triển mới nhất (ES6). Đào sâu hơn vào các khía cạnh khác nhau của JavaScript như động cơ V6, thử nghiệm, v.v. Dưới đây là một vài tài nguyên video sẽ dạy cho bạn nhiều điều. Cuối cùng, không có cuộc phỏng vấn nào thành công mà không thành thạo các cấu trúc & thuật toán dữ liệu. Oleksii Trekhleb đã quản lý một repo git tuyệt vời bao gồm tất cả các thuật toán chuẩn bị phỏng vấn với mã JS. Đi qua họ.

Nếu bạn thích bài viết này, cảm ơn! Bạn có thể theo dõi tôi tại @narencena3

References:

Tôi có thể phá vỡ cuộc phỏng vấn của Google với JavaScript không?

Tôi có thể phỏng vấn bằng JavaScript không?

Câu hỏi JavaScript được hỏi trong cuộc phỏng vấn là gì?

Tôi có thể bẻ khóa phỏng vấn mã hóa trong 1 tháng không?