소년코딩의 자바스크립트 강좌 19. this

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

this 인자는 이해하기 어렵다. 

this가 이해하기 어려운 이유는 자바스크립트의 여러 가지 함수가 호출 패턴에 따라 this가 다른 객체를 참조(this 바인딩)하기 때문이다.

• 객체의 메서드를 호출 → 해당 메서드를 호출한 객체로 바인딩
• 함수를 호출 → 전역 객체에 바인딩
• 생성자 함수를 호출 → 새로 생성되는 객체에 바인딩

위와같이 3가지 this 바인딩 패턴이 있다.

---

1. 객체를 호출할 때 this 바인딩

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

// blog 객체 생성
var blog = {
        name: "oppa",
        sayName : function() {
                console.log(this.name);
        }
};
 
// other_blog 객체 생성
var other_blog = {
        name : "coding"
};
 
// other_blog.sayName() 메서드
other_blog.sayName = blog.sayName;
 
// sayName() 메서드 호출
blog.sayName();        // "oppa"
other_blog.sayName();  // "coding"

---

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

함수를 호출하면, 해당 함수 내부 코드에서 사용된 this는 전역 객체에 바인딩 된다.

브라우저 호스트환경에서는 전역 객체가 window 객체다.

var blog = 'This is Oppa Coding';
 
console.log(window.blog);    // 'This is Oppa Coding';
 
//sayBlog() 함수
var sayBlog= function() {
        console.log(this.blog);  // sayBlog() 함수 호출 시 this는 전역 객체에 바인딩 됩니다.
}

 

- 내부함수

주의 할점은 메서드의 내부 함수(inner function)를 호출했을 경우에도 그대로 적용된다는 것이다.

// 전역변수 value 정의
var value = 100;
 
// myBlog 객체 생성
var myBlog = {
        value : 1,
        func1 : function() {
                this.value += 1;
                console.log('func1() called. this.value : ' + this.value);
                
                // func2()  내부 함수
                func2 = function() {
                        this.value += 1;
                        console.log('func2() called. this.value : ' + this.value);
 
                         // func3() 내부 함수
                         func3 = function() {
                         this.value +=  1;
                         console.log('func3() called. this.value : ' + this.value);
                         }
 
                        func3();  // func3()  내부 함수 호출
                }
 
                 func2();   // func2() 내부 함수 호출
        }
};
 
myBlog.func1();  // func1() 메서드 호출
 
// 출력 결과
func1() called. this.value : 2
func2() called. this.value : 101
func3() called. this.value : 102

이러한 내부 함수 this가 부모 함수의 this가 가리키는 객체를 참조하게 할려면 부모 함수의 this를 다른 변수에 저장해야 한다.

// myBlog 객체 생성
var myBlog = {
        value : 1,
        func1 : function() {
                
                var that = this;    //  부모 함수인 func1 ()의 this 값을 that 변수에 저장한다.
 
                this.value += 1;
                console.log('func1() called. this.value : ' + this.value);
                
                // func2()  내부 함수
                func2 = function() {
                        that.value += 1;
                        console.log('func2() called. this.value : ' + that.value);
 
                         // func3() 내부 함수
                         func3 = function() {
                         that.value +=  1;
                         console.log('func3() called. this.value : ' + that.value);
                         }
 
                        func3();  // func3()  내부 함수 호출
                }
 
                 func2();   // func2() 내부 함수 호출
        }
};
 
myBlog.func1();  // func1() 메서드 호출
 
// 출력 결과
func1() called. this.value : 2
func2() called. this.value : 3
func3() called. this.value : 4

---

 

by 소년코딩

추천은 글쓴이에게 큰 도움이 됩니다.

악플보다 무서운 무플, 댓글은 블로그 운영에 큰 힘이됩니다.