웹 프론트엔드 JS 튜토리얼 이러한 질문에 올바르게 답할 수 있다면 당신은 JavaScript를 사용할 수 있는 능력이 있는 것입니다

이러한 질문에 올바르게 답할 수 있다면 당신은 JavaScript를 사용할 수 있는 능력이 있는 것입니다

Aug 06, 2024 am 07:14 AM

You’re Decent At JavaScript If You Can Answer These uestions Correctly

부정행위는 삼가해주세요.

이 질문의 개념은 제가 프로덕션 코드에서 접한 개념입니다. 이 퀴즈의 목표는 관련 있고 필수적인 JavaScript 지식을 테스트하는 것입니다.

Q1: 맥락 이해

콘솔에는 무엇이 기록되나요?

const user = {
  name: "Alice",
  isBanned: false,
  pricing: 'premium',
  isSubscribedTo: function(channel) {
    return channel === "JavaScript";
  },
  getName: function() {
    return this.name;
  },
  getStatus: function() {
    const status = () => {
      return `Name: ${this.getName()}, Banned: ${this.isBanned}`;
    };
    return status();
  }
};

const channel = "JavaScript";
const getName = user.getName;
const getStatus = user.getStatus;

console.log(user.getStatus());
console.log(getName());
console.log(getStatus());
로그인 후 복사

정답:

  • A) 이름: Alice, Banned: false, 정의되지 않음, TypeError: 정의되지 않은 'getName' 속성을 읽을 수 없습니다.
  • B) 이름: Alice, 금지: false, 정의되지 않음, 이름: 정의되지 않음, 금지: 정의되지 않음
  • C) 이름: Alice, 금지: false, 정의되지 않음, 이름: Alice, 금지: false
  • D) 이름: Alice, Banned: false, 정의되지 않음, TypeError: this.getName은 함수가 아닙니다.

Q2: 종료

콘솔에는 무엇이 기록되나요?

function createCounter() {
  let count = 0;
  return function() {
    count++;
    console.log(count);
  }
}

const counter1 = createCounter();
const counter2 = createCounter();

counter1();
counter1();
counter2();
로그인 후 복사

정답:

  • 아) 1, 2, 3
  • 나) 1, 2, 1
  • 다) 1, 1, 1
  • D) 1, 2, 정의되지 않음

Q3: 비동기 자바스크립트

콘솔에는 무엇이 기록되나요?

console.log('Start');

setTimeout(() => console.log('Timeout 1'), 0);

Promise.resolve().then(() => console.log('Promise 1'));

setTimeout(() => console.log('Timeout 2'), 0);

Promise.resolve().then(() => console.log('Promise 2'));

console.log('End')
로그인 후 복사

정답:

  • A) 시작, 종료, 시간 초과 1, 시간 초과 2, 약속 1, 약속 2
  • B) 시작, 종료, 약속 1, 약속 2, 시간 초과 1, 시간 초과 2
  • C) 시작, 약속 1, 약속 2, 시간 초과 1, 시간 초과 2, 종료
  • D) 시작, 시간 초과 1, 시간 초과 2, 약속 1, 약속 2, 종료

Q4: JS의 프로토타입

콘솔에는 무엇이 기록되나요?

function Animal(name) {
  this.name = name;
}

Dog.prototype.speak = function() {
  console.log(`${this.name} makes a sound.`);
}

function Dog(name) {
  Animal.call(this, name);
}

Dog.prototype.constructor = Dog;

const dog = new Dog('Rex');
dog.speak();

console.log(dog instanceof Dog);
console.log(dog instanceof Animal);
로그인 후 복사
  • A) 렉스가 소리를 낸다., 참, 거짓
  • B) 렉스가 소리를 냅니다., 참, 참
  • C) 오류: 말하기는 기능이 아닙니다.
  • D) 렉스가 소리를 낸다., false, true

Q5: 기본 매개변수

각 통화에 대해 무엇이 기록되나요?

function displayUserInfo({ name = "Guest", role = "User" } = {}) {
  console.log(`Name: ${name}, Role: ${role}`);
}

displayUserInfo();
displayUserInfo({});
displayUserInfo({ name: "Alice" });
displayUserInfo(null);
로그인 후 복사

Q6: 클로저와 기능

콘솔에는 무엇이 기록되나요?

const funcs = [];
for (var i = 0; i < 3; i++) {
  funcs.push(function() {
    console.log(i);
  });
}

for (let j = 0; j < 3; j++) {
  funcs.push(function() {
    console.log(j);
  });
}

funcs.forEach(func => func());
로그인 후 복사

Q7: 이벤트 처리 및 전파

document.body.innerHTML = `
  <div id="outer">
    Outer
    <div id="middle">
      Middle
      <button id="inner">Inner</button>
    </div>
  </div>
`;

const outer = document.getElementById('outer');
const middle = document.getElementById('middle');
const inner = document.getElementById('inner');

outer.addEventListener('click', () => console.log('Outer Bubble'), false);
outer.addEventListener('click', () => console.log('Outer Capture'), true);

middle.addEventListener('click', (e) => {
  console.log('Middle Bubble');
}, false);
middle.addEventListener('click', () => console.log('Middle Capture'), true);

inner.addEventListener('click', () => console.log('Inner Bubble'), false);
inner.addEventListener('click', (e) => {
  console.log('Inner Capture');
}, true);

inner.click();
로그인 후 복사
  • A) 내부 캡쳐, 내부 버블, 중간 캡쳐, 중간 버블, 외부 캡쳐, 외부 버블
  • B) 외부캡쳐, 중간캡쳐, 내부캡쳐, 내부버블, 중간버블
  • C) 내부 버블, 중간 버블, 외부 버블
  • D) 외부캡쳐, 중간캡쳐, 내부캡처, 내부버블, 중간버블, 외부버블
  • E) 외부 캡쳐, 중간 캡쳐, 내부 캡쳐, 내부 버블

개발 도구 콘솔에 코드를 붙여넣어 직접 확인할 수 있습니다.

솔루션 Q1:

정답은 B입니다.

설명: user.getStatus() 호출은 화살표 함수 상태가 포함 범위 내에서 이에 올바르게 액세스하기 때문에 "이름: Alice, Banned: false"를 기록합니다. 그러나 getName()은 독립형 변수에 할당될 때 this 컨텍스트를 잃어버리기 때문에 undefound를 기록하고, getStatus()도 name과 isBanned 모두에 대해 undefound를 기록하게 됩니다.

솔루션 Q2:

정답은 B입니다.

설명: createCounter()를 호출할 때마다 새 클로저가 생성되므로 counter1과 counter2는 각각 별도의 count 변수를 갖습니다. 따라서 counter1은 처음 두 호출에서 1과 2를 기록하고 counter2는 첫 번째 호출에서 1을 기록합니다.

솔루션 Q3:

정답은 B입니다.

설명: 동기식 console.log는 "Start" 및 "End" 로그를 먼저 호출합니다. 이벤트 루프에서 약속은 setTimeout보다 우선순위가 높으므로 "Promise 1"과 "Promise 2"가 다음에 기록되고 "Timeout 1"과 "Timeout 2"가 기록됩니다.

솔루션 Q4:

정답은 A입니다.

설명: 이건 좀 까다롭네요. 말하기 메소드는 Dog.prototype에 올바르게 정의되어 있으며, dog은 Dog의 인스턴스입니다.

Dog 생성자 내에서 이 줄은 현재 this 컨텍스트와 name 인수를 사용하여 Animal 생성자를 호출합니다. 이는 새로 생성된 Dog 인스턴스의 name 속성을 효과적으로 설정합니다.

이제 코드가 다음과 같다고 가정해 보겠습니다.

// Code before...

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

// Code after...
로그인 후 복사

그렇다면 정답은 B)가 될 것입니다.

참고: 직접 확인하려면 브라우저에 붙여넣어야 합니다(잘못된 답변을 얻는 LLM이 아님).

솔루션 Q5:

올바른 출력은 다음과 같습니다.

  • 이름: 손님, 역할: 사용자
  • 이름: 손님, 역할: 사용자
  • 이름: 앨리스, 역할: 사용자
  • TypeError: 'null'의 'name' 속성은 null이므로 분해할 수 없습니다.

솔루션 Q6:

정답: 3, 3, 3, 0, 1, 2

설명: 첫 번째 루프는 함수 범위가 있는 var를 사용하므로 배열의 전반부에 있는 모든 함수는 루프가 끝날 때까지 3인 동일한 i에 대해 닫힙니다. 두 번째 루프는 블록 범위가 있는 let을 사용하므로 후반부의 각 함수는 서로 다른 j 값(0, 1, 2)에 대해 닫히고 결과는 3, 3, 3, 0, 1, 2입니다.

솔루션 Q7:

정답은 D입니다.

설명:

  • 이벤트는 상단(문서 루트)에서 시작하여 캡처 단계 동안 대상 요소로 아래로 이동하여 캡처 리스너(외부 캡처, 중간 캡처, 내부 캡처)를 트리거합니다.
  • 대상(내부 버튼)에 도달하면 등록 순서(Inner Capture, Inner Bubble)에 따라 대상의 청취자를 트리거합니다.
  • 그런 다음 버블이 발생하여 각 조상(중간 버블, 외부 버블)에서 버블 리스너를 트리거합니다.

이 예는 이벤트의 전체 수명주기를 보여줍니다. stopImmediatePropagation 또는 stopPropagation 함수를 호출하여 전파를 중지할 수 있습니다.

위 내용은 이러한 질문에 올바르게 답할 수 있다면 당신은 JavaScript를 사용할 수 있는 능력이 있는 것입니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

JavaScript로 문자열 문자를 교체하십시오 JavaScript로 문자열 문자를 교체하십시오 Mar 11, 2025 am 12:07 AM

JavaScript로 문자열 문자를 교체하십시오

jQuery 날짜가 유효한지 확인하십시오 jQuery 날짜가 유효한지 확인하십시오 Mar 01, 2025 am 08:51 AM

jQuery 날짜가 유효한지 확인하십시오

jQuery는 요소 패딩/마진을 얻습니다 jQuery는 요소 패딩/마진을 얻습니다 Mar 01, 2025 am 08:53 AM

jQuery는 요소 패딩/마진을 얻습니다

10 JQuery Accordions 탭 10 JQuery Accordions 탭 Mar 01, 2025 am 01:34 AM

10 JQuery Accordions 탭

10 JQuery 플러그인을 확인할 가치가 있습니다 10 JQuery 플러그인을 확인할 가치가 있습니다 Mar 01, 2025 am 01:29 AM

10 JQuery 플러그인을 확인할 가치가 있습니다

노드 및 HTTP 콘솔로 HTTP 디버깅 노드 및 HTTP 콘솔로 HTTP 디버깅 Mar 01, 2025 am 01:37 AM

노드 및 HTTP 콘솔로 HTTP 디버깅

사용자 정의 Google 검색 API 설정 자습서 사용자 정의 Google 검색 API 설정 자습서 Mar 04, 2025 am 01:06 AM

사용자 정의 Google 검색 API 설정 자습서

jQuery div에 스크롤 바를 추가합니다 jQuery div에 스크롤 바를 추가합니다 Mar 01, 2025 am 01:30 AM

jQuery div에 스크롤 바를 추가합니다

See all articles