자바스크립트 this

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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 객체가 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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를 붙여 호출하면 원치 않는 생성자 함수처럼 동작 할 수 있으므로 함수 이름의 첫 문자를 대문자로 쓰기를 권한다.

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

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

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

  • 일반 함수 호출의 경우 this가 window 전역 객체에 바인딩된다.
  • 생성자 함수 호출의 경우 this는 새로 생성된 빈 객체에 바인딩된다.
    1
    2
    3
    4
    5
    6
    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 리턴한다.

1
2
3
4
5
6
7
8
const noReturnFunc = function() {
console.log('리턴값이 없다.');
}

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

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

  • 리턴값이 지정되지 않는다면, this로 바인딩된 새로 생성된 객체가 리턴된다.
  • 생성자 함수에서는 일반적으로 리턴값을 지정하지 않는다.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    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);

댓글

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×