이러한 질문에 올바르게 답할 수 있다면 당신은 JavaScript를 사용할 수 있는 능력이 있는 것입니다
부정행위는 삼가해주세요.
이 질문의 개념은 제가 프로덕션 코드에서 접한 개념입니다. 이 퀴즈의 목표는 관련 있고 필수적인 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

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

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

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

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

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

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

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

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

뜨거운 주제









