跳到主要内容

回答了12个常见的JavaScript问题

JavaScript是最灵活的之一网页设计工具在我身边JavaScript的顶级示例文章显示。但即使使用最大的工具,也总是需要学习和发现。

以下是关于JavaScript的12个问题(和答案),这些问题让许多开发人员感到难过 - 甚至是经验丰富的JavaScript编码员。

在这个页面上,我们会查看常见的问题和答案,包括经常出现的问题和答案工作面试。在下一页中,我们将更深入地了解两个更复杂的领域:如何使用JavaScript来提高网站性能,以及如何使用面向未来的JavaScript代码。

01.什么是原型继承,它有多大用处?

在JavaScript中,几乎所有东西都是一个对象。每个对象都有一个原型,它从中继承了值和行为。如果一个对象不包含被请求的属性,JS将在其原型中查找它。它继续进行原型链直到找到匹配,或返回错误。

在创建共享相同值和操作的对象时,这非常有用。通过将这些存在于原型上,只需要存在一个副本,从而使项目内存高效。

var parent = {inherit:true} var childA = Object.create(parent); var childB = {}; Object.setPrototypeOf(childB,parent); class childC扩展父{}

可以使用创建原型来创建对象的Object.create()或之后Object.setPrototypeOf()。 ES2015有一个'class'关键字,当与'extends'一起使用时,将使用该值作为其原型。

02.如何使用JavaScript来改善Web上的可访问性?

这对现代来说很常见网络辅助功能能够处理JavaScript和动态内容的工具。它可用于帮助这些技术,只要它被用作增强而不是功能所需。

协助用户的常用方法是提供有用的焦点管理。例如,日历应该能够使用箭头键循环几天,上下键一次跳过一周。这只是在焦点位于该组件内时监听键盘事件的情况。

还应该为屏幕阅读器宣布由JavaScript引起的重要数据更改,例如表单反馈。通常,这是通过将容器标记为活动区域来实现的。

03.什么是事件冒泡?它与事件捕获有何不同?

Javascript event bubbling graphic

事件委托是一种使用事件冒泡的技术。通过向父元素添加侦听器,可以向开发人员发出任何子节点事件的警报

事件捕获和冒泡都是称为“事件传播”的过程的一部分,其中浏览器响应页面上发生的事件。较旧的浏览器曾经做过一个或另一个,但现在他们都做了两个。

第一阶段 - 捕获阶段 - 一旦发生事件就会发生。它从最顶层开始,根据事件,可以是“文档”或“窗口”。它从那里经过并且它内部的任何生命,直到它到达事件发生在其中的元素。

第二阶段 - 冒泡阶段 - 然后发生。它重复了这个过程,但反之,从元素开始,事件被触发并“冒泡”到最顶层元件。添加事件侦听器时,这是默认设置。

04.事件委派如何改进具有大量交互元素的网站上的代码?

网站通常会在页面上定期更改大量动态内容。如果这些元素需要是交互式的,那么这些元素需要某种事件监听器来获取这些交互。如果每个元素都需要自己的监听器,这会使代码混乱并增加浏览器需要跟踪的内容。

事件委托是一种使用事件冒泡的技术。通过向父元素添加侦听器,可以向开发人员发出任何子节点事件的警报。

parentEl.addEventListener('click',function(e){if(e.target && e.target.nodeName =='BUTTON'){// Button clicked}});

在事件回调中,该事件的原始目标将始终是“目标”,可用于决定下一步做什么。例如,data属性可以包含ID以引用对象属性。

05.什么是闭包,它们如何在组织代码时有用?

JavaScript中的函数使用所谓的“词法环境”,这意味着它可以访问外部定义的变量,但内部定义的变量只能在其中访问。

function outer(){let x ='Web Designer'; function shout(){alert(`我爱$ {x}!`); } 喊(); }

调用外()将展示'我喜欢网页设计师!',但如果在外面引用'喊'或'x'外(),两者都是未定义的。闭包是一种功能与其词汇环境的结合。在这种情况下,闭包是'外部'功能。

这些在创建多个组件时很有用,因为内部声明的内容不会影响其他组件。它们可以用于创建私有函数和变量,其方式与其他面向对象语言(如Python)类似。模块模式广泛使用闭包来为模块提供结构化的交互方式。

06.代码块顶部的“使用严格”是什么意思?

ES5引入了一个名为“严格模式”的JavaScript可选变体。在严格模式下,早期版本的怪癖会抛出错误而不是导致意外行为。

function strictFunction(){'use strict'; myVar = 4; // ReferenceError}

上面我们正在访问一个不存在的变量。在严格模式之外,这会将myVar添加到全局范围,如果我们不小心,可以完全覆盖脚本中先前定义的功能。在严格模式下,这会抛出错误并停止任何破坏。 ES2015模块默认处于严格模式,但在使用函数创建的闭包中,“use strict”可以应用于函数级别以及整个文件。

07.“提升”一词对于JavaScript的含义是什么意思?

JavaScript的独特之处在于它在分发之前不需要编译。浏览器会在找到脚本时编译脚本,并记录在其中声明的任何函数和变量。

然后浏览器进行第二次传递以执行代码,知道这些函数和变量的适用位置。当执行一个块时,它的函数和变量声明被“提升”到块的顶部。

欢迎( “马太福音”); //“欢迎,马特。” function welcome(name){return`Welcome,$ {name} .`; }

在这个例子中,我们可以使用'welcome'函数,因为它被提升到脚本的顶部。

08.箭头功能和常规功能有什么区别?

ES2015提供了许多更改,其中一个是快速影响箭头功能。

function CountUp(){this.x = 0; setInterval(()=> console.log(++ this.x),1000); } var a = new CountUp();

尽管写入较短,但关键区别在于箭头函数不会为“this”创建自己的值。他们将改为使用封闭块的值。在上面的例子中,这将每秒注销1,2,3等。使用常规函数,this.x将是未定义的,因此它将记录NaN。箭头函数的主体被假定为它的返回值。这使得它们对于传递值的promises非常有用。常规函数必须显式返回一个值,否则将返回undefined。

09.我应该在哪里使用'let'和'const'关键字而不是'var'?

ES2015的另一个根本变化是引入了'let'和'const'作为定义变量的替代方法。以这种方式声明的变量仅限于它们所定义的块。这可以更加确定在不同块内创建的值不会干扰外部代码。

for(let x = 1; x <= 3; x ++){console.log(x); // 1,2,3} console.log(x); //“x未定义”

如果变量的值不会改变,请使用'const'而不是'let'。尝试重新定义常量时会抛出错误。对象和数组变量仍然可以在内部更改,但不会完全替换。

'let'和'const'都不像'var'那样被提升,因此在初始化之前不能被引用。在块的开始和初始化之间被称为“时间死区”并且通常可能是混淆的来源。

10.什么是函数式编程?它有何不同?

Functional programming graphic

功能编程提供了不同的思维方式

它是通过仅通过函数传递应用程序状态来创建程序的另一种方法。通过避免副作用,可以开发易于理解的代码。

传统上,JavaScript项目是使用面向对象的结构构建的。有关程序当前状态的信息保存在对象中,随页面更改而更新。

功能编程提供了不同的思维方式。虽然像F#这样的语言已经使用了一段时间,但ES2015为JavaScript提供了重要的方法,可以将其打开到网络上。

所有工作都必须在'纯'功能内完成。这些函数不受该函数范围之外的任何数据的影响。换句话说,如果向函数提供相同的值,则将始终返回相同的结果。

这也意味着函数之间不存在共享状态。应用程序中需要使用的任何状态都应作为参数传递给函数,而不是直接从函数中访问。

最后,代码应避免在创建后更改值。例如,对象的每次更改都应返回该对象的副本,并更改值。这是为了避免副作用,这可能会导致错误并使代码更难以测试。

下一页:如何使用JS来提高网站的性能?我怎样才能面向未来的JavaScript代码?



翻译字数超限