javascript_jquery_basic_3_3b

중첩 함수에서 this는 왜 window 객체가 되는가?

자바스크립트에서 this 객체는 함수 호출을 기반으로 한다.
this 객체가 설정되는 3가지 경우는 다음과 같다.

1. someThing.someFunction(arg1, arg2, argN)
2. someFunction.call(someThing, arg1, arg2, argN)
3. someFunction.apply(someThing, [arg1, arg2, argN])

위 상황에서 모든 this는 someThing이다.
함수를 호출할 때 선행 부모가 없는 경우에는, 일반적으로 브라우저의 global object인 window 객체가 부모가 된다.

var std_obj = {
  options : { rows: 0, cols: 0 },
  activeEffect : "none",
  displayMe : function() {

    // the 'this' pointer is referring to the std_obj
    if (this.activeEffect=="fade") { }

    var doSomeEffects = function() {

      // the 'this' pointer is referring to the window obj, why?
      if (this.activeEffect=="fade") { }

    }

    doSomeEffects();   
  }
};

std_obj.displayMe();

위 코드에서 doSomeEffects()는 실제로 doSomeEffects.call(undefined);로 호출된다.
따라서 doSomeEffects의 스코프 내부의 this는 window 객체가 된다.

Javascript “this” pointer within nested function

ECMAScript 규격에서 일반 함수호출의 this 바인딩은 다음과 같이 동작한다.

1. strict mode일 경우 thisValue(this)를 thisArgument(숨은 인자)로 지정한다
2. strict mode가 아니고, thisArguments(숨은 인자)는 null 또는 undefined 라면,
3. thisValue(this)를 [[globalThis]]로 설정한다. // 일반적으로 window 객체
4. thisArguments가 null 또는 undefined가 아니라면 thisValue를 thisArgument로 설정한다.

ECMAScript 2015 9.2.1.2 OrdinaryCallBindThis

객체 초기화시 콜론(:)을 사용하는 이유?

자바스크립트 1.2부터 객체 이니셜라이저를 이용하여 객체를 생성할수 있게 되었다.
객체 이니셜라이저는 객체를 초기화하기 위한 축약표기법이다.

객체 이니셜라이저는 이용한 객체 생성 문법은 다음과 같다.

var o = {
    r: 'some value',
    t: 'some other value'
};

축약표기법을 사용하여 객체를 초기화하면 기능적으로 아래와 같이 기능적으로 동일한 작업을 수행한다.

var o = new Object();
o.r = 'some value';
o.t = 'some other value';

What does ':' (colon) do in JavaScript?
Working with objects
Object initializer