高級JavaScript教程：最佳指南【WEB前端大作戰】

網絡的興起已經取代了?javaScript?從未想到的地方。它已成為當今世界上最重要的語言之一。在之前的JavaScript教程中，我們討論了該語言的所有基礎知識。在本高級JavaScript教程中，我們將按以下順序學習編程語言的一些高級方面：

Overview of JavaScript

Advanced Working with Functions

JavaScript Namespaces

Prototypes

Error Handling

Modules in JavaScript

Chaining JavaScript Methods

Generators

JavaScript概述

JavaScript?是一種高級的，解釋性的編程語言，用于使網頁更具交互性。它是一種非常強大的客戶端腳本語言，可以使您的網頁更加生動和互動。

它是一種編程語言，可以幫助您在網頁上實現復雜而美觀的設計。如果您希望您的網頁看起來生動活潑，并且要做很多事情，而不僅僅是盯著您看，那么JavaScript是必須的。

JavaScript的功能：

它是一種腳本語言，與Java無關。最初，它的名稱為Mocha，然后更改為LiveScript，最后它的名稱為JavaScript。

JavaScript是一種基于對象的編程語言，還支持多態性，封裝和繼承。

您不僅可以在瀏覽器中運行JavaScript?，??還可以在服務器?和任何具有JavaScript引擎的設備上?運行JavaScript?。

之前的JavaScript教程中討論的一些基礎知識和基本知識是：

Variables

Constants

Data Types

Objects

Arrays

Functions

Conditional Statements

Loops

Switch case

在這個高級JavaScript教程中，我們將深入探討JavaScript的高級方面。

高級功能

由函數是用于執行單，有關動作的組織的，可重復使用的代碼塊。使用功能的一些高級功能包括：

Recursion

Closure

The “new Function”

Arrow Functions

Rest Parameters & Spread Operator

Global Object

Function Object

SetTimeOut & SetInterval

Function Binding

遞歸

遞歸是一種編程模式，可以在任務可以自然地拆分為相同類型但更簡單的多個任務的情況下提供幫助。或者，當一項任務可以簡化為同一任務的簡單操作和更簡單的變體時。

在解決任務的過程中，一個函數可以調用許多其他函數。這種情況的部分情況是函數調用自身時。因此，這稱為遞歸。

例子：

function pow(x, n) { if (n == 1) { return x; } else { return x * pow(x, n - 1); } } alert( pow(2, 4) ); // 16

在上面的示例中，遞歸函數簡化了任務并對其進行了調用。

閉包

JavaScript是一種面向函數的語言。您可以動態創建一個函數，將其復制到另一個變量，或者將其作為參數傳遞給另一個函數，然后從另一個完全不同的地方進行調用。

一個封閉的是，記住它的外部變量，可以訪問它們的功能。在某些語言中，這是不可能的，或者應該以特殊的方式編寫函數以使其實現。但是在JavaScript中，所有功能自然都是閉包。

例子：

var add = (function () { var counter = 0; return function () {counter += 1; return counter} })(); add(); add(); // the counter is now 2

“new Function”

“new Function”語法是創建功能的另一種方法。它很少使用，但有時別無選擇。

句法：

let func = new Function ([arg1, arg2, ...argN], functionBody);

該函數由參數arg1…argN和給定的functionBody組成。

例子：

let sum = new Function('a', 'b', 'return a + b'); alert( sum(1, 2) ); // 3

在這里，該函數實際上是從字符串創建的，該字符串在運行時傳遞。您需要在腳本中編寫功能代碼。但是“new Function”允許將任何字符串轉換為功能。

Arrow Functions

函數是匿名的，并會更改其綁定函數的方式。它使我們的代碼更簡潔，并簡化了函數作用域和此關鍵字。

但是Arrow功能不僅僅是編寫小東西的簡寫。它們還具有一些非常具體和有用的功能。JavaScript包含需要編寫一個在其他地方執行的小函數的情況，例如：

arr.forEach（func）?–函數由forEach對每個數組項目執行。

setTimeout（func）?– func由內置調度程序執行。

在這樣的函數中，我們通常不想離開當前上下文。那就是箭頭功能派上用場的地方。

例子：

//Arrow Function: hello = () => { document.getElementById("demo").innerHTML += this; } //The window object calls the function: window.addEventListener("load", hello); //A button object calls the function: document.getElementById("btn").addEventListener("click", hello);

Rest Parameters & Spread Operator

許多JavaScript內置函數都支持任意數量的參數，例如：

Math.max（arg1，arg2，…，argN）?–返回最大的參數。

Object.assign（dest，src1，…，srcN）?–將屬性從src1..N復制到dest

Rest Parameters是一種處理函數參數的改進方法，使我們可以更輕松地將各種輸入作為函數中的參數進行處理。rest參數語法允許我們將不確定數量的參數表示為數組。

例子：

// es6 rest parameter function fun(...input){ let sum = 0; for(let i of input){ sum+=i; } return sum; } console.log(fun(1,2)); //3 console.log(fun(1,2,4)); //4 console.log(fun(1,2,4,6)); //13

Spread Operator允許迭代器在期望0+參數的地方擴展。它主要用于期望有1個以上值的變量數組。它使我們有特權從數組中獲取參數列表。

例子：

// spread operator doing the concat job let arr = [1,2,3]; let arr2 = [4,5,6]; arr = [...arr,...arr2]; console.log(arr); // [ 1, 2, 3, 4, 5,6 ]

Global Object

全局對象提供了可在任何地方使用的變量和函數。默認情況下，是語言或環境中內置的語言。最近，globalThis被添加到該語言中，作為全局對象的標準名稱，所有環境都應支持它。

可以直接訪問全局對象的所有屬性：

alert("Hello"); // is the same as window.alert("Hello");

Function Object

在JavaScript中，函數是對象。不同的屬性包括：

名稱–函數名稱。通常取自函數定義，但如果不存在，JavaScript會嘗試從上下文（例如賦值）中猜測它。

length?–函數定義中的參數個數。其余參數不計算在內。

如果函數被聲明為函數表達式，并且帶有名稱，則稱為命名函數表達式。該名稱可在內部用于引用自身，進行遞歸調用等。

例子：

function sayHi() { alert("Hi"); } alert(sayHi.name); // sayHi function f2(a, b) {} function many(a, b, ...more) {} alert(f2.length); // 2 alert(many.length); // 2

SetTimeOut和SetInterval

如果要在以后的某個時間執行某個功能，則稱為調度調用。有兩種方法：

setTimeout允許我們在時間間隔后運行一次函數。

setInterval允許我們重復運行一個函數，從時間間隔開始，然后以該間隔連續重復。

這些方法不是JavaScript規范的一部分。但是大多數環境都有內部調度程序并提供這些方法。

setTimeout

句法：

let timerId = setTimeout(func|code, [delay], [arg1], [arg2], ...)

例子：

function sayHi() { alert('Hello'); } setTimeout(sayHi, 1000);

setInterval

句法：

let timerId = setInterval(func|code, [delay], [arg1], [arg2], ...)

例子：

[/ javascript] //以2秒的間隔重復，

讓timerId = setInterval（（）=> alert（'tick'），2000）;

// 5秒鐘后停止

setTimeout（（）=> {clearInterval（timerId）; alert（'stop'）;}，5000）; [/ javascript]

功能綁定

當將對象方法作為回調傳遞給setTimeout時，存在一個“丟失此問題”的已知問題。函數提供了一個內置的方法綁定，可以解決此問題。

句法：

// more complex syntax will come a little later let boundFunc = func.bind(context);

func.bind（context）的結果是一個類似于函數的特殊“外來對象”，可以作為函數調用，并將調用透明地傳遞給func設置this = context。

例子：

let user = { firstName: "John" }; function func() { alert(this.firstName); } let funcUser = func.bind(user); funcUser(); // John

這些是高級使用功能的示例。現在，讓我們繼續進行此高級JavaScript教程，并了解名稱空間。

JavaScript命名空間

JavaScript不支持名稱空間。但是，命名空間很重要，因為它們有助于減少添加到應用程序的全局范圍中的變量，對象和函數的標識符的數量。JavaScript是一種靈活的語言，有多種方法可以解決此限制并實現您自己的名稱空間。

那么為什么我們需要名稱空間呢？在JavaScript中，代碼共享一個全局名稱空間，該全局名稱空間只是一個包含所有全局變量和功能作為屬性的全局對象。在瀏覽器中，這是窗口對象，如果對象太多，則該窗口對象往往會污染全局范圍。

例子：

let num = 5; var obj = {}; var str = "Hello Edureka!"; function sum(x, y){ total = x + y; return total; } numr = sum(3,3);

在上面的示例中，使用var和let關鍵字正確聲明了標識符num，obj，str和sum。但是函數作用域變量total缺少var，而numr是num的拼寫錯誤。在這里，JavaScript將total和numr都添加到全局名稱空間，這很可能不是您想要的。

高級JavaScript教程：原型

在JavaScript中，對象具有稱為Prototype的特殊隱藏屬性，該屬性描述了null或引用了另一個對象。現在，該對象稱為原型。在此高級JavaScript教程中，我們將討論原型的兩個重要功能：

Prototypal Inheritance

Prototype methods, objects without __proto__

Prototypal Inheritance

在編程中，我們經常想帶點東西并擴展它。假設您有一個帶有其屬性和方法的用戶對象，并且希望將admin和guest虛擬機作為其稍微修改的變體。在這里，您想重用用戶中的內容，而不是復制其方法，而只是在其頂部構建一個新對象。

原型繼承是一種語言特性，可以幫助實現這一點。

例子：

let pet = { eats: true }; let dog = { jumps: true }; dog.__proto__ = pet; // (*) // we can find both properties in dog now: alert( dog.eats ); // true (**) alert( dog.jumps ); // true

在這里，如果您正在尋找dog中的屬性，但缺少該屬性，JavaScript會自動從pet中獲取它。

Prototype methods, objects without __proto__

在原型繼承中，我們使用了__proto__，但是現在這已經過時了。在這個高級JavaScript教程中，我們將介紹建立原型的現代方法：

Object.create（proto [，descriptors]）?–它創建一個空對象，其給定的proto為[[Prototype]]和可選的屬性描述符。

Object.getPrototypeOf（obj）?–這將返回obj的[[Prototype]]。

Object.setPrototypeOf（obj，proto）?–此方法將obj的[[Prototype]]設置為proto。

例子：

let pet = { eats: true }; // create a new object with pet as a prototype let dog = Object.create(pet); alert(dog.eats); // true alert(Object.getPrototypeOf(dog) === pet); // true Object.setPrototypeOf(dog, {}); // change the prototype of dog to {}

現在，讓我們繼續進行此高級JavaScript教程，并了解有關錯誤處理的知識。

錯誤處理

無論您的編程水平如何，腳本都可能包含錯誤。它們可能是由于我們的錯誤，意外的用戶輸入，錯誤的服務器響應或任何其他原因而發生的。

通常，如果發生錯誤，腳本會立即停止，并將其打印到控制臺。現在，有一個語法結構try..catch允許捕獲錯誤，而不是死掉，而是做一些更合理的事情。

Try..Catch語法

try..catch構造有兩個主要塊：

Try

Catch

try { // code... } catch (err) { // error handling }

首先，執行try {…}中的代碼。

如果沒有錯誤，則catch（err）將被忽略。執行到達try的結尾并繼續，跳過catch。

如果發生錯誤，則嘗試執行停止，并且控制流到catch（err）的開頭。

例子：

try { alert('Begin try runs'); // (1) <-- // ...no errors here alert('End try runs'); // (2) <-- } catch(err) { alert('Catch is ignored as there are no errors'); // (3)

本高級JavaScript教程的下一個方面是關于JavaScript中的模塊的。

JavaScript中的模塊

模塊是一個獨立的代碼，它對語義相關的變量和函數進行分組。模塊不是JavaScript中的內置構造。但是JavaScript模塊模式提供了一種創建具有明確定義的接口的模塊的方法，這些接口向模塊的客戶端公開。

模塊的一個重要優點是您可以在必要時修改內部功能，而不會影響程序的其余部分。這促進了封裝和信息隱藏。要在JavaScript中定義模塊，您可以通過創建匿名立即函數來利用匿名閉包。

例子：

var MODULE = (function () { var module = {}; var privateVariable = 7; function privateMethod() { // .. } module.moduleProperty = 1; module.moduleMethod = function () { // ... }; return module; }());

現在，讓我們繼續進行此高級JavaScript教程，并學習有關鏈接JavaScript方法的知識。

鏈接JavaScript方法

JavaScript使您可以在單個表達式中對一個對象調用多個方法。要調用多種方法，我們需要進行鏈接。鏈接是將方法調用與它們之間的點串在一起的過程。

句法：

object.method1().method2().method3();

構建鏈時，該對象僅命名一次，然后在其上調用多個方法。為此，您的方法必須返回對其進行操作的對象。每個方法對對象起作用，完成后將其返回到下一個調用。

例子：

account.number("11324567").setBalance(15000).applyCredit(200);

在上面的示例中，您將學習設置一個銀行帳號，該銀行帳號由帳號，余額和信用額度組成。

JavaScript中的鏈接可以提高性能和可讀性。在這里，jQuery庫廣泛使用鏈接。讓我們來看一個示例，看看如何鏈接jQuery選擇器方法：

$("#myDiv").removeClass("off").addClass("on").css("background": "red");

現在，讓我們繼續進行此高級JavaScript教程，并了解什么是生成器。

Generators

生成器是一類特殊的函數，可簡化編寫迭代器的任務。因此，此函數將生成結果序列而不是單個值并生成一系列值。

因此，在JavaScript中，生成器是一個函數，該函數返回可以在其上調用next（）的對象。因此，每次調用next（）都會返回一個形狀的對象。

例子：

{ value: Any, done: true|false }

value屬性將包含值。done屬性為true或false。當完成變為true時，生成器將停止并且不會再生成任何值。

因此，這些是JavaScript中涉及的一些高級技術和方法。因此，到此，我們到了高級JavaScript教程的結尾。希望您了解高級JavaScript的概念。

JavaScript web前端

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。