개발자가 자주 묻는 JavaScript 면접 질문 10가지 (답변 분석 포함)

青灯夜游
풀어 주다: 2021-04-26 18:53:56
앞으로
3164명이 탐색했습니다.

이 글에서는 초보자가 가장 자주 묻는 JavaScript 면접 질문 10가지를 소개합니다. 특정 참고 가치가 있습니다. 도움이 필요한 친구가 초보자에게 도움이 되기를 바랍니다.

개발자가 자주 묻는 JavaScript 면접 질문 10가지 (답변 분석 포함)

이 글에서는 Javascript에 관해 가장 자주 묻는 10가지 질문과 그에 대한 답변을 모아봤습니다.

이 10가지 질문 중 대부분은 Javascript의 기본과 관련되어 있으므로 JS를 이제 막 배우기 시작한 경우에는 이를 이해하고 마스터하는 것이 가장 좋습니다.

이 10개 질문에는 JS의 closures, promise, variable Promotion, classes 등이 포함됩니다. 배우기가 그리 어렵지는 않지만, 인터뷰에서 자주 묻는 질문도 있기 때문에 답을 알아두는 것이 좋습니다. [추천 학습: javascript 고급 튜토리얼]

Javascript에서 클로저란 무엇인가요?

클로저는 함께 묶인 함수의 조합으로, 내부 함수는 해당 변수와 외부 함수의 변수에 액세스할 수 있습니다.

가장 간단한 설명 방법은 위의 예입니다.

function outer() {
  var name = 'Maria';
  function inner() {
    console.log(name);
  }
  inner();
}
outer();
// 'Maria'
로그인 후 복사

위 코드에서 inner() 함수가 상위 함수 변수 name</code에 액세스할 수 있음을 알 수 있습니다. >. 따라서 <code>outer() 함수가 호출되면 inner() 함수의 console.log()name을 반환합니다. code >Maria의 값입니다. inner()函数可以访问其父函数变量name。 因此,如果调用outer()函数,那么inner()函数的console.log()将返回name的值Maria

内部函数可以访问外部函数参数对象,但是内部函数参数与外部一样,则内部的参数对象会覆盖外部的参数对象。如下所示:

function outer(a, b) {
  const inner = (a, b) => console.log(a, b);
  inner(1, 2);
}
outer(&#39;Alice&#39;, &#39;Mark&#39;);
// returns 1, 2
로그인 후 복사

我们使用闭包的主要原因是返回可以返回其他函数的函数。

Javascript中的 DOM 是什么

DOM 是文档对象模型,它是网站的面向对象的表示形,可以使用 Javascript 进行修改。

使用 JS 可以操纵 DOM 元素,例如颜色,位置,大小。 为了选择页面的特定元素,Javascript 提供了一些方法:

  • getElementById() - 通过id属性选择一个元素
  • getElementsByName() - 通过name属性选择一个元素
  • getElementsByTagName() - 选择所选标签的所有元素,
  • getElementsbyClassName() - 选择特定类名的所有元素

* querySelector() - 通过CSS选择器选择元素。

Javascript 还提供了其他操作元素的方法,而不仅仅是获取元素,比如appendChild()innerHTML()

Javascript 的 Promise 是什么

Promise 是异步编程的一种解决方案,可以替代传统的解决方案--回调函数和事件。ES6统一了用法,并原生提供了Promise对象。作为对象,Promise 有一下两个特点: (1)对象的状态不受外界影响。 (2)一旦状态改变了就不会在变,也就是说任何时候 Promise 都只有一种状态。

Promise 有三种状态,分别是:Pending (进行中), Resolved (已完成), Rejected (已失败)。Promise 从 Pending 状态开始,如果成功就转到成功态,并执行resolve回调函数;如果失败就转到失败状态并执行reject回调函数。

如果 Promise 被解析(resolved),我们可以调用then()方法并使用返回值执行操作。如果被拒绝(rejected),我们可以使用catch()方法来处理错误。

处理异步编程的其他方法还有async/awaitcallbacks

Javascript 中的原型是什么?

原型通常指的是prototype__proto__这两个原型对象,其中前者叫做显式原型对象,后者叫做隐式原型对象。

Javascript对象从原型继承方法和属性,而Object.prototype在继承链的顶部。Javascript prototype关键字还可以用于向构造函数添加新值和方法。

来看看事例:

function Animal(name, kind, age) {
  this.name = name;
  this.kind = kind;
  this.age = age;
}

Animal.prototype.ownerName(&#39;Mark&#39;);
로그인 후 복사

可以看到,通过使用原型,我们能够将ownerName属性添加到Animal()构造函数中。

Javascript 的 变量提升 是什么

提升是一种机制,它将所有声明的变量和函数提升到它们局部作用域的顶部,如果变量和函数被放置在全局作用域,则会被提升到全局作用域的顶部。

Javascript中,可以在变量被使用后在声明它。

提升用于避免在变量或函数有在没有定义之前就执行导致的 undefined

내부 함수는 외부 함수 매개변수 개체에 액세스할 수 있지만 내부 함수 매개변수는 외부 매개변수와 동일하므로 내부 매개변수 개체가 외부 매개변수 개체를 덮어씁니다. 🎜
name = &#39;Ted&#39;;
console.log(name);
var name;
// &#39;Ted&#39;


var name;
name = &#39;Ted&#39;;
console.log(name);
// &#39;Ted&#39;;
로그인 후 복사
로그인 후 복사
🎜우리가 클로저를 사용하는 주된 이유는 다른 함수를 반환할 수 있는 함수를 반환하기 위해서입니다. 🎜🎜🎜Javascript에서 DOM이란 무엇인가요? 🎜🎜🎜DOM은 웹 사이트의 객체 지향 표현인 문서 객체 모델이며 Javascript를 사용하여 수정할 수 있습니다. 🎜🎜JS를 사용하여 색상, 위치, 크기와 같은 DOM 요소를 조작하세요. 페이지의 특정 요소를 선택하기 위해 Javascript는 몇 가지 메소드를 제공합니다: 🎜
  • 🎜getElementById()🎜 - id 속성을 ​​통해 요소 선택
  • 🎜getElementsByName( ) 🎜 - name 속성을 ​​통해 요소 선택
  • 🎜getElementsByTagName()🎜 - 선택한 태그가 있는 모든 요소 선택,
  • 🎜getElementsbyClassName()🎜 - 특정 클래스 이름을 가진 모든 요소를 ​​선택합니다.
🎜* 🎜querySelector()🎜 - CSS 선택기를 통해 요소를 선택합니다. 🎜🎜Javascript는 요소를 가져오는 것뿐만 아니라 appendChild() 또는 innerHTML()과 같이 요소를 조작하는 다른 방법도 제공합니다. 🎜🎜🎜Javascript에서 Promise란 무엇인가요? 🎜🎜🎜Promise는 콜백 함수 및 이벤트와 같은 기존 솔루션을 대체할 수 있는 비동기 프로그래밍 솔루션입니다. ES6은 사용법을 통합하고 기본 Promise 객체를 제공합니다. Promise는 객체로서 다음과 같은 두 가지 특징을 가지고 있습니다. (1) 객체의 상태는 외부 세계의 영향을 받지 않습니다. (2) 상태가 변경되면 변경되지 않습니다. 즉, Promise에는 항상 하나의 상태만 있다는 의미입니다. 🎜🎜Promise에는 🎜Pending 🎜(진행 중), 🎜 Resolved 🎜(완료), 🎜 Rejected 🎜(실패)의 세 가지 상태가 있습니다. Promise는 Pending 상태에서 시작됩니다. 성공하면 성공 상태로 전환되고 resolve 콜백 함수가 실행됩니다. 실패하면 실패 상태로 전환되어 실행됩니다. 거부콜백 함수. 🎜🎜Promise가 해결되면 then() 메서드를 호출하고 반환 값을 사용하여 작업을 수행할 수 있습니다. 거부되면 catch() 메서드를 사용하여 오류를 처리할 수 있습니다. 🎜🎜비동기 프로그래밍을 처리하는 다른 방법은 async/await콜백입니다. 🎜🎜🎜Javascript에서 프로토타입이란 무엇인가요? 🎜🎜🎜프로토타입은 일반적으로 두 개의 프로토타입 개체인 prototype__proto__를 참조하며, 전자를 명시적 프로토타입 개체라고 합니다. 후자를 암시적 프로토타입 객체라고 합니다. 🎜🎜Javascript 개체는 프로토타입에서 메서드와 속성을 상속하며 Object.prototype은 상속 체인의 맨 위에 있습니다. Javascript 프로토타입 키워드를 사용하여 생성자에 새로운 값과 메소드를 추가할 수도 있습니다. 🎜🎜예제를 살펴보겠습니다. 🎜
var student = {
  firstName: &#39;Alice&#39;,
  lastName: &#39;Jones&#39;,
  age: 21,
  sayHi: () => {
    return &#39;Hi, I am &#39; + this.firstName;
  }
}
로그인 후 복사
로그인 후 복사
🎜보시다시피 프로토타입을 사용하여 Animal() 생성자에 ownerName 속성을 ​​추가할 수 있습니다. 🎜🎜🎜Javascript에서 변수 호이스팅이란 무엇입니까? 🎜🎜🎜🎜 호이스팅🎜은 변수와 함수가 전역 범위에 배치된 후 선언된 모든 변수와 함수를 로컬 범위의 맨 위로 끌어올리는 메커니즘입니다. 글로벌 범위의 최상위. 🎜🎜Javascript에서는 변수를 사용한 후 선언할 수 있습니다. 🎜🎜🎜Promotion🎜은 변수나 함수가 정의되기 전에 실행하여 발생하는 정의되지 않은 오류를 방지하는 데 사용됩니다. 🎜
name = &#39;Ted&#39;;
console.log(name);
var name;
// &#39;Ted&#39;


var name;
name = &#39;Ted&#39;;
console.log(name);
// &#39;Ted&#39;;
로그인 후 복사
로그인 후 복사

使用 var 声明的变量,如果没有赋值,则默认会被初始化为 undefined, letconst 则不会。另外,需要注意的是,在声明const时,必须同时初始化它,因为后面不可在更改它。

Javascript中的对象是什么

对象只是一种特殊的数据。对象拥有属性和方法。JavaScript 中的所有事物都是对象,如:字符串、数值、数组、函数等。

对象的属性:反映该对象某些特定的性质的,如:字符串的长度、图像的长宽等;

对象的方法:能够在对象上执行的动作。例如,表单的“提交”(Submit),时间的“获取”(getYear)等;

属性只是简单的值,而方法是可以在对象上执行的操作。

var student = {
  firstName: &#39;Alice&#39;,
  lastName: &#39;Jones&#39;,
  age: 21,
  sayHi: () => {
    return &#39;Hi, I am &#39; + this.firstName;
  }
}
로그인 후 복사
로그인 후 복사

在上面的代码中,你可以看到Student对象,其中包含三个属性和一个方法。

Javascript 中的函数是什么

在javascript中函数是一段可以被执行或调用任意次数的JavasScript代码,在数据类型中属于"function"。函数也拥有属性和方法,因此函数也是对象。

在Javascript中函数定义函数声明或函数表达式由关键字function开始。在定义函数时,可以在函数名后面的括号中添加一些参数。当我们调用函数时,括号中传递的值称为参数。

function calculate(x, y) {
  return x * y;
}

calculate(2, 5);
로그인 후 복사

Javascript中的纯函数是什么

如果函数的调用参数相同,则永远返回相同的结果。它不依赖于程序执行期间函数外部任何状态或数据的变化,必须只依赖于其输入参数。

顾名思义,纯函数跟我们初中数学的基本函数一样,遵循一定的映射关系,输入决定输出,一个输入只能对应一个输出。不同的输入可以有相同的输出,但是相同的输入不能有不同的输出

一个函数,如果符合以下两个特点,那么它就可以称之为 纯函数:

  • 对于相同的输入,永远得到相同的输出
  • 没有任何可观察到的副作用

Javascript中的构造函数是什么

构造函数是一种特殊的方法,用于初始化和创建 Javascript 中的对象。

JavaScript 中的构造函数和其它语言中的构造函数是不同的。 通过 new 关键字方式调用的函数都被认为是构造函数。

在构造函数内部,this 指向新创建的对象 Object。 这个新创建的对象的 prototype 被指向到构造函数的 prototype

如果被调用的函数没有显式的 return 表达式,则隐式的会返回 this 对象,也就是新创建的对象。

const Person = (name, age) => {
  this.name = name;
  this.age = age;
}

var man = new Person(&#39;Mark&#39;, 23);
console.log(man);
// { name: &#39;Mark&#39;, age: 23 }
로그인 후 복사

在上面的代码中,我创建了一个Person构造函数,在下面的代码中,创建了一个名为man的新变量,并基于Person构造函数创建了一个新对象。

Javascript类是什么?

自从 ES6 引入以来,我们可以在Javascript中使用类。 类是一种函数,我们使用关键字class代替function 关键字来初始化它。

除此之外,我们还必须在类内部添加constructor()方法,该方法在每次初始化类时都会调用。

constructor()方法内部,我们添加了类的属性。 要基于现有的类创建另一个类,我们可以使用extends关键字。

在JavaScript中使用类的一个很好的例子是 React 框架,它是类的组件。

总结

在本文中,我收集了开发者经常问的 10 个Javascript问题,并给出答案,答案不是唯一,这里只是自己的一些见解,希望本文能给初学者带来一些帮助。

原文地址:https://dev.to/duomly/10-most-common-javascript-questions-answered-1083

作者:Duomly

更多编程相关知识,请访问:编程视频!!

위 내용은 개발자가 자주 묻는 JavaScript 면접 질문 10가지 (답변 분석 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:segmentfault.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿