10 가지 전형 적 인 자 바스 크 립 트 면접 문제

문제 1:역할 영역(Scope)
다음 코드 고려:

(function() {
 var a = b = 5;
})();
console.log(b);

콘 솔(console)은 무엇 을 인쇄 합 니까?
답:5
엄격 한 모드 가 켜 지면 코드 가 잘못 보 고 됩 니 다."Uncaught Reference Error:b is not defined".이것 이 예 상 된 행위 라면 엄격 한 모델 은 전체적인 역할 영역 을 명시 적 으로 인용 하도록 요구 한 다 는 것 을 기억 하 세 요.그래서 아래 와 같이 써 야 한다.

(function() {
 'use strict';
 var a = window.b = 5;
})();
console.log(b);

문제 2:'네 이 티 브(native)'만 드 는 방법
String 대상 에 repeatify 함 수 를 정의 합 니 다.이 함 수 는 문자열 을 몇 번 반복 해 야 하 는 지 를 명확 하 게 하기 위해 정수 인 자 를 받 아들 입 니 다.이 함 수 는 문자열 이 지정 한 횟수 를 반복 하도록 요구 합 니 다.예 를 들 어:console.log('hello'.repeatify(3));hellohellohello 를 출력 해 야 합 니 다.
답:

String.prototype.repeatify = String.prototype.repeatify || function(times) {
 var str = '';
 for (var i = 0; i < times; i++) {
  str += this;
 }
 return str;
};

여기 서 또 다른 관건 은 이미 정 의 된 방법 을 다시 쓰 는 것 을 어떻게 피 하 느 냐 하 는 것 이다.이것 은 자신의 방법 을 정의 하기 전에 방법 이 이미 존재 하 는 지 확인 할 수 있다.String.prototype.repeatify = String.prototype.repeatify || function(times) {/* code here */}; 질문 3:변수 증가(호 이 스 팅)
다음 코드 를 실행 한 결 과 는 무엇 입 니까?왜?

function test() {
 console.log(a);
 console.log(foo());
 var a = 1;
 function foo() {
  return 2;
 }
}
test();

답:
이 코드 의 실행 결 과 는 undefined 와 2 입 니 다.
이 결과 의 원인 은 변수 와 함수 가 함수 체 의 맨 위로 올 라 갔 기 때문이다.따라서 인쇄 변수 a 는 함수 체 에 존재 하지만 undefined 입 니 다.다시 말 하면 위의 코드 는 아래 의 코드 와 같다.

function test() {
 var a;
 function foo() {
  return 2;
 }
 console.log(a);
 console.log(foo());
 a = 1;
} 
test();

문제 4:자바 script 에서'this'는 어떻게 일 합 니까?
다음 코드 의 결 과 는 무엇 입 니까?당신 의 답안 을 설명해 주세요.

var fullname = 'John Doe';
var obj = {
 fullname: '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());

답:
이 코드 인쇄 결 과 는 Aurelio De Rosa 와 John Doe 입 니 다.이 유 는 자바 스 크 립 트 에서 키워드 this 가 인용 한 것 은 함수 컨 텍스트 이 며,함수 가 어떻게 호출 되 는 지 에 달 려 있 습 니 다.어떻게 정의 되 는 것 이 아 닙 니 다.
첫 번 째 console.log()에서 getFullname()은 obj.propert 대상 의 함수 로 호출 됩 니 다.따라서 현재 상하 문 은 후 자 를 가리 키 며 함수 가 이 대상 의 fullname 속성 을 되 돌려 줍 니 다.반면 getFullname()이 test 변수 에 할당 되 었 을 때 현재 컨 텍스트 는 전역 대상 window 입 니 다.이것 은 test 가 전역 대상 으로 암시 적 으로 속성 되 기 때 문 입 니 다.이 점 을 바탕 으로 함 수 는 window 의 fullname 을 되 돌려 줍 니 다.이 예 에서 첫 번 째 줄 코드 로 설정 되 어 있 습 니 다.
질문 5:call()과 apply()
이전 문 제 를 복구 하고 마지막 console.log()에서 Aurelio De Rosa 를 출력 합 니 다.
답:
이 문 제 는 콜()이나 apply()방법 을 활용 하여 상하 문 환경 을 강제로 전환 할 수 있다.console.log(test.call(obj.prop));문제 6:폐쇄(Closures)
다음 코드 를 고려 하 십시오:

var nodes = document.getElementsByTagName('button');
for (var i = 0; i < nodes.length; i++) {
 nodes[i].addEventListener('click', function() {
  console.log('You clicked element #' + i);
 });
}

사용자 가 첫 번 째 버튼 과 네 번 째 버튼 을 눌 렀 을 때 콘 솔 이 각각 인쇄 한 결 과 는 무엇 입 니까?왜?
답:
두 번 의 인쇄 는 모두 nodes.length 의 값 입 니 다.
문제 7:폐쇄(Closures)
위의 문 제 를 복구 하여 첫 번 째 단 추 를 눌 렀 을 때 0 을 출력 하고 두 번 째 단 추 를 눌 렀 을 때 1 을 출력 합 니 다.
답:
이 문 제 를 해결 할 수 있 는 여러 가지 방법 이 있 는데,다음은 주로 두 가지 방법 으로 이 문 제 를 해결한다.
첫 번 째 솔 루 션 은 즉시 실행 함수 표현 식(IIFE)을 사용 하여 패 킷 을 만 들 고 원 하 는 i 값 을 얻 습 니 다.이 방법 을 실현 하 는 코드 는 다음 과 같다.

var nodes = document.getElementsByTagName('button');
for (var i = 0; i < nodes.length; i++) {
 nodes[i].addEventListener('click', (function(i) {
  return function() {
   console.log('You clicked element #' + i);
  }
 })(i));
}

또 다른 솔 루 션 은 IIFE 를 사용 하지 않 고 함 수 를 순환 의 밖으로 옮 깁 니 다.이런 방법 은 아래 의 코드 로 이 루어 진다.

function handlerWrapper(i) {
 return function() {
  console.log('You clicked element #' + i);
 }
}
var nodes = document.getElementsByTagName('button');
for (var i = 0; i < nodes.length; i++) {
 nodes[i].addEventListener('click', handlerWrapper(i));
}

질문 8:데이터 형식
다음 코드 를 고려 합 니 다:

console.log(typeof null);
console.log(typeof {});
console.log(typeof []);
console.log(typeof undefined);

답:

object
object
object
undefined

질문 9:이벤트 순환
다음 코드 운행 결 과 는 무엇 입 니까?설명해 주세요.

function printing() {
 console.log(1);
 setTimeout(function() { console.log(2); }, 1000);
 setTimeout(function() { console.log(3); }, 0);
 console.log(4);
}
printing();

답:

1
4
3
2

출력 순서 가 왜 이런 지 알 고 싶 으 면 setTimeout()이 무엇 을 했 는 지,브 라 우 저의 이벤트 순환 원 리 를 알 아야 합 니 다.브 라 우 저 는 이벤트 대기 열 을 검사 하고 지연 되 는 이 벤트 를 처리 하 는 이벤트 순환 이 있 습 니 다.UI 이벤트(예 를 들 어 클릭,스크롤 등),Ajax 리 셋,setTimeout()과 setInterval()에 제공 되 는 리 셋 은 이벤트 순환 으로 처 리 됩 니 다.따라서 setTimeout()함 수 를 호출 할 때 지연 시간 이 0 으로 설정 되 더 라 도 제 공 된 리 셋 은 줄 을 서 게 됩 니 다.리 셋 은 지정 한 시간 이 다 될 때 까지 대기 열 에 있 습 니 다.엔진 은 동작 을 실행 하기 시작 합 니 다.(현재 다른 동작 을 실행 하지 않 으 면)따라서 setTimeout()리 셋 이 0 밀리초 지연 되 더 라 도 줄 을 서 있 고 함수 에서 다른 지연 되 지 않 은 문 구 를 실행 한 후에 야 실 행 됩 니 다.
문제 10:알고리즘
isPrime()함 수 를 쓰 고 질 수 일 때 true 로 돌아 갑 니 다.그렇지 않 으 면 false 로 돌아 갑 니 다.
답:
나 는 이것 이 면접 에서 가장 흔히 볼 수 있 는 문제 중의 하나 라 고 생각한다.그러나 이 문 제 는 자주 발생 하고 간단 하지만 피 면접 자가 제공 하 는 답 에서 피 면접 자의 수학 과 알고리즘 수준 을 잘 알 수 있다.
우선,자 바스 크 립 트 는 C 나 자바 와 다 르 기 때문에 전 달 된 데이터 형식 을 신뢰 할 수 없습니다.면접 관 이 명확 하 게 알려 주지 않 았 다 면 입력 검 사 를 해 야 하 는 지,아니면 검 사 를 하지 않 고 함 수 를 직접 써 야 하 는 지 물 어 봐 야 한다.엄 밀 히 말 하면 함수 의 입력 을 검사 해 야 한다.
두 번 째 는 음 수 는 질 수가 아니 라 는 것 을 기억 해 야 한다.마찬가지 로 1 과 0 도 아니 기 때문에 먼저 이 숫자 들 을 테스트 한다.그 밖 에 2 는 질 수 중의 유일한 짝수 이다.하나의 순환 으로 4,6,8 을 검증 할 필요 가 없다.또 하나의 숫자 가 2 로 나 눌 수 없다 면 4,6,8 등 으로 나 눌 수 없다.따라서 순환 은 이 숫자 들 을 뛰 어 넘 어야 한다.만약 당신 이 짝수 입력 을 테스트 한다 면,당신 의 알고리즘 은 2 배 느 릴 것 입 니 다.다른 현명 한 최적화 수단 을 취 할 수 있 습 니 다.제 가 여기 서 사용 하 는 것 은 대부분 상황 에 적용 되 는 것 입 니 다.예 를 들 어 한 숫자 가 5 로 나 누 어 지지 않 으 면 5 의 배수 로 나 누 어 지지 않 는 다.그래서 10,15,20 등 을 검사 할 필요 가 없다.
마지막 으로 숫자 를 입력 한 처방 보다 더 큰 숫자 를 검사 할 필요 가 없다.나 는 사람들 이 이 점 을 빠 뜨리 고 이 로 인해 부정적인 피드백 을 받 지 않 을 것 이 라 고 생각한다.하지만 이 방면 의 지식 을 보 여주 면 추가 점 수 를 줄 수 있다.
지금 당신 은 이 문제 의 배경 지식 을 갖 추고 있 습 니 다.다음은 상기 모든 고려 한 해결 방안 을 정리 하 는 것 입 니 다.

function isPrime(number) {
 // If your browser doesn't support the method Number.isInteger of ECMAScript 6,
 // you can implement your own pretty easily
 if (typeof number !== 'number' || !Number.isInteger(number)) {
  // Alternatively you can throw an error.
  return false;
 }
 if (number < 2) {
  return false;
 }
 if (number === 2) {
  return true;
 } else if (number % 2 === 0) {
  return false;
 }
 var squareRoot = Math.sqrt(number);
 for(var i = 3; i <= squareRoot; i += 2) {
  if (number % i === 0) {
   return false;
  }
 }
 return true;
}

이상 은 본 고의 모든 내용 입 니 다.본 고의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.또한 저 희 를 많이 지지 해 주시 기 바 랍 니 다!