자바 script 의 함수 호출 과 구조 함수 호출 을 배 워 주세요.

1. 함수 호출 Function 은 자바 스 크 립 트 의 중요 한 것 입 니 다.JavaScript 에서 Function 은 procedures, methods, constructors, 심지어 classes 와 modules 의 기능 을 담당 합 니 다.
대상 을 대상 으로 하 는 프로 그래 밍 에서 functions, methods 와 class constructor 는 세 가지 서로 다른 일 로 서로 다른 문법 으로 이 루어 집 니 다.그러나 자바 스 크 립 트 에서 이 세 가지 개념 은 모두 function 에 의 해 이 루어 지고 세 가지 서로 다른 모델 을 통 해 이 루어 진다.
가장 간단 한 사용 모드 는 function 호출 입 니 다.

function hello(username) { 
  return "hello, " + username; 
} 
hello("Keyser Söze"); // "hello, Keyser Söze" 

2. 방법의 호출
한편, methods 라 는 개념 이 JavaScript 에서 표현 한 것 은 한 대상 의 속성 은 하나의 function 이다. 똑 같은 함수 로 한 대상 의 구성원 에 게 값 을 부여 한 후에 달라 진다.함 수 를 대상 의 구성원 에 게 할당 한 후, 이것 은 함수 가 아니 라 방법 이 라 고 해 야 합 니 다.

var obj = { 
  hello: function() { 
    return "hello, " + this.username; 
  }, 
  username: "Hans Gruber" 
}; 
obj.hello(); // "hello, Hans Gruber" 

진정한 행 위 는 호출 자체 가 this 가 어느 대상 에 연결 되 는 지 결정 하 는 것 입 니 다. 즉, ob1. hello () 는 this 를 ob1 에 연결 하고 ob2. hello () 는 this 를 ob2 에 연결 합 니 다.한 마디 만 기억 해라, 누가 호출 하면 this 는 누 구 를 가리킨다
바로 this 바 인 딩 의 이러한 규칙 때문에 아래 의 용법 도 가능 합 니 다.

function hello() { 
  return "hello, " + this.username; 
} 

var obj1 = { 
  hello: hello, 
  username: "Gordon Gekko" 
}; 
obj1.hello(); // "hello, Gordon Gekko" 

var obj2 = { 
  hello: hello, 
  username: "Biff Tannen" 
};_ 
obj2.hello(); // "hello, Biff Tannen" 

그러나 일반적인 함수 에서 위의 hello 함수 와 같이 this 키 워드 를 사용 하 는 것 은 좋 지 않 습 니 다. 직접 호출 될 때 this 의 지향 이 문제 가 됩 니 다.이러한 상황 에서 this 는 전역 대상 (GlobalObject) 을 가리 키 는데 브 라 우 저 에 서 는 일반적으로 window 대상 이다.이런 행 위 는 불확실 하고 무의미 하 다.
따라서 ES5 표준 에서 strict mode 를 사용 하면 this 는 undefined 로 설 정 됩 니 다.

function hello() { 
  "use strict"; 
  return "hello, " + this.username; 
} 
hello(); // error: cannot read property "username" of undefined 

이러한 방법 은 잠재 적 인 오 류 를 더욱 빨리 드 러 내 고 오 작 동 과 찾기 어 려 운 bug 를 피하 기 위 한 것 이다.일반 함수 호출 과 방법 호출 을 구별 하고 이 예 를 직접 보면 명확 하 다.

var func = function() {
  alert(this);
};
var o = {};
o.fn = func;
//   
alert(o.fn === func);//true
//   
func();//[object Window]
o.fn();//[object Object]

이 실행 결 과 는 두 함수 가 같 기 때문에 인쇄 결 과 는 true 입 니 다.그러나 두 함수 의 호출 이 다 르 기 때문에 func 의 호출 은 [object Window] 로 인쇄 되 었 고 o. fn 의 인쇄 결 과 는 [object Object] 입 니 다.
여기 가 바로 함수 호출 과 방법 호출 의 차이 입 니 다. 함수 호출 에서 this 는 전체 대상 window 를 말 합 니 다. 방법 에서 this 는 현재 대상, 즉 o. fn 중의 this 는 대상 o 를 말 합 니 다.
3. 구조 함수 의 호출
function 의 세 번 째 사용 모드 는 constructor 로 서 의 사용 입 니 다.
구조 기 중의 this
우 리 는 대상 을 만 드 는 과정 을 분석 해 야 this 의 미 를 알 수 있 습 니 다. 아래 코드 와 같 습 니 다.

 var Person = function() {
  this.name = "   ";
 };
 var p = new Person();

여기 서 먼저 함수 Person 을 정 의 했 습 니 다. 다음은 전체 실행 을 분석 하 겠 습 니 다.

프로그램 이 이 문장 을 실행 할 때 함수 체 를 실행 하지 않 기 때문에 자 바스 크 립 트 의 해석 기 는 이 함수 의 내용 을 모른다.

다음 에 new 키 워드 를 실행 하고 대상 을 만 듭 니 다. 해석 기 는 메모 리 를 열 고 대상 의 인용 을 얻어 새로운 대상 의 인용 을 함수 에 전달 합 니 다.

함수 에 이 어 전 달 된 대상 인용 을 this 에 게 건 네 줍 니 다. 즉, 구조 방법 에서 this 는 new 에 의 해 방금 만들어 진 대상 입 니 다.

그리고 this 에 멤버 를 추가 하 는 것, 즉 대상 에 멤버 를 추가 하 는 것 이다.

마지막 함수 가 끝나 면 this 를 되 돌려 주 고 this 를 왼쪽 변수 에 게 건 네 줍 니 다.

구조 함수 의 집행 을 분석 한 후에 얻 을 수 있 습 니 다. 구조 함수 중의 this 가 현재 대상 입 니 다.
구조 기의 return
구조 함수 에서 return 의 의미 에 변화 가 생 겼 습 니 다. 우선 구조 함수 에서 한 대상 으로 되 돌아 오 면 원래 의 의 미 를 유지 합 니 다. 만약 에 비 대상, 예 를 들 어 숫자, 불 과 문자열 을 되 돌려 준다 면 this 로 돌아 갑 니 다. return 문장 이 없 으 면 this 로 돌아 갑 니 다. 아래 코드 를 보 세 요.

 //         return
 var ctr = function() {
  this.name = "   ";
  return {
  name:"   "
  };
 };
 //     
 var p = new ctr();
 //   name  
 alert(p.name);

 //    ，        "   ".                ，    return   ，     return     .       ：

 //              
 var ctr = function() {
  this.name = "   ";
  return "   ";
 };
 //     
 var p = new ctr();
 //   
 alert(p);
 alert(p.name);

코드 실행 결 과 는 [object Object] 를 먼저 팝 업 창 에 인쇄 한 다음 '조효 호' 를 인쇄 하 는 것 입 니 다. 여기 return 은 하나의 문자열 로 기본 형식 에 속 하기 때문에 여기 return 문 구 는 유효 하지 않 습 니 다. 이 대상 을 되 돌려 줍 니 다. 따라서 첫 번 째 인쇄 는 [object Object] 이 고 두 번 째 는 undefined 를 인쇄 하지 않 습 니 다.

function User(name, passwordHash) { 
  this.name = name; 
  this.passwordHash = passwordHash; 
} 
var u = new User("sfalken", 
  "0ef33ae791068ec64b502d6cb0191387"); 
u.name; // "sfalken" 

new 키 를 사용 하여 function 을 constructor 로 호출 합 니 다.function 및 method 호출 과 달리 constructor 는 새로운 대상 을 입력 하고 this 에 연결 한 다음 이 대상 을 constructor 의 반환 값 으로 되 돌려 줍 니 다.constructor function 자체 의 역할 은 이 대상 을 초기 화하 기 위 한 것 입 니 다.
구조 함수 호출 상 범 오류
흥미진진 하 게 다음 과 같은 구조 함 수 를 정의 했다.

var Coder = function( nick ){ 
this.nick = nick; 
}; 

정의 구조 함수 가 끝나 면?그래, 어서 실례 화하 자.

var coder = Coder( 'casper' ); 

이 coder 형제 이름 이 뭐 예요?빨리 인쇄 하기:

console.log( coder.nick ); //undefined 
= =b    undefined！！              ，          ：   new 
var coder = Coder( 'casper' ); //          ，    this      window   
console.log( window.nick); //  ：casper 
var coder = new Coder( 'casper' ); //  new，     ，this              
console.log( coder.nick ); //  ：casper 

이런 실 수 는 매우 저급한 것 같 지만, 발생 할 확률 이 매우 높다. 어떻게 이런 상황 의 발생 을 피하 거나 줄 일 수 있 겠 는가?내부 실현 안에서 손발 을 움 직 일 수 있다.

var Coder = function( nick ){ 
  if( !(this instanceof Coder) ){ 
    return new Coder( nick ); 
  } 
    this.nick = nick; 
}; 

사실은 매우 간단 합 니 다. 예화 할 때 내부 판단 에서 현재 this 가 가리 키 는 대상 의 유형 은 현재 구조 함수 의 유형 이 아니라면 구조 함 수 를 강제로 다시 호출 할 수 있 습 니 다.갑자기 Coder 라 는 이름 이 서양 적 이지 않다 고요?Hacker 쓰 고 싶 어 요. 그래 요. 고 칠 게 요.세 어 보 니 모두 세 군데 고 쳐 야 하 는데 이것 은 과학적 이지 않 습 니 다. 구조 함수 의 이름 만 바 꾸 면 되 는 방법 이 있 습 니까?물론 있 습 니 다.

var Coder = function( nick ){ 
  if( !(this instanceof arguments.callee) ){ 
    return new arguments.callee( nick ); 
  } 
  this.nick = nick; 
}; 

tips: ES 5 의 엄격 한 모드 에서 arguments. callee 는 사용 되 지 않 는 다 고 합 니 다. 그러나 ES 5 가 보급 되 는 동시에 엄격 한 모드 를 사용 해 야 한다 고 지 정 했 습 니 다. 그렇지 않 으 면 사 고 를 발산 할 수 있 습 니 다.
이상 은 본 고의 모든 내용 이 므 로 여러분 들 이 함수 호출, 방법 호출 과 구조 함수 호출 을 배 우 는 데 도움 이 되 기 를 바 랍 니 다.