高级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小时内删除侵权内容。