[인사이드 자바스크립트] 3일차

this 바인딩

메서드(객체의 프로퍼티 중 함수인 것): 해당 메서드를 호출한 객체 (메서드를 가진 객체가 아님!!)

함수: 전역 객체 (브라우저에서 실행하는 경우 window 객체, Node.js와 같은 자바스크립트 런타임 환경에서는 global 객체)

내부 함수(함수 안의 함수): 정의되지 않음  -> let that = this; 사용, 명시적인 this 바인딩을 위한 call/apply/bind

var val = 100;

let myObj = {
    val: 1,
    func1: function () {
        this.val += 1;
        console.log('func1() called. this.val : ' + this.val);

        func2 = function () {
            this.val += 1;
            console.log('func2() called. this.val : ' + this.val);

            func3 = function () {
                this.val += 1;
                console.log('func2() called. this.val : ' + this.val);
            }
            func3();
        }
        func2();
    }
};
myObj.func1();

//(브라우저: 1, 101, 102, Node.js: 1, NaN, NaN (문자열 + undefined 여서 그런듯) 뜸)

 

생성자 함수: 기존 함수에 new를 붙이면 생성자 함수로 동작

관례적으로 첫 글자를 대문자로

동작 방식

1. 빈 객체 생성(이 때 빈 객체의 [[Prototype]] 프로퍼티는 생성자 함수 Person()의 prototype 프로퍼티가 가리키는 객체(Person.prototype). 자신을 생성한 생성자 함수의 prototype 프로퍼티가 가리키는 객체를 자신의 프로토타입 객체로 가리키는 것이 자바스크립트 규칙) , this 바인딩

2. this를 통한 동적 프로퍼티/메서드 생성

3. 생성된 객체 리턴

new를 안 붙이는 실수를 막기 위한 강제 인스턴스 생성 패턴

function A(arg) {
    if (!(this instanceof arguments.callee))
        return new A(arg);
    this.val = arg ? arg : 0;
}

let a = new A(100);
let b = A(10);
console.log(a.val); //100
console.log(b.val); //10
console.log(global.val); //undefined

 

 

apply, call

호출할_함수.apply(this바인딩할_객체, 배열)

호출할_함수.call(this바인딩할_객체, 인자1, 인자2, ..)

this객체를 명시적으로 바인딩하고 넘긴 인자로 함수 호출

function func() {
    console.log(arguments);

    // arguments.shift();

    let args = Array.prototype.slice.apply(arguments); //arguments를 this로 바인딩해서 Array.prototype.slice()를 호출해라 = Array.prototype.slice()를 자신의 메서드인 양 호출하라
    //args는 arguments 원소들을 복사한 배열. 이제 배열의 표준 메서드 사용가능
    console.dir(args);
}

func(1,2,3);

 

 

함수 리턴

리턴값 지정 X

일반 함수 / 메서드: undefined

생성자 함수: 생성된 객체

리턴값 지정

생성자 함수: 리턴값이 객체인 경우 - 명시적으로 리턴한 그 객체나 배열, 리턴값이 boolean, 숫자, 문자열인 경우: 리턴값 무시하고 this 바인딩한 객체

 

 

프로토타입 체이닝

프로토타입 복습

prototype 프로퍼티:

해당 생성자 함수를 constructor 프로퍼티로 갖는 객체

ex)

Person() 생성자 함수의 protoype 프로퍼티 -> Person.prototype 객체

Person.prototype 객체의 constructor 프로퍼티 -> Person() 함수

cf)

Object.prototype 객체의 constructor 프로퍼티 -> Object() 함수 (Native)

[[Prototype]] 프로퍼티:

크롬, 파이어폭스에서는 명시적으로 __proto__로 제공.

자신을 생성한 생성자 함수의 prototype 프로퍼티 (=프로토타입 객체)

ex)

new Person(`nick`)의 __proto__ -> Person.prototype

객체 리터럴 방식의 생성자 함수는 Obejct()임. 따라서 Object.prototype이 해당 객체의 프로토타입 객체

 

프로토타입 체이닝

자신이 메서드를 갖고 있지 않으면 프로토타입 객체의 메서드를 사용할 수 있음.

없으면 계속 그 상위의 프로토타입 객체로 올라가 메서드를 찾음.

프로토타입 체이닝의 끝: 모든 객체의 공통 조상인 Object.prototype

기본 타입들도 프로토타입을 갖고 있음. ex) String.prototype

프로토타입에 동적으로 메서드 추가 가능

프로토타입 체이닝은 객체의 프로퍼티 읽기와 메서드 실행시에만 동작 (프로퍼티 쓰기는 프로토타입 체이닝 없이 동적으로 프로퍼티를 추가함)

 

4장 함수와 프로토타입 체이닝 끝!