arguments 객체,this 바인딩

arguments 객체

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

인덱스와 length 프로퍼티를 가지고 있지만

유사배열객체이므로 배열의 forEach, map과 같은 내장 메서드를 가지고 있지 않다.

 

this

this는 '자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수'다.

this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메소드를 참조 할 수 있으며

함수가 호출되는 방식에 따라 동적으로 결정된다.

뭔 말인지 이해 안된다면 '누가 나를 불렀느냐' 정도로 이해..

 

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

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

  var otherObject = {
    name: 'bar'
  }


  otherObject.sayName = myObject.sayName;
    // sayName() 은 myObject , otherObject 객체로부터 각각 호출된다.



  myObject.sayName();            //(결과값)foo
  otherObject.sayName();         //(결과값)bar

 

결과값으로 알 수 있듯이

sayName() 메서드에서 사용된 this는 자신을 호출한 객체를 바인딩 한다.

 

 

 

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

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

브라우저에서 자바스크립트를 실행하는 경우 전역 객체는 window 객체가 된다.

var test = 'this가 전역객체에 바인딩되는 예제'

let saytest = function(){
    console.log(this.test);
}

saytest();     // (결과값)this가 전역객체에 바인딩되는 예제

 

this바인딩 특성은 내부함수를 호출했을 경우에도 그대로 적용된다.

 

// 전역변수 value 정의
var value = 100;

var myObject = {
    value : 1 ,
    fun1 : function(){
        this.value += 1;
        console.log('fun1의 값은 ' + this.value);

        //내부함수
        fun2 =  function(){
            this.value += 1;
            console.log('fun2의 값은 ' + this.value);
            
            // 내부함수
            fun3 = function(){
            this.value += 1;
            console.log('fun3의 값은 ' + this.value);
            }

            fun3();

        } 

        fun2()
        
    } 
    
}; 

myObject.fun1();

결과값

 

결과값이 

 

fun1의 값은 2
fun2의 값은 3
fun3의 값은 4

 

로 나오길 원했지만 엉뚱한 답이 나왔다.

그 이유는 fun1의 내부함수들의 this는 전역객체를 참조했기 때문이다.

 

 

 

내부함수가 부모함수의 this가 가리키는 객체에 접근하기 위해서는 that을 사용한다. (이해 x..)

var myObject = {
    value : 1 ,
    fun1 : function(){
        var that = this;

        this.value += 1;
        console.log('fun1의 값은 ' + this.value);

        //내부함수 fun2
        fun2 =  function(){
            that.value += 1;
            console.log('fun2의 값은 ' + that.value);
            
            // 내부함수 fun3s
            fun3 = function(){
            that.value += 1;
            console.log('fun3의 값은 ' + that.value);
            }

            fun3();

        } // fun2 end

        fun2()
        
    } // fun1 end
    
}; // myObject end

myObject.fun1();

that을 활용

 

이러한 this의 한계를 극복하기 위해 call , apply , bind 메서드가 존재한다.

 

 

 

3. 생성자 함수를 호출할 때 this 바인딩   (많이 이해가 안가는 부분..)

자바스크립트의 생성자 함수는 말 그대로 자바스크립트의 객체를 생성하는 역할을 한다. 하지만 C++이나 자바와 같은 객체지향 언어에서의 생서자 함수의 형식과는 다르게 그 형식이 정해져 있는게 아니라, 기존 함수에 new 연산자를 붙여서 호출하면 해당 함수는 생성자 함수로 동작한다. 때문에 대부분의 자바스크립트 스타일 가이드에서는 특정 함수가 생성자 함수로 정의되어 있음을 알리려고 함수 이름의 첫 문자를 대문자로 쓰기를 권하고 있다.

 // Person() 생성자 함수
var Person = functino(name) {
		this.name = name;
}

// foo 객체 생성
 var foo = new Person('foo');
console.log(foo.name) // foo