js 면접 문제 foo. getName () 의 이야기

먼저 성명: 이 문 제 는 본인 이 면접 을 볼 때 필기시험 문제 중의 하나 입 니 다. 돌아 와 보 니 비슷 합 니 다. 순 전 히 우연 입 니 다. 이 편 을 클로즈업 하여 생각 을 정리 하 겠 습 니 다.
원제:
 

function Foo() {

getName = function () {

console.log (1);

};

console.log('this is'+this)

return this;

}

Foo.getName = function () {

console.log (2);

};

Foo.prototype.getName = function () {

console.log('baidu' && 'google');

};

var getName = function () {

console.log (4);

};

function getName() {

console.log (5);

}

 

//

Foo.getName();

getName();

Foo().getName();

getName();

new Foo.getName();

new Foo().getName();

new new Foo().getName();

 
 
먼저 결 과 를 출력 합 니 다:
 

Foo.getName(); // 2

getName(); // 4

Foo().getName(); // 1

getName(); // 1

new Foo.getName(); // 2

new Foo().getName(); // google

new new Foo().getName(); // google

 
이 문 제 는 관련 된 지식 점 이 광범 위 하 다. 이 문 제 를 풀 려 면 어느 정도 문 제 를 분석 하 는 능력 이 있어 야 한다. 또한 논리 연산 자, 연산 자의 우선 순위, 성명 변수 와 성명 함수 의 향상 우선 순위, 원형 계승, 폐쇄, 커버 등 지식 도 갖 춰 야 한다.
 
다음 부터 시작 하 겠 습 니 다!
나 는 먼저 모든 함 수 를 번 호 를 매 긴 다.
 

// 1： ， getName （ ）

function Foo() {

getName = function () {

console.log (1);

};

return this;

}

// 2： getName

Foo.getName = function () {

console.log (2);

};

// 3： getName

Foo.prototype.getName = function () {

console.log('baidu' && 'google');

};

// 4：

var getName = function () {

console.log (4);

};

// 5： getName

function getName() {

console.log (5);

}

각 함수 의 의 미 는 명확 해 졌 습 니 다. 다음 에 실행 문장의 코드 를 분석 하 겠 습 니 다. > > 실행 문장의 첫 줄: Foo. getName ()           이 말 은 더 이상 할 말 이 없 을 것 입 니 다. 호출 방식 2 의 함수 코드 블록 입 니 다. 결 과 는 "2" 입 니 다! > >실행 문 두 번 째 줄: getName ()           이 실행 문 구 를 단독으로 보면 일반적으로 전역 적 으로 설명 하 는 함수 방식 5 "function getName () {}" 이 있 습 니 다. 그러나 이렇게 복잡 한 문맥 환경 에 놓 여 있다 면 분명 다 를 것 입 니 다. 4 "var getName = function () {}" 으로 방해 하 는 방법 이 있 기 때문에 지식 점 을 살 펴 봐 야 합 니 다.(엄마 와 며느리 가 물 에 빠 졌 습 니 다. 누 구 를 구 하 느 냐 는 질문 입 니 다. nonono, 그렇게 고민 하지 않 습 니 다) 정 의 된 변수 와 성명 의 함수 가 이름 을 바 꾸 면 어떻게 합 니까?        이 문장 은 실행 순서 가 있 습 니 다. 먼저 실행 방식 1 의 "Foo ()" 가 있 습 니 다. 결 과 는 "this" 이 고 window 를 가리 키 며 전역 getName (window. getName) 포인터 가 익명 함 수 를 가리 키 고 "this. getName ()" 을 실행 합 니 다. 사실은 방금 만 든 전역 getName 이 가리 키 는 익명 함 수 를 실행 하기 때문에 "1" 을 출력 합 니 다. > > 실행 문 네 번 째 줄: getName ()        이 문 구 는 방식 1 에서 실 행 된 전역 변수 getName 포인터 가 가리 키 는 익명 함수 입 니 다. 왜 실행 하지 않 느 냐 는 질문 이 있 습 니 다. 4 방식 이 덮어 졌 습 니 다! 그래서 결 과 는 "1" 입 니 다. > > 실행 문 다섯 번 째 줄: new Foo. getName ()        우선 연산 자 우선 순 위 를 보 세 요. 제 가 직접 본 결 과 는 [new Foo () > 입 니 다. Foo () > new Foo], 먼저 연산 방식 2 의 Foo. getName () 결 과 는 "2" 이 고, new foo 인 스 턴 스 대상 입 니 다. > > 실행 문 여섯 번 째 줄: new Foo (). getName ()        new Foo () 를 먼저 실행 한 결과 새로운 인 스 턴 스 대상 이 생 겼 고 Foo () 라 는 구조 함수 중의 getName 방법 을 계승 하 였 기 때문에 방식 3 함수 블록 을 실행 한 다음 에 다른 지식 점 이 있 습 니 다. 논리 연산 자 연산 은 '& &' 에 있어 전자 가 진실 이 라면 후 자 를 실행 하 십시오. 그렇지 않 으 면 전자 만 실행 합 니 다. '|' 에 대해 서 는전자 가 진짜 라면 전자 만 실행 하고 후 자 는 실행 할 필요 가 없습니다. 그렇지 않 으 면 후 자 를 실행 해 야 합 니 다. 따라서 결 과 는 "google" 입 니 다. > > 실행 문 일곱 번 째 줄: new new Foo (). getName ()        new Foo () 를 먼저 실행 하고 new Foo 의 인 스 턴 스 대상 이 되 었 습 니 다. getName () 을 실행 한 다음 Foo 의 인 스 턴 스 대상. getName () 을 실행 하고 방식 3 함수 블록 으로 돌아 가 'google' 으로 결 과 를 내 고 new Foo 의 인 스 턴 스 대상 을 마지막 으로 실행 합 니 다.