개성있는 개발자 되기

CH4 함수 호출과 this 본문

Web Development/인사이드 자바스크립트

CH4 함수 호출과 this

정몽실이 2019. 6. 6. 22:40
  1. arguments 객체

    • 함수를 호출할 때 넘긴 인자들이 배열 형태로 저장된 객체를 의미한다.

    • 실제 배열이 아닌 유사 배열 객체다. 객체지만 length 프로퍼티를 가지고 있음

  2. 호출 패턴과this 바인딩

    1. 객체의 메서드 호출할 때 this 바인딩

      • 객체의 프로퍼티가 함수일 경우 메서드라고 부른다.

      • 메서드가 호출 될 때, 메서드 내부 코드에서 사용된 this 는 해당 메서드를 호출한 객체로 바인딩 된다.

    2. 함수룰 호출할 때 this 바인딩

      • 함수를 호출할 때는, this 는 전역 객체에 바인됭 된다

      • window 객체가 전역이 된다.

      • 특이한 점은, 내부 함수를 호출했을 경우에도 그대로 적용된다.

      • 이것을 방지하려면, 내부함수에서 다른 변수에 this를 저장한 뒤, 하위 내부 함수에서 이를 참조하면 된다.
        → 내가 말했던 부분을(팝업 콜백 함수변수를 내부에 지정하는거) 고칠 수 있을 것 같다.

    3. 생성자 함수를 호출할 때 this 바인딩

      1. 기존 함수에 new 연산자를 붙여서 호출하면 해당 함수는 생성자 함수로 동작한다.

      2. 생성자 함수가 동작하는 방식

        • 빈 객체 생성 및 this를 이 빈 객체에 바인딩
          → 엄밀히 말하면 빈 객체는 아니고, 자신을 생성한 생성자 함수의 prototype 프로퍼티가 가리키는 객체를 자신의 프로토타입 객체로 설정한다.

        • this를 통한 프로퍼티 생성

        • 생성된 객체 리턴

      3. 객체 리터럴 방식과 생성자 함수를 통한 객체 생성 방식의 차이

        • 비슷하지만, 생성자 함수를 사용한다면 다른 인자를 넘김으로써 같은 형태의 서로 다른 객체를 생성할 수 있다.
          → 같은 구조이지만 다른 값들을 가지는 여러 객체가 필요할때 유용할 듯

      4. 생성자 함수를 new 를 붙이지 않고 호출할 경우

        • this 가 전역 객체로 바인되어, 호출한 값들이 전역객체에 할당 된다.

    4. call과 apply 메서드를 이용한 명시적인 this 바인딩

      • 첫번째 인자 thisArg : apply() 메서드를 호출한 함수 내부에서 사용한 this에 바인딩할 객체

      • 두번째 인자 argArray : 함수를 호출할 때 넘길 인자들의 배열

    5. 함수 리턴

      • 규칙1) 일반 함수나 메서드는 리턴값을 지정하지 않을 경우, undefined 값이 리턴된다.

      • 규칙2) 생성자 함수에서 리턴값을 지정하지 않을 경우 생성된 객체가 리턴된다.

      • * 생성자 함수의 리턴값으로 넘긴 값이 객체가 아닌 불린, 숫자, 문자열의 경우는 이러한 리턴값을 무시하고 this로 바인딩된 객체가 리턴된다.

 

Comments