쉽게 간과되는 JavaScript 인터뷰 질문에 대한 7가지 질문과 답변_Javascript 기술
이 질문은 제가 물어본 프론트엔드 면접 질문 중 마지막 질문입니다. 면접관의 포괄적인 JavaScript 능력을 테스트하는 데 사용됩니다. 불행하게도 지난 2년 동안 거의 누구도 대답하지 못했습니다. 아닙니다. 대부분의 면접관들이 그를 과소평가하기 때문에 어렵습니다.
주제는 다음과 같습니다.
function Foo() { getName = function () { alert (1); }; return this; } Foo.getName = function () { alert (2);}; Foo.prototype.getName = function () { alert (3);}; var getName = function () { alert (4);}; function getName() { alert (5);} //请写出以下输出结果: Foo.getName(); getName(); Foo().getName(); getName(); new Foo.getName(); new Foo().getName(); new new Foo().getName();
답은 다음과 같습니다.
function Foo() { getName = function () { alert (1); }; return this; } Foo.getName = function () { alert (2);}; Foo.prototype.getName = function () { alert (3);}; var getName = function () { alert (4);}; function getName() { alert (5);} //答案: Foo.getName();//2 getName();//4 Foo().getName();//1 getName();//1 new Foo.getName();//2 new Foo().getName();//3 new new Foo().getName();//3
이 질문은 저의 이전 개발 경험과 JS에서 겪었던 다양한 함정을 바탕으로 작성되었습니다. 이 질문에는 변수 정의 승격, 이 포인터 포인팅, 연산자 우선순위, 프로토타입, 상속, 전역 변수 오염, 객체 속성 및 프로토타입 속성 우선순위 등을 포함한 많은 지식 포인트가 포함됩니다.
이 질문은 7개의 질문으로 구성되어 있습니다. 아래에서 설명해주세요.
첫 번째 질문
먼저 이 질문의 전반부에서 수행한 작업을 살펴보겠습니다. 먼저 Foo라는 함수를 정의한 다음 익명 함수를 저장하기 위해 Foo에 대한 getName이라는 정적 속성을 만든 다음 Foo에 대한 새 프로토타입 개체를 만들었습니다. . getName이라는 익명 함수. 그런 다음 함수 변수 표현식을 통해 getName 함수가 생성되고 마지막으로 getName 함수가 선언됩니다.
첫 번째 질문인 Foo.getName은 Foo 함수에 저장된 정적 속성에 자연스럽게 액세스하므로 당연히 2입니다. 말할 것도 없습니다.
두 번째 질문
두 번째 질문은 getName 함수를 직접 호출하는 것입니다. 직접 호출되기 때문에 위의 현재 범위에서 getName이라는 함수에 접근하고 있으므로 1 2 3과는 아무런 관련이 없습니다. 많은 면접관들이 이 질문에 5라고 대답했습니다. 여기에는 두 가지 함정이 있습니다. 하나는 변수 선언 승격이고 다른 하나는 함수 표현식입니다.
1. 변수 선언 개선
즉, 선언된 모든 변수나 선언된 함수는 현재 함수의 최상위로 승격됩니다.
예를 들어 다음 코드는 다음과 같습니다.
console.log('x' in window);//true var x; x = 0;
코드가 실행되면 js 엔진은 선언문을 코드 상단으로 올리고 다음과 같이 됩니다.
var x; console.log('x' in window);//true x = 0;
2. 함수 표현
var getName과 function getName은 모두 선언문입니다. 차이점은 var getName은 함수 표현식인 반면 function getName은 함수 선언이라는 점입니다. JS에서 다양한 기능을 생성하는 방법에 대한 자세한 내용은 대부분의 사람들이 틀리는 고전적인 JS 클로저 인터뷰 질문을 참조하세요. 이 기사에는 자세한 설명이 있습니다.
함수 표현식의 가장 큰 문제점은 js가 이 코드를 두 줄의 코드로 분할하여 별도로 실행한다는 것입니다.
예를 들어 다음 코드는 다음과 같습니다.
console.log(x);//输出:function x(){} var x=1; function x(){}
실제 실행되는 코드는 먼저 var x=1을 두 줄(var x; 및 x = 1;)로 나눈 다음 var x 및 function x(){} 두 줄을 위로 올려 다음과 같이 됩니다.
var x; function x(){} console.log(x); x=1;
그래서 최종 함수에서 선언한 x는 변수에서 선언한 x를 덮고, 로그 출력은 x 함수입니다.
마찬가지로 원래 질문의 코드 최종 실행은 다음과 같습니다.
function Foo() { getName = function () { alert (1); }; return this; } var getName;//只提升变量声明 function getName() { alert (5);}//提升函数声明,覆盖var的声明 Foo.getName = function () { alert (2);}; Foo.prototype.getName = function () { alert (3);}; getName = function () { alert (4);};//最终的赋值再次覆盖function getName声明 getName();//最终输出4
세 번째 질문
세 번째 질문에서는 Foo().getName(); 먼저 Foo 함수를 실행한 다음 Foo 함수의 반환 값 객체의 getName 속성 함수를 호출합니다.
Foo 함수의 첫 번째 문장은 함수 할당문입니다. var 선언이 없으므로 먼저 현재 Foo에서 getName 변수를 찾으세요. 기능 범위이며 아무것도 없습니다. 그런 다음 현재 함수 범위의 상위 계층, 즉 외부 범위를 살펴보고 getName 변수가 있는지 확인합니다. 이는 두 번째 질문에서 이 값을 할당합니다. function(){alert(1) }에 대한 변수입니다.
여기서 외부 범위의 getName 함수가 실제로 수정되었습니다.
참고: 여전히 여기에서 찾을 수 없으면 창 개체까지 검색합니다. 창 개체에 getName 속성이 없으면 창 개체에 getName 변수를 만듭니다.
이후 Foo 함수의 반환값은 이렇고, 이 JS 문제에 대한 블로그 가든 글은 이미 많이 올라와 있으니 여기서는 더 자세히 다루지 않겠습니다.
간단히 말하면 함수의 호출 방식에 따라 포인트가 결정됩니다. 여기의 직접 호출 방법에서는 window 객체를 가리킵니다.
Foo 함수는 window.getName()을 실행하는 것과 동일한 window 객체를 반환하는데, window의 getName은 Alert(1)로 수정되었으므로 결국 1이 출력됩니다
여기서 두 가지 지식 포인트를 검토합니다. 하나는 변수 범위의 문제이고 다른 하나는 이 지정의 문제입니다.
질문 4
window.getName()과 동일한 getName 함수를 직접 호출합니다. Foo 함수가 실행될 때 이 변수가 수정되었고 결과는 세 번째 질문인 1과 동일하기 때문입니다
다섯 번째 질문
다섯 번째 질문은 new Foo.getName(); 입니다. 여기서 살펴보는 것은 js의 연산자 우선순위 문제입니다.
위의 표를 보면 점(.)의 우선순위가 새로운 연산보다 높다는 것을 알 수 있습니다. 이는 다음과 같습니다.
새 항목(Foo.getName)();
그래서 getName 함수가 실제로 생성자로 실행되면서 2가 뜹니다.
질문 6
여섯 번째 질문은 new Foo().getName()입니다. 우선 연산자 우선순위 괄호가 new보다 높습니다.
(new Foo()).getName()
그러면 Foo 함수가 먼저 실행되고 생성자인 Foo가 반환 값을 가지게 되므로 여기서는 js에서 생성자의 반환 값을 설명해야 합니다.
기존 언어에서 생성자는 반환 값을 가져서는 안 됩니다. 실제 실행의 반환 값은 이 생성자의 인스턴스화된 개체입니다.
js에서는 생성자가 반환 값을 가질 수도 있고 없을 수도 있습니다.
1. 반환값이 없으면 인스턴스화된 객체가 다른 언어와 마찬가지로 반환됩니다.
2. 반환값이 있는 경우 반환값이 참조형인지 확인합니다. 기본형(string, number, boolean, null, undefine) 등 비참조형인 경우에는 반환값이 없는 것과 동일하며 인스턴스화된 객체가 실제로 반환됩니다.
3. 반환 값이 참조 유형인 경우 실제 반환 값은 이 참조 유형입니다.
그런 다음 인스턴스화된 객체의 getName 함수를 호출합니다. Foo 생성자에서는 인스턴스화된 객체에 속성이 추가되지 않으므로 현재 객체의 프로토타입 객체에서 getName을 찾아 찾습니다.
최종 출력은 3입니다.
질문 7
7번째 질문인 new new Foo().getName(); 역시 연산자 우선순위 문제입니다.최종 실제 실행은 다음과 같습니다.
new ((new Foo()).getName)();
먼저 Foo의 인스턴스화된 객체를 초기화한 다음 프로토타입의 getName 함수를 다시 생성자 new로 사용합니다.
드디어
답변을 보면 첫 번째 질문은 100% 정답이고, 두 번째 질문은 50% 정도만 맞고, 세 번째 질문은 정답이 많지 않고, 네 번째 질문은 매우, 매우 드물다. 실제로 이 질문에 대한 까다롭고 기괴한 용도는 많지 않습니다. 모두 1~2년의 업무 경험을 가진 대부분의 사람들이 접할 수 있는 시나리오입니다.
이 기사를 통해 모든 사람들이 js의 일부 기능을 이해할 수 있기를 바랍니다.

핫 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)

뜨거운 주제











WebSocket 및 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 소개: 지속적인 기술 개발로 음성 인식 기술은 인공 지능 분야의 중요한 부분이 되었습니다. WebSocket과 JavaScript를 기반으로 한 온라인 음성 인식 시스템은 낮은 대기 시간, 실시간, 크로스 플랫폼이라는 특징을 갖고 있으며 널리 사용되는 솔루션이 되었습니다. 이 기사에서는 WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법을 소개합니다.

WebSocket과 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 서론: 인터넷 기술의 급속한 발전과 함께 실시간 모니터링 시스템이 다양한 분야에서 널리 활용되고 있다. 실시간 모니터링을 구현하는 핵심 기술 중 하나는 WebSocket과 JavaScript의 조합입니다. 이 기사에서는 실시간 모니터링 시스템에서 WebSocket 및 JavaScript의 적용을 소개하고 코드 예제를 제공하며 구현 원칙을 자세히 설명합니다. 1. 웹소켓 기술

WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법 오늘날의 디지털 시대에는 점점 더 많은 기업과 서비스에서 온라인 예약 기능을 제공해야 합니다. 효율적인 실시간 온라인 예약 시스템을 구현하는 것이 중요합니다. 이 기사에서는 WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. WebSocket이란 무엇입니까? WebSocket은 단일 TCP 연결의 전이중 방식입니다.

JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법 소개: 인터넷의 대중화와 기술의 발전으로 점점 더 많은 레스토랑에서 온라인 주문 서비스를 제공하기 시작했습니다. 실시간 온라인 주문 시스템을 구현하기 위해 JavaScript 및 WebSocket 기술을 사용할 수 있습니다. WebSocket은 TCP 프로토콜을 기반으로 하는 전이중 통신 프로토콜로 클라이언트와 서버 간의 실시간 양방향 통신을 실현할 수 있습니다. 실시간 온라인 주문 시스템에서는 사용자가 요리를 선택하고 주문을 하면

JavaScript 및 WebSocket: 효율적인 실시간 일기 예보 시스템 구축 소개: 오늘날 일기 예보의 정확성은 일상 생활과 의사 결정에 매우 중요합니다. 기술이 발전함에 따라 우리는 날씨 데이터를 실시간으로 획득함으로써 보다 정확하고 신뢰할 수 있는 일기예보를 제공할 수 있습니다. 이 기사에서는 JavaScript 및 WebSocket 기술을 사용하여 효율적인 실시간 일기 예보 시스템을 구축하는 방법을 알아봅니다. 이 문서에서는 특정 코드 예제를 통해 구현 프로세스를 보여줍니다. 우리

JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법, 특정 코드 예제가 필요합니다. 서문: 웹 개발에서는 서버와의 데이터 상호 작용이 종종 포함됩니다. 서버와 통신할 때 반환된 HTTP 상태 코드를 가져와서 작업의 성공 여부를 확인하고 다양한 상태 코드에 따라 해당 처리를 수행해야 하는 경우가 많습니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법과 몇 가지 실용적인 코드 예제를 제공합니다. XMLHttpRequest 사용

사용법: JavaScript에서 insertBefore() 메서드는 DOM 트리에 새 노드를 삽입하는 데 사용됩니다. 이 방법에는 삽입할 새 노드와 참조 노드(즉, 새 노드가 삽입될 노드)라는 두 가지 매개 변수가 필요합니다.

JavaScript에서 HTTP 상태 코드를 얻는 방법 소개: 프런트 엔드 개발에서 우리는 종종 백엔드 인터페이스와의 상호 작용을 처리해야 하며 HTTP 상태 코드는 매우 중요한 부분입니다. HTTP 상태 코드를 이해하고 얻는 것은 인터페이스에서 반환된 데이터를 더 잘 처리하는 데 도움이 됩니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. HTTP 상태 코드란 무엇입니까? HTTP 상태 코드는 브라우저가 서버에 요청을 시작할 때 서비스가
