技术分享｜Javascript高级教程学习指南

?

?

上个月月初我们分享了一篇JavaScript的前世今生，了解了JS的基础内容。
本篇文章，我们将进入JavaScript高级课程的学习，为大家分享JavaScript高级教程所涵盖的知识要点。

引言

一、JavaScript概述
“JavaScript是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。“

它是一种编程语言，可以帮助我们在网页上实现复杂而美观的设计。如果你希望网页看起来生动活泼，可以实现和用户的交互，那么使用JavaScript是必须的。

二、JavaScript的功能

• 它是一种脚本语言，与Java无关。最初，它的名称为Mocha，然后更改为LiveScript，最后它的名称为JavaScript。
• JavaScript是一种基于对象的编程语言，还支持多态性，封装和继承。
• 不仅可以在浏览器中运行JavaScript，还可以在服务器和任何具有JavaScript引擎的设备上运行JavaScript 。

高级功能

一、递归（Recursion)
递归是一种编程模式，可以在任务自然地拆分为相同类型但更简单的多个子任务的情况下提供帮助。或者可以将一项任务简化为同一任务的简单操作和更简单的变体。

在解决任务的过程中，一个函数可以调用许多其他函数， 但是当函数调用自身时的情况，称为递归。
例如：

function pow(x, n) {
if (n == 1) {
return x;
} else {
return x * pow(x, n - 1);
}
}

alert( pow(2, 4) ); // 16

在上面的示例中，递归函数简化了任务并对其进行了调用。

二、闭包（Closure)
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”允许将任何字符串转换为函数。

四、箭头函数-Arror Function

箭头函数是匿名的，并会更改其绑定函数的方式。它使我们的代码更简洁，并简化了函数作用域和“this”关键字。

但是箭头函数不仅仅是让我们的代码编写更简洁， 它们还具有一些非常具体和有用的功能。 假设需要编写一个在其他地方执行的函数，例如：

1. arr.forEach（func）-func由forEach为每个数组项目执行。
2. setTimeout（func）– func由内置调度程序执行。

在这种功能中，我们通常不想离开当前上下文，此时箭头函数就能派上用场。

例如：

//箭头函数:
hello = () => {
document.getElementById("demo").innerHTML += this;
}
//window对象调用函数:
window.addEventListener("load", hello);
//button调用函数:
document.getElementById("btn").addEventListener("click", hello);

五、剩余参数和展开运算符

许多JavaScript内置函数都支持任意数量的参数，例如：

• Math.max(arg1, arg2, …, argN) – 返回最大的参数。
• Object.assign(dest, src1, …, srcN) – 将属性从src1…N复制到dest

剩余参数是一种处理函数参数的改进方法，使我们可以更轻松地将各种输入的作为函数中的参数进行处理。 剩余参数语法允许我们将不确定数量的参数表示为数组。

例如：

// 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

展开运算符允许迭代器在期望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 ]

六、全局对象

全局对象提供了可在任何地方使用的变量和函数。globalThis被添加到该语言中，作为全局对象的标准名称，所有环境都应支持它。
可以直接访问全局对象的所有属性：

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

七、函数对象

在JavaScript中，函数也是对象。包括不同的属性：

1. name – 函数名称。通常来自定义函数，如果没有，则JavaScript会尝试根据上下文（例如分配）进行猜测。
2. 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]//repeat with the interval of 2 seconds
let timerId = setInterval(() => alert(‘tick’), 2000);

// after 5 seconds stop
setTimeout(() => { clearInterval(timerId); alert(‘stop’); }, 5000);[/javascript]

九、函数绑定

当将对象方法作为回调传递给setTimeout时，存在一个“losing this”的已知问题。函数提供了一个内置的方法绑定，可以解决此问题。

语法：

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中，代码共享一个全局名称空间，该全局名称空间只是一个单个全局对象，其中包含所有全局变量和函数作为属性。在浏览器中，这是窗口对象，如果对象太多，则该窗口对象往往会污染全局范围。

例如：

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或引用了另一个对象。现在，该对象称为原型。在这我们将讨论原型的两个重要功能：

1. 原型继承
2. 原型方法, 没有 __proto__的对象

原型继承

在编程中，我们经常想添加点东西并扩展它。假设你有一个带有其属性和方法的用户对象，并且希望将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

在这里，如果你正在寻找狗的财产，但该财产不见了，JavaScript会自动从宠物那里获取它。

原型方法, 没有 __proto__的对象

在原型继承中，我们使用了__proto__，但是现在这已经过时了。在这个高级JavaScript教程中，我们将介绍建立原型的现代方法：

• Object.create(proto[, descriptors]) – 它使用给定的原型[[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 {}

错误处理

无论你的编程水平如何，脚本都可能包含错误。它们可能是由于我们的错误，意外的用户输入，错误的服务器响应或任何其他原因而发生的。

通常，如果发生错误，脚本会立即停止，并将其打印到控制台。现在，有了一个语法结构try…catch，它可以捕获错误，并且可以执行更合理的操作而不是直接停止。

try…catch语法
try…catch构造有两个主要块：

• Try

• Catch

try {

// code...

} catch (err) {

// error handling

}

1. 首先，执行try {…}中的代码。
2. 如果没有错误，则catch（err）将被忽略。执行到达try的结尾并继续，跳过catch。
3. 如果发生错误，则尝试执行停止，并且控制流到catch（err）的开头。
4. ?

例如：

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中定义模块，可以通过创建匿名函数来利用匿名闭包。

例如：

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

链接js方法

JavaScript使你可以在单个表达式中对一个对象调用多个方法。要调用多种方法，我们需要进行链接。链接是将方法调用与它们之间的点串在一起的过程。

语法：

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

构建链时，该对象仅命名一次，然后在其上调用多个方法。为此，你的方法必须返回对其进行操作的对象。每个方法对对象起作用，完成后将其返回到下一个调用。

例如：

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

在上面的示例中，你将学习设置一个银行帐号，该银行帐号由帐号，余额和信用额度组成。
JavaScript中的链接可以提高性能和可读性。在这里，jQuery库广泛使用链接。让我们来看一个示例，看看如何链接jQuery选择器方法：

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

生成器

生成器是一类特殊的函数，可简化编写迭代器的任务。因此，此函数将生成结果序列而不是单个值并生成一系列值。

因此，在JavaScript中，生成器是一个函数，该函数返回可以在其上调用next（）的对象。因此，每次调用next（）都会返回一个形状的对象。

例如：

{
value: Any,
done: true|false
}

value属性将包含值。done属性为true或false。完成此操作后，生成器将停止并且不再生成任何值。

————————————————————————————————————————