5가지 전형적인 프론트엔드 면접 질문

JavaScript 개발자는 IT 세계에서 항상 수요가 높습니다. 당신이 하나님의 언어에 매우 능숙하다면 직업을 바꾸고 월급을 올릴 기회가 많이 있을 것입니다. 하지만 회사가 당신을 고용하기 전에 당신은 성공적으로 인터뷰를 통과하고 당신의 능력을 입증해야 합니다. 이번 글에서는 지원자의 JavaScript 능력과 문제 해결 능력을 테스트하기 위한 프론트엔드 관련 질문 5개개를 보여드리겠습니다. . 정말 재미있을 거예요!

질문1: 범위범위

다음 코드를 고려하세요.

(function() {

var a = b = 5;

})();

console.log(b);

콘솔에는 무엇이 출력될까요?

답변

위 코드는 5을 인쇄합니다.

이 문제의 비결은 여기에 두 개의 변수 선언이 있다는 것입니다. 그러나 키워드 var를 사용하세요. 선언했습니다. 함수의 지역 변수임을 나타냅니다. 반면 b 는 전역 변수가 됩니다.

이 문제에 대한 또 다른 비결은 엄격 모드 ('use strict';) 를 사용하지 않는다는 것입니다. 엄격 모드가 활성화되면 코드에서 오류 ReferenceError가 발생합니다. B가 정의되지 않았습니다(b 정의되지 않았습니다). 엄격 모드에서는 전역 변수 선언을 구현하기 위해 명시적인 사양이 필요하다는 점을 기억하세요. 예를 들어 다음과 같이 작성해야 합니다.

(function() {

'use strict';

var a = window.b = 5;

})();

console.log(b);

질문2: "네이티브" 생성(네이티브) 메소드

는 문자열 객체에 대한 repeatify 함수를 정의합니다. 정수 n이 전달되면 문자열을 n회 반복한 결과를 반환합니다. 예:

console.log('hello'.repeatify(3));

는 helloellohello를 인쇄해야 합니다. .

답변

가능한 구현은 다음과 같습니다:

String.prototype.repeatify = String.prototype.repeatify || function(times) {

var str = '';

for (var i = 0; i < times; i++) {

str += this;

}

str;

};

현재 테스트 개발자를 위한 질문은 JavaScript 상속에 관한 것입니다. 프로토타입의 노하우와 포인트를 알려드립니다. 이는 또한 개발자가 내장 객체를 확장하는 방법을 알고 있는지도 확인합니다(이렇게 하면 안 되더라도).

여기서 또 다른 중요한 점은 이미 정의되어 있는 기능을 재정의하지 않는 방법을 알아야 한다는 것입니다. 이전에 함수 정의가 존재하지 않았는지 테스트합니다.

String.prototype.repeatify = String.prototype.repeatify || function(times) {/* 여기에 코드 */};

이 기술은 JavaScript 기능을 호환 가능하게 만들어야 할 때 특히 유용합니다.

이슈3: 선언 호이스팅(호이스팅)

이 코드를 실행하면 어떤 결과가 출력될까요?

기능 테스트() {

console.log(a);

콘솔. log(foo());

var a = 1;

function foo() {

2 반환;

}

}

test();

답변

이 코드의 결과는 정의되지 않았습니다 그리고 2.

이유는 변수 선언과 함수 선언을 모두 앞으로 가져오지만(함수 상단으로 이동) 변수에 값이 할당되지 않기 때문입니다. 그래서 변수를 출력할 때 함수에 존재하지만(선언된) 여전히 정의되지 않은 상태입니다. 즉, 위 코드는 다음과 같습니다.

function test() {

var a;

function foo() {

return 2;

}

console.log(a);

console.log(foo());

a = 1;

}

test();

질문4: 이 JavaScript

에서 은 어떻게 작동합니까? 다음 코드는 무엇을 출력합니까? 답을 주십시오.

var fullname = 'John Doe';

var obj = {

전체 이름: 'Colin Ihrig',

prop: {

fullname: 'Aurelio De Rosa',

getFullname: function() {

return this.fullname;

}

}

};

console.log(obj.prop.getFullname() );

var test = obj.prop.getFullname;

console.log(test());

답변

답은 아우렐리오 데 로사 그리고 존 도. 그 이유는 함수에서 this의 동작은 단지 It뿐만 아니라 JavaScript 함수가 호출되고 정의되는 방식에 따라 달라지기 때문입니다. 어떻게 정의하느냐에 따라 달라집니다.

첫 번째 console.log() 호출에서 getFullname() A obj.prop 객체로 호출되는 함수입니다. 따라서 컨텍스트는 후자를 참조하고 함수는 개체의 전체 이름을 반환합니다. 반대로 getFullname()이 test 변수에 할당되면 컨텍스트는 전역 개체(창). 이는 test가 전역 개체의 암시적으로 설정된 속성이기 때문입니다. 이러한 이유로 이 함수는 첫 번째 줄에 정의된 값인 window의 fullname을 반환합니다.

질문5: call() 및 신청 ()

이제 최종 console.log() 가 Aurelio De Rosa 를 인쇄하도록 이전 문제를 해결할 수 있습니다. .

답변

이 질문은 call() 또는 apply() 함수 컨텍스트를 변경합니다. 아래에서는 call()을 사용하지만 이 경우 apply()는 동일한 결과를 출력합니다.

console.log(test.call(obj.prop));

결론

이 글에서는, 우리는 JavaScript 개발자를 테스트하는 데 사용되는 다섯 가지 고전적인 질문에 대해 논의했습니다. 인터뷰에서 다루는 개념과 주제는 대개 매우 유사합니다. 일부 질문에 대한 답을 모르더라도 걱정하지 마세요. 학습과 경험은 천천히 이루어질 수 있습니다. 다른 흥미로운 질문이 있으면 주저하지 말고 공유해 주세요. 많은 개발자에게 도움이 될 것입니다.

무료로 받으세요LAMP

밴드 오브 브라더스오리지널PHP동영상 튜토리얼CD/《자세히 보기 PHP》Essential 버전, 자세한 내용은 공식 웹사이트 고객 서비스에 문의하세요: http://www.lampbrother.net

PHPCMS2차 개발

http://yun.itxdl.cn/online/phpcms/index.php?u=5WeChat 개발

http://yun.itxdl.cn/online/weixin/index.php?u =5모바일 인터넷 서버측 개발

http://yun.itxdl.cn/online/ server/index.php?u =5Javascript과정

http:/ /yun.itxdl.cn/ online/js/index.php?u=5CTO교육 캠프

http://yun.itxdl.cn/online/cto/index.php?u=5 위 내용은 관련 내용을 포함하여 5가지 고전적인 프론트엔드 인터뷰 질문을 소개하고 있으며, PHP 튜토리얼에 관심이 있는 친구들에게 도움이 되기를 바랍니다.