2020-04-11

JavaScript

7분 읽기 (대략 993 단어)

자바스크립트 this

자바스크립트는 함수를 호출할 때 기존 매개변수로 전달되는 값과 arguments 객체 및 this 인자가 함수 내부로 암묵적으로 전달된다.

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

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

var myObject = {
	name: 'foo',
	sayName: function() {
		console.log(this.name);
	}
};

var otherObject = {
	name: 'bar'
};

otherObject.sayName = myObject.sayName;

myObject.sayName();    // foo
otherObject.sayName(); // bar

함수를 호출할 때 this 바인딩

함수 내부 코드에서 사용된 this는 전역 객체에 바인딩 된다.

전역객체란?

브라우저 환경에서 자바스크립트를 실행하는 경우, 전역객체는 window 객체가 된다.
자바스크립트 런타임 환경에서의 전역객체는 gloabl 객체가 된다.

var value = 100;

var myObject = {
    value: 1,
    func1: function () {
        this.value += 1;
        console.log(this.value); // 2

        func2 = function () {
            this.value += 1;
            console.log(this.value); // 101

            func3 = function () {
                this.value += 1;
                console.log(this.value); // 102
            }
            func3()
        }
        func2()
    }
};

myObject.func1();

var value = 100;

var myObject = {
    value: 1,
    func1: function () {
        var that = this; // 내부함수가 부모함수 this 접근가능하도록 변수에 저장.

        this.value += 1;
        console.log(this.value); // 2

        func2 = function () {
            this.value += 1;
            console.log(this.value); // 3

            func3 = function () {
                this.value += 1;
                console.log(this.value); // 4
            }
            func3()
        }
        func2()
    }
};

myObject.func1();

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

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

일반 함수에 new를 붙여 호출하면 원치 않는 생성자 함수처럼 동작 할 수 있으므로 함수 이름의 첫 문자를 대문자로 쓰기를 권한다.

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

빈 객체 생성 및 this 바인딩
- 생성자 함수가 실행되기 전 빈객체가 생성된다.
this를 통한 프로퍼티 생성
- 내부에서 this를 사용해서, 앞에서 생성된 빈 객체에 동적으로 프로퍼티나 메서드를 생성할 수 있다.
생성된 객체 리턴
- 리턴문이 없을 경우, this로 바인딩된 새로 생성한 객체가 리턴된다.
- 리턴값이 객체(this)가 아닌 다른객체를 반환하는 경우는 해당 객체가 리턴된다.

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

일반 함수 호출의 경우 this가 window 전역 객체에 바인딩된다.

생성자 함수 호출의 경우 this는 새로 생성된 빈 객체에 바인딩된다.

var person  = Person('qux', 20, 'man');
console.log(person); // undefined

console.log(window.name);   // qux
console.log(window.age);    // 20
console.log(window.gender); // man

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

function.apply(thisArg, argArray)

apply() 메서드를 호출하는 주체가 함수고, apply() 메서드도 this를 특정 객체에 바인딩할 뿐 결국 본질적인 기능은 함수 호출이다.
thisArg는 apply() 메서드를 호출한 함수 내부에서 사용한 this에 바인딩할 객체를 가리킨다.
argArray 인자는 함수를 호출할 때 넘길 인자들의 배열을 가리킨다.

함수 리턴

자바스크립트 함수는 항상 리턴값을 반환한다.
return문을 사용하지 않더라도 규칙이 존재한다.

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

const noReturnFunc = function() {
	console.log('리턴값이 없다.');
}

const result = noReturnFunc();
console.log(result); 
// 리턴값이 없다. 
// undefined

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

리턴값이 지정되지 않는다면, this로 바인딩된 새로 생성된 객체가 리턴된다.

생성자 함수에서는 일반적으로 리턴값을 지정하지 않는다.

function Person(name, age, gender) {
	this.name = name;
	this.age = age;
	this.gender = gender;
	
	// 명시적으로 다른 객체 반환
	return {name:'bar', age:20, gender:'woman'}
}
const foo = new Person('foo', 30, 'man');
console.dir(foo);

포스트

25

카테고리

4

태그

8

팔로우