Lặn sâu JavaScript
|
Vì tất cả Phần mềm đều dựa trên Web nên JavaScript thống trị web. Mọi phần mềm dựa trên Web đang ngày càng phụ thuộc nhiều hơn vào JavaScript Show
Tìm hiểu cách viết mã bằng một trong những ngôn ngữ được yêu cầu nhiều nhất hiện nay Bàn thắng
điều kiện tiên quyết
Tài liệu này được viết để giúp các nhà phát triển JavaScript hiểu sâu về các phần kỳ lạ của JavaScript và để chuẩn bị cho các cuộc phỏng vấn, các tài nguyên sau thực sự hữu ích để viết tài liệu này
Bối cảnh thực hiện
Định nghĩa bài văn
Phạm vi
Khép kín
IIFE
cẩu
Gọi lại
địa ngục gọi lại
Lời hứa
polyfill
dự phòng
ghi chú
Ví dụ về lời hứa function task1() { return new Promise(function(resolve, reject) { setTimeout(function() { console.log('Task1 is completed'); resolve(); }, 1100); }); } function task2() { return new Promise(function(resolve, reject) { setTimeout(function() { console.log('Task2 is completed'); resolve(); }, 1200); }); } function task3() { return new Promise(function(resolve, reject) { setTimeout(function() { console.log('Task3 is completed'); resolve(); }, 1300); }); } task1() .then(task2) .then(task3); Liên kết polyfill if (!('bind' in Function.prototype)) { Function.prototype.bind = function() { var func = this; var obj = arguments[0]; var params = Array.prototype.slice.call(arguments, 1); return function() { func.apply(obj, params.concat(Array.prototype.slice.call(arguments))); } } }thủ thuật chức năng Người trang tríLà một trình bao bọc xung quanh một chức năng làm thay đổi hành vi của nó. Giống như lưu trữ kết quả hoặc định dạng chúng Để thực hiện chúng, chúng ta cần
Ghi chú
chức năng một phầnTạo một chức năng mới bằng cách sửa một số tham số của chức năng hiện có chức năng cà ri
Chuyển hướng cuộc gọiHàm bao bọc chuyển mọi thứ mà nó nhận được sang một hàm khác function wrapper() { return printArgs.apply(this, arguments); } Phương thức mượnSử dụng một phương thức từ một đối tượng khác trên đối tượng của chúng tôi Array.prototype.slice.call(arguments);
Hàm xây dựng
Để cho phép tạo một đối tượng có hoặc không có if (!('bind' in Function.prototype)) { Function.prototype.bind = function() { var func = this; var obj = arguments[0]; var params = Array.prototype.slice.call(arguments, 1); return function() { func.apply(obj, params.concat(Array.prototype.slice.call(arguments))); } } }08 (không khuyến nghị) function User(name) { // Not called with new if (!new.target) { return new User(name); } this.name = name; } Mẫu if (!('bind' in Function.prototype)) { Function.prototype.bind = function() { var func = this; var obj = arguments[0]; var params = Array.prototype.slice.call(arguments, 1); return function() { func.apply(obj, params.concat(Array.prototype.slice.call(arguments))); } } }24 để đóng gói việc tạo một đối tượng var user = new function() { this.name = 'Anas'; this.age = 'Ali'; } nguyên mẫu
Mục tiêu. tạo nên()Tạo một đối tượng trống với proto đã cho là if (!('bind' in Function.prototype)) { Function.prototype.bind = function() { var func = this; var obj = arguments[0]; var params = Array.prototype.slice.call(arguments, 1); return function() { func.apply(obj, params.concat(Array.prototype.slice.call(arguments))); } } }25 (có thể là null) và các bộ mô tả thuộc tính tùy chọn Object.create(proto[, descriptors]) Chúng ta có thể sử dụng if (!('bind' in Function.prototype)) { Function.prototype.bind = function() { var func = this; var obj = arguments[0]; var params = Array.prototype.slice.call(arguments, 1); return function() { func.apply(obj, params.concat(Array.prototype.slice.call(arguments))); } } }50 để thực hiện nhân bản đối tượng var clone = Object.create(Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj)); Để tạo một đối tượng trống không có nguyên mẫu Object.create(null) Nguyên mẫu bản địa
mẫu lớp
Ghi chú
Ví dụ mẫu chức năng function User(firstName, lastName) { var self = this; this.firstName = firstName; this.lastName = lastName; function getFirstName() { return self.firstName; } function getLastName() { return self.lastName; } this.getFullName = function() { return getFirstName() + ' ' + getLastName(); } } var user = new User('Ahmad', 'Fares'); console.log(user.getFullName()); Ví dụ mẫu giai thừa if (!('bind' in Function.prototype)) { Function.prototype.bind = function() { var func = this; var obj = arguments[0]; var params = Array.prototype.slice.call(arguments, 1); return function() { func.apply(obj, params.concat(Array.prototype.slice.call(arguments))); } } }0 Ví dụ về mẫu dựa trên nguyên mẫu if (!('bind' in Function.prototype)) { Function.prototype.bind = function() { var func = this; var obj = arguments[0]; var params = Array.prototype.slice.call(arguments, 1); return function() { func.apply(obj, params.concat(Array.prototype.slice.call(arguments))); } } }1 Di sản
4 cách để tạo một chức năng
ghi chú
if (!('bind' in Function.prototype)) { Function.prototype.bind = function() { var func = this; var obj = arguments[0]; var params = Array.prototype.slice.call(arguments, 1); return function() { func.apply(obj, params.concat(Array.prototype.slice.call(arguments))); } } }2Chuyển đổi loại chuyển đổi ngầm định
chuyển đổi rõ ràngthành chuỗi
Đến số
ghi chú
để BooleanSai. các giá trị trống bằng trực giác
Thật. nếu không thì
ghi chú
if (!('bind' in Function.prototype)) { Function.prototype.bind = function() { var func = this; var obj = arguments[0]; var params = Array.prototype.slice.call(arguments, 1); return function() { func.apply(obj, params.concat(Array.prototype.slice.call(arguments))); } } }3 if (!('bind' in Function.prototype)) { Function.prototype.bind = function() { var func = this; var obj = arguments[0]; var params = Array.prototype.slice.call(arguments, 1); return function() { func.apply(obj, params.concat(Array.prototype.slice.call(arguments))); } } }4 if (!('bind' in Function.prototype)) { Function.prototype.bind = function() { var func = this; var obj = arguments[0]; var params = Array.prototype.slice.call(arguments, 1); return function() { func.apply(obj, params.concat(Array.prototype.slice.call(arguments))); } } }5 if (!('bind' in Function.prototype)) { Function.prototype.bind = function() { var func = this; var obj = arguments[0]; var params = Array.prototype.slice.call(arguments, 1); return function() { func.apply(obj, params.concat(Array.prototype.slice.call(arguments))); } } }6 Ví dụ về chức năng mũi tênNhiều đối số if (!('bind' in Function.prototype)) { Function.prototype.bind = function() { var func = this; var obj = arguments[0]; var params = Array.prototype.slice.call(arguments, 1); return function() { func.apply(obj, params.concat(Array.prototype.slice.call(arguments))); } } }7 đối số duy nhất if (!('bind' in Function.prototype)) { Function.prototype.bind = function() { var func = this; var obj = arguments[0]; var params = Array.prototype.slice.call(arguments, 1); return function() { func.apply(obj, params.concat(Array.prototype.slice.call(arguments))); } } }8 Hàm mũi tên nhiều dòng if (!('bind' in Function.prototype)) { Function.prototype.bind = function() { var func = this; var obj = arguments[0]; var params = Array.prototype.slice.call(arguments, 1); return function() { func.apply(obj, params.concat(Array.prototype.slice.call(arguments))); } } }9 Giá trị mặc định
ghi chú
function wrapper() { return printArgs.apply(this, arguments); }0Sử dụng nghiêm ngặt
Một số khác biệtKhông thể vô tình tạo các biến toàn cục function wrapper() { return printArgs.apply(this, arguments); }1 Ném lỗi khi cố xóa thuộc tính không thể xóa function wrapper() { return printArgs.apply(this, arguments); }2 Ném lỗi khi cố gắng thay đổi thuộc tính không thể ghi function wrapper() { return printArgs.apply(this, arguments); }3 Ném lỗi khi tên đối số hàm không phải là duy nhất function wrapper() { return printArgs.apply(this, arguments); }4 Không còn có thể tham chiếu đối tượng if (!('bind' in Function.prototype)) { Function.prototype.bind = function() { var func = this; var obj = arguments[0]; var params = Array.prototype.slice.call(arguments, 1); return function() { func.apply(obj, params.concat(Array.prototype.slice.call(arguments))); } } }07 đến Array.prototype.slice.call(arguments);5 bên trong một hàm function wrapper() { return printArgs.apply(this, arguments); }5 Các thuộc tính Array.prototype.slice.call(arguments);02, Array.prototype.slice.call(arguments);03 và if (!('bind' in Function.prototype)) { Function.prototype.bind = function() { var func = this; var obj = arguments[0]; var params = Array.prototype.slice.call(arguments, 1); return function() { func.apply(obj, params.concat(Array.prototype.slice.call(arguments))); } } }83 có thể không được truy cập trên các chức năng chế độ nghiêm ngặt |
